Top method for extracting mesh vertices in three.js

Question

Top method for extracting mesh vertices in three.js

Being new to Three.js, I may not be approaching this in the most optimal way,

I start by creating geometry like this:

const geometry = new THREE.PlaneBufferGeometry(10,0);

Next, I apply a rotation:

geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI * 0.5 ) );

Then, I create a Mesh from it:

const mesh = new THREE.Mesh( geometry, materialNormal);

I then perform various operations on the mesh to position it correctly, such as:

mesh.position.copy(v2(10,20);
mesh.position.z = 0.5*10

mesh.position.x -= 20
mesh.position.y -= 10
mesh.rotation.z = angle;

Now, what is the best approach to access the vertices of the mesh before and after its position is adjusted? It was surprising to learn that the vertices of a mesh are not inherently stored in three.js.

Any advice or code examples would be highly appreciated.

javascript three.js

Answer 1

Answer №1

It seems like there might be some confusion related to three.js objects and their properties.

1) In three.js, a Mesh object does not actually store its vertices. Instead, it holds references to a Geometry/BufferGeometry object, as well as one or more Materials. The actual vertex data is stored within the geometry property of the Mesh.

2) When using PlaneBufferGeometry, which is a type of BufferGeometry, the vertex positions are stored in the position attribute (accessed through

mesh.geometry.attributes.position

). It's important to consider that the order of the vertices may be influenced by the index property (mesh.geometry.index).

In response to your inquiry, the geometric origin of the mesh aligns with its parent Mesh's origin. Therefore, the vertex positions "before mesh transformation" remain unchanged from their initial creation. You can retrieve them directly.

To obtain the updated vertex positions after applying mesh transformations, you'll need to convert each vertex from the local space of the Mesh to world space. Fortunately, three.js offers a convenient function for this purpose:

var tempVertex = new THREE.Vector3();
// Set tempVertex based on information from mesh.geometry.attributes.position

mesh.localToWorld(tempVertex);
// TempVertex now represents the position after transforming into world coordinates

Answer 2

It seems like there might be some confusion related to three.js objects and their properties.

1) In three.js, a Mesh object does not actually store its vertices. Instead, it holds references to a Geometry/BufferGeometry object, as well as one or more Materials. The actual vertex data is stored within the geometry property of the Mesh.

2) When using PlaneBufferGeometry, which is a type of BufferGeometry, the vertex positions are stored in the position attribute (accessed through

mesh.geometry.attributes.position

). It's important to consider that the order of the vertices may be influenced by the index property (mesh.geometry.index).

In response to your inquiry, the geometric origin of the mesh aligns with its parent Mesh's origin. Therefore, the vertex positions "before mesh transformation" remain unchanged from their initial creation. You can retrieve them directly.

To obtain the updated vertex positions after applying mesh transformations, you'll need to convert each vertex from the local space of the Mesh to world space. Fortunately, three.js offers a convenient function for this purpose:

var tempVertex = new THREE.Vector3();
// Set tempVertex based on information from mesh.geometry.attributes.position

mesh.localToWorld(tempVertex);
// TempVertex now represents the position after transforming into world coordinates

Answer 3

Answer №2

Check out this TypeScript example:

This code snippet retrieves the grid's position in the global coordinate system.

function getObjectCoordinates(obj: THREE.Object3D): { points: Array<THREE.Vector3>, surfaces: Array<THREE.Face3> } {
    let points: Array<THREE.Vector3> = [];
    let result = { points: points, surfaces: null };

    if (obj.hasOwnProperty("geometry")) {
        let geometry = obj["geometry"];
        
        if (geometry instanceof THREE.Geometry) {
            for (let point of geometry.vertices) {
                points.push(point.clone().applyMatrix4(obj.matrix));
            }
            result.surfaces = geometry.faces;
        } else if (geometry instanceof THREE.BufferGeometry) {
            let tempGeometry = new THREE.Geometry().fromBufferGeometry(geometry);
            
            for (let point of tempGeometry.vertices) {
                points.push(point.applyMatrix4(obj.matrix));
            }

            result.surfaces = tempGeometry.faces;
            tempGeometry.dispose();
        }
    }
    
    return result;
}

Alternatively, you can use the following code snippet:

if (geometry instanceof THREE.BufferGeometry) {
    let positions: Float32Array = geometry.attributes["position"].array;
    let pointCount = positions.length / 3;

    for (let i = 0; i < pointCount; i++) {
        let p = new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
    }
}

Answer 4

Check out this TypeScript example:

This code snippet retrieves the grid's position in the global coordinate system.

function getObjectCoordinates(obj: THREE.Object3D): { points: Array<THREE.Vector3>, surfaces: Array<THREE.Face3> } {
    let points: Array<THREE.Vector3> = [];
    let result = { points: points, surfaces: null };

    if (obj.hasOwnProperty("geometry")) {
        let geometry = obj["geometry"];
        
        if (geometry instanceof THREE.Geometry) {
            for (let point of geometry.vertices) {
                points.push(point.clone().applyMatrix4(obj.matrix));
            }
            result.surfaces = geometry.faces;
        } else if (geometry instanceof THREE.BufferGeometry) {
            let tempGeometry = new THREE.Geometry().fromBufferGeometry(geometry);
            
            for (let point of tempGeometry.vertices) {
                points.push(point.applyMatrix4(obj.matrix));
            }

            result.surfaces = tempGeometry.faces;
            tempGeometry.dispose();
        }
    }
    
    return result;
}

Alternatively, you can use the following code snippet:

if (geometry instanceof THREE.BufferGeometry) {
    let positions: Float32Array = geometry.attributes["position"].array;
    let pointCount = positions.length / 3;

    for (let i = 0; i < pointCount; i++) {
        let p = new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
    }
}

Top method for extracting mesh vertices in three.js

Answer №1

Answer №2

Similar questions

vue-dropzone fails to create thumbnails when a file is added

The Powerful Duo: JavaScript and Regex

Simplifying complex JSON structures by un-nesting arrays

Alert: Mouse Exiting Window - Moodle Prompt

Exploring the possibilities of utilizing package.json exports within a TypeScript project

Issue with Parsley validation not functioning as expected

Handling errors in chained promises and routes in Node.js/ExpressJS

Retrieve the earliest and latest dates from a JSON file to utilize with FlatPicker

Encountering a 403 error while using the ajax infinite loading script

Pressing the button results in no action

The error message "There is no defined window.matchMedia prefers-color-scheme window in Next.js"

Updating the error state of a TextField Component in React MaterialUI upon clicking a button

The $scope object in AngularJS has not been properly defined and

Retrieve the string data from a .txt document

Troubleshooting a Global Search Problem with Regular Expressions in Javascript

I'm having trouble pinpointing the cause of the never-ending loop in this React code that is using Material UI grid

`How can I effectively integrate react-i18next with the Semantic UI label element?`

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

What is the best way to include the application version in an Electron project using JavaScript

Force the page to refresh if the user navigates back using the browser's back button