时间戳

首页 > 解决方案 > 为什么附加到组后顶点不更新？

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

问题描述

我想创建一组线条。第一行：

 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 );

centerPoint 不是 (0,0,0)

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

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

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

标签： three.js

解决方案

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

推荐阅读