three.js - 为什么附加到组后顶点没有更新？

Question

我想创建一组线。第一行:

 var geometry = new THREE.Geometry();
 itemLine = new THREE.Line( geometry, material );

当前几何:

geometry.vertices[0]
Object { x: -540, y: 50, z: 0 }

之后，我创建组并设置位置:

item  = new THREE.Group();
item.attach(itemLine);
item.position.set( centerPoint.x, centerPoint.y, 0 );

中心点不是 (0,0,0)

创建组并附加子项后，我在控制台中看到:

geometry.vertices[0]
Object { x: -540, y: 50, z: 0 }`

顶点未更新!我想要新的坐标(本地和世界)，具有组的偏移位置。

Answer 1

Geometry.vertices 定义局部空间中的几何体。转换 3D 对象或其祖先并不重要，顶点将始终保持相同的值。

您可以通过线世界矩阵将顶点转换为世界空间来实现您想要的结果。这是此工作流的完整示例代码。

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 1, 0, 0 ) );

var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

var lines = new THREE.Line( geometry, material );

var group = new THREE.Group();
group.add( lines );
group.position.set( 2, 0, 0 );
group.updateMatrixWorld(); // update world matrices of the hierarchy of 3D objects
scene.add( group );

const vertex = new THREE.Vector3();
vertex.copy( geometry.vertices[ 0 ] ).applyMatrix4( lines.matrixWorld );
console.log( vertex ); // prints {x: 2, y: 0, z: 0}

演示:https://jsfiddle.net/sy6ur1x7/

three.js R112