弃用的 ThreeJS 翻译现在改为添加到位置

Question

在three.js r96中，存在translate(x,y,z)。我会用它来将一个对象从它的原点移开。

现在在 r103 中，不推荐使用 translateX(x) 但是在查看网格的控制台输出时，我发现如果我的位置是 position.set(50,0,0) 并且a traslateX(50)，则Mesh的属性显示位置为(100,0,0).

这是问题的一个例子。在这段代码中，我有三架飞机。旋转平面必须在红色和蓝色的交点处绕 y 轴旋转。

如果我的平面宽度是100，那么将位置设置为(50,0,0) 应该会将蓝色中心点移动到红色的最右边缘。那应该是blue的新出处。

现在，如果我在 x 轴上平移蓝色 50，那么原点仍应位于同一位置，但现在旋转时蓝色会在位于蓝色最左侧点的 Y 轴上旋转。如您所见，事实并非如此。

查看 Mesh 发现没有平移，只有一个位置。

plane3.position.set(50,0,0);
//plane3.translate(50,0,0);  //Used to work
plane3.translateX(50); //New translate, adds to position instead
//var vector = new THREE.Vector3( 1, 0, 0 );
//plane3.translateOnAxis(vector,40);

function render() {
 requestAnimationFrame( render );
 plane3.rotation.y += 0.03;
     renderer.render( scene, camera );
}

我想要的结果是我可以在最左边的 Y 轴上旋转蓝色。

Answer 1

您似乎将已弃用的 Object3D.translate() 方法与 BufferGeometry.translate() 混合使用。如果您平移几何而不是 3D 对象，则可以按预期更改轴心点。我希望更新后的 codepen 显示您预期的视觉结果：

https://codepen.io/anon/pen/BEJpLg

弃用的 ThreeJS 翻译现在改为添加到位置

ThreeJS Translate deprecated now adds to position instead

rotation

three.js

translate-animation