Transform individual Vertices from Position fromBufferAttribute

Questions
, ,
1

Hey, I guess I have a bit of a lower level issue. I’m currently trying to modify an Object 3D (represented in a scene graph) by transforming it’s vertices directly. Getting them from local space to world space to view space. I want to do that not in a shader but with the position attribute. Actually I mainly want to know how to apply a Matrix transformation to the individual vertices of an object 3D with the aim of transforming it visibly. My current code looks like this:

mainObj.traverse((node) => {
          //Check if child is a mesh in typescript
          if (node instanceof THREE.Mesh) {
 
            const positionAttribute = node.geometry.getAttribute("position");
            const vertex = new THREE.Vector3();

            for (let i = 0; i < positionAttribute.count; i++) {
              vertex.fromBufferAttribute(positionAttribute, i);

              vertex.applyMatrix4(vertex, node.matrixWorld);
              vertex.applyMatrix4(camera.matrixWorldInverse);
              vertex.applyMatrix4(camera.projectionMatrix);
            }

            node.geometry.attributes.position.needsUpdate = true;
          }
        });

I also tried to simplify it in a codepen: https://codepen.io/jasonandrewth/pen/wvXPxme

Basically I just don’t understand how to apply a matrix transformation to the individual vertices. I get the vertices of the object as 3D vectors and apply a homogenous matrix, which works computationally but the step where the actual object changes is missing.

2

You are just setting a vertex and doing nothing with it.

            for (let i = 0; i < positionAttribute.count; i++) {

              vertex.fromBufferAttribute(positionAttribute, i);

              vertex.applyMatrix4(vertex, node.matrixWorld);
              vertex.applyMatrix4(camera.matrixWorldInverse);
              vertex.applyMatrix4(camera.projectionMatrix);

              // Set position to vertex
              positionAttribute.setXYZ(i, vertex.x, vertex.y, vertex.z); 
            }
2 Likes
3

exactly the method I was missing, thanks a lot. Seems quite obvious now:D

1 Like