Struggling with ThreeJS bufferGeometry position attribute not refreshing after applying translation

Question

Struggling with ThreeJS bufferGeometry position attribute not refreshing after applying translation

Leveraging STLLoader, I successfully loaded an stl file onto a threeJS scene and obtained a BufferGeometry.

Following that, I utilized

myMesh.position.set(x, y, z) 
myMesh.rotation.setFromQuaternion(quaternion, 'XYZ');

to manipulate the geometry. This led to changes in

myMesh.position
myMesh.quaternion

The translation took place within the scene without any issues. I was anticipating that the

myMesh.geometry.attributes.position.array

would show a difference before and after the translation, but it remained unchanged. I am eager to extract the updated vertices from the buffergeometry following the translation. My attempts involved calling

myMesh.geometry.dynamic = true;
myMesh.geometry.attributes.position.needsUpdate = true;

in the render loop, however, this did not yield results as the vertices were not explicitly updated.

javascript three.js buffer-geometry

Answer 1

Answer №1

To determine the global position of a mesh's geometry while accounting for the mesh's transform matrix, use mesh.matrix. If your mesh geometry is of type THREE.BufferGeometry, follow this pattern:

Here are the steps to follow:

mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 10, 10, 10 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 1, 1, 1 );
scene.add( mesh );

mesh.updateMatrix(); // Ensure that the mesh's matrix is up to date

var vec = new THREE.Vector3();
var attribute = mesh.geometry.attributes.position; // Retrieve the position data
var index = 1; // Index starts at zero, so this is the second vertex

vec.fromBufferAttribute( attribute, index ); // Extract the x,y,z coordinates

vec.applyMatrix4( mesh.matrix ); // Apply the mesh's matrix transformation

Based on three.js r157

Answer 2

To determine the global position of a mesh's geometry while accounting for the mesh's transform matrix, use mesh.matrix. If your mesh geometry is of type THREE.BufferGeometry, follow this pattern:

Here are the steps to follow:

mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 10, 10, 10 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 1, 1, 1 );
scene.add( mesh );

mesh.updateMatrix(); // Ensure that the mesh's matrix is up to date

var vec = new THREE.Vector3();
var attribute = mesh.geometry.attributes.position; // Retrieve the position data
var index = 1; // Index starts at zero, so this is the second vertex

vec.fromBufferAttribute( attribute, index ); // Extract the x,y,z coordinates

vec.applyMatrix4( mesh.matrix ); // Apply the mesh's matrix transformation

Based on three.js r157

Struggling with ThreeJS bufferGeometry position attribute not refreshing after applying translation

Answer №1

Similar questions

Creating a customized URL using the famous "@" symbol

Retrieve the world coordinate using Curve.getPoint() in Three.js

Is there a way to transform a string into a human-readable slug?

Using jQuery to initiate a page load into a new page within the WorkLight platform

Use JavaScript to change the text of a hyperlink to @sometext

Embed message from a Discord Bot

Solving templateUrl resolution of directives in Angular with RequireJS

How do I create a new JSON Object with only two properties by selecting from an existing JSON Object with four properties?

JavaScript - the act of exiting functions

Utilizing Node.js to retrieve streams in conjunction with OpenAI

Tips on how to properly position the grandchild in world space by rotating and translating the grandparent

Slick carousel not functioning properly with Angular slickGoTo

Executing a nested function as an Onclick event in an HTML document

Creating interactive form fields using React

How to Retrieve a Specific Line with jQuery

Navigating through Angular JS validation procedures step by step

What is the best way to connect the imagemap shape with the checkbox?

Accessing a variable from one function within another function in Vue

Encountering a 'JSON parsing error' while transmitting data from Ajax to Django REST Framework

Is it possible to transfer data between two child components in Vue.js that share a common parent component?