Formulate a CANNON entity utilizing the THREE.Mesh technique

Question

Formulate a CANNON entity utilizing the THREE.Mesh technique

I have a THREE.js plane where the points are manipulated using Perlin noise to create terrain. I now need to implement physics for the camera to prevent it from falling through the plane.

My goal is to develop a function that can extract the vertices and faces from the mesh and transfer them to a CANNON body as a Convex Polyhedron. Here's my current attempt that is not functioning as expected:

function setPhysicsGeometry(mesh, body) {
    const vertices = mesh.geometry.vertices;
    const shape = new CANNON.ConvexPolyhedron();

    vertices.forEach(function(vertex) {
        vertex.z = 0; 
        shape.vertices.push(new CANNON.Vec3(vertex.x, vertex.y, vertex.z));
    });

    const faces = [];
    for (let i = 0; i < mesh.geometry.faces.length; i++) {
        const face = mesh.geometry.faces[i];
        faces.push([face.a, face.b, face.c]);
    }
    shape.faces = faces;

    shape.updateNormals();
    shape.updateEdges();

    body.addShape(shape);
}

I'm encountering the following error:

Uncaught TypeError: shape.updateNormals is not a function

The same issue arises with shape.updateEdges()

Is this a problem with these functions or am I oversimplifying a difficult/impossible task?

Thank you

UPDATE: I've created a function that somewhat functions but is extremely slow:

function createShape(geo) {
    const bufferedGeo = new THREE.BufferGeometry().fromGeometry(geo); 

    let position = bufferedGeo.attributes.position.array
    const points = []

    for (let i = 0; i < position.length; i += 3) {
        points.push(new CANNON.Vec3(position[i], position[i + 1], position[i + 2]))
    }
    const faces = []
    
    for (let i = 0; i < position.length / 3; i += 3) {
        faces.push([i, i + 1, i + 2])
    }

    const shape = new CANNON.ConvexPolyhedron(points, faces)
    
    return shape
}

Here's an error I'm encountering indicating that the normals are incorrectly ordered:

.faceNormals[1011] = Vec3(-0.38237948261368415,0.4673447646702331,-0.7971040096570934) looks like it points into the shape? The vertices follow. Make sure they are ordered CCW around the normal, using the right hand rule.

I'm unsure how to rectify this issue since the normals are simply derived from the geometry

javascript three.js cannon.js

Answer 1

Answer №1

I managed to figure it out (although there are still some issues with the physics, but that's a separate issue).

A big thank you to This Guy for providing me with a fantastic example that helped me find the solution. I initially tried to use ConvexPolyhedron to define my own body shape. While it's possible to do that, arranging the faces and normals in the correct syntax proved to be quite challenging. Instead, I opted for Trimesh, which was a much simpler approach.

In the example, new THREE.TorusKnotGeometry() was used followed by createTrimesh(). However, this approach resulted in an error for me because the THREE.js geometry was not a buffer geometry. I made a simple adjustment by creating a function, and this resolved the errors. Despite this, the physics still weren't functioning properly for the object. After spending what seemed like an eternity on it, I ended up copying the position and quaternion from the THREE.js mesh to the CANNON body, and it worked quite well. Here is the finalized code:

Function to Copy position and quaternion:

function copy(threeMesh, cannonBody) {
    // Copy position
    const position = new CANNON.Vec3(
        threeMesh.position.x,
        threeMesh.position.y,
        threeMesh.position.z
    );
    cannonBody.position.copy(position);

    // Copy rotation
    const quaternion = new CANNON.Quaternion(
        threeMesh.quaternion.x,
        threeMesh.quaternion.y,
        threeMesh.quaternion.z,
        threeMesh.quaternion.w
    );
    cannonBody.quaternion.copy(quaternion);
}

Function to create Trimesh:

function buffer(geo) {
    const bufferedGeo = new THREE.BufferGeometry().fromGeometry(geo);
    return bufferedGeo;
}

function CreateTrimesh(geometry) {
    const vertices = buffer(geometry).attributes.position.array
    const indices = Object.keys(vertices).map(Number)
    return new CANNON.Trimesh(vertices, indices)
}

Mesh and Body code:

var platformGeometry = createCustomGeometry(terrain, size + 1, size + 1)
var platformMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, wireframe: false, side: THREE.DoubleSide});
var platform = new THREE.Mesh(platformGeometry, platformMaterial);
platform.receiveShadow = true;
platform.castShadow = true;
platform.position.set(0, 0, 0);
platform.rotation.x = Math.PI / 2;
scene.add(platform);

var platShape = CreateTrimesh(platformGeometry, platform);
var platBody = new CANNON.Body({ mass: 0, shape: platShape });
copy(platform, platBody);
world.addBody(platBody);

Answer 2

I managed to figure it out (although there are still some issues with the physics, but that's a separate issue).

A big thank you to This Guy for providing me with a fantastic example that helped me find the solution. I initially tried to use ConvexPolyhedron to define my own body shape. While it's possible to do that, arranging the faces and normals in the correct syntax proved to be quite challenging. Instead, I opted for Trimesh, which was a much simpler approach.

In the example, new THREE.TorusKnotGeometry() was used followed by createTrimesh(). However, this approach resulted in an error for me because the THREE.js geometry was not a buffer geometry. I made a simple adjustment by creating a function, and this resolved the errors. Despite this, the physics still weren't functioning properly for the object. After spending what seemed like an eternity on it, I ended up copying the position and quaternion from the THREE.js mesh to the CANNON body, and it worked quite well. Here is the finalized code:

Function to Copy position and quaternion:

function copy(threeMesh, cannonBody) {
    // Copy position
    const position = new CANNON.Vec3(
        threeMesh.position.x,
        threeMesh.position.y,
        threeMesh.position.z
    );
    cannonBody.position.copy(position);

    // Copy rotation
    const quaternion = new CANNON.Quaternion(
        threeMesh.quaternion.x,
        threeMesh.quaternion.y,
        threeMesh.quaternion.z,
        threeMesh.quaternion.w
    );
    cannonBody.quaternion.copy(quaternion);
}

Function to create Trimesh:

function buffer(geo) {
    const bufferedGeo = new THREE.BufferGeometry().fromGeometry(geo);
    return bufferedGeo;
}

function CreateTrimesh(geometry) {
    const vertices = buffer(geometry).attributes.position.array
    const indices = Object.keys(vertices).map(Number)
    return new CANNON.Trimesh(vertices, indices)
}

Mesh and Body code:

var platformGeometry = createCustomGeometry(terrain, size + 1, size + 1)
var platformMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, wireframe: false, side: THREE.DoubleSide});
var platform = new THREE.Mesh(platformGeometry, platformMaterial);
platform.receiveShadow = true;
platform.castShadow = true;
platform.position.set(0, 0, 0);
platform.rotation.x = Math.PI / 2;
scene.add(platform);

var platShape = CreateTrimesh(platformGeometry, platform);
var platBody = new CANNON.Body({ mass: 0, shape: platShape });
copy(platform, platBody);
world.addBody(platBody);

Formulate a CANNON entity utilizing the THREE.Mesh technique

Answer №1

Similar questions

Reviewing and Implementing React and Material-UI Autocomplete for Selecting Multiple

Issues with Angular JS page loading when utilizing session and local storage in Google Chrome

In express.js, cookies automatically expire upon the browser being closed

obtaining information from newly added form elements in an Angular application

Is it possible to utilize personalized functionalities in the main.js file of the Firefox Addon SDK?

Modifying the background hues in React using the useState hook

Prompt user to save changes or cancel before closing modal (if closed by pressing ESC or clicking the backdrop)

Guide to selecting and clicking multiple elements with a specific class using jQuery

The pdf generation feature of pdf-creator-node in Linux seems to be malfunctioning

Track the loading time of a webpage and the time it takes to render all subelements of

Searching with jQuery UI Autocomplete

Seamless transition of lightbox fading in and out

Facebook's Thumbs Down to My Code

Is there a way to eliminate the border of an image attribute pulled from an input field?

Effortlessly showcase JSON data in an HTML owl carousel

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

Retrieve information stored in a component's data variable

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

Creating a dynamic quiz with random images using text boxes in HTML and PHP

In VueJS, the v-for directive allows you to access both parameters and the event object within