Question

我已经尝试了多种方法来倾斜对象，然后在该倾斜轴上旋转它，但是无论我尝试如何，它总是像Y轴一样笔直旋转，但在这个新的倾斜角度上似乎并没有旋转轴，为什么不呢？

this.axis = new Vector3(0, 0, 0.5).normalize()
this.mesh = new Mesh(this.geometry, this.material)
this.mesh.rotateOnAxis(this.axis, Math.degToRad(25))

我尝试使用rotateOnWorldAxis，也尝试在makeRotationAxis上使用Matrix4并直接应用于几何。

此处示例：

codesandbox.io

Answer 1

有几种方法可以做到这一点；一种解决方案是通过引入group节点来向场景添加其他层次结构。在这里，group作为子元素添加到scene，而您的mesh作为子元素被添加到group：

this.mesh = new Mesh(this.geometry, this.material);

/* New group */
this.group = new THREE.Group();
/* Tilt group */
this.group.rotateOnAxis(this.axis, Math.degToRad(25));
/* Add mesh to group */
this.group.add( this.mesh );
/* Add group to scene */
this.scene.add( group );

使用此添加的层次结构，将“轴倾斜”应用于group，而不是mesh。在threejs中，这样做会导致mesh的任何子项（即group）也继承该倾斜。

此方法提供了一种直观的方式，可以将倾斜度与本地应用的旋转结合起来（例如，通过rotation.y += 0.005进行操作），以实现所需的基于轴的旋转。

这是工作中的codesandbox。希望有帮助！

替代方法

或者，您可以使用rotateY()方法围绕mesh对象的本地框架应用旋转变换：

this.mesh.rotateY(0.005);

// this.mesh.rotation.y += 0.005 <-- not needed

这是一种working example to demonstrate这种方法

在倾斜的Y轴上旋转ThreeJS Object3D

1 个答案:

替代方法