Javascript 在倾斜的Y轴上旋转ThreeJS Object3D
我尝试了很多方法来倾斜我的物体,然后在这个倾斜的轴上旋转它,但是无论我尝试了什么,它总是像Y轴一样向上旋转,它似乎不会在这个新的倾斜轴上旋转,为什么不呢Javascript 在倾斜的Y轴上旋转ThreeJS Object3D,javascript,three.js,Javascript,Three.js,我尝试了很多方法来倾斜我的物体,然后在这个倾斜的轴上旋转它,但是无论我尝试了什么,它总是像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)) 我尝试过使用rotationWorldAx
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))
我尝试过使用rotationWorldAxis
,也尝试过在Matrix4
上使用makeRotationAxis
,并直接应用于几何体
示例如下:
实现这一点有几种方法;一种解决方案是通过引入节点向场景中添加附加层次。此处,
组
作为子对象添加到场景
,而您的网格
作为子对象添加到该组
:
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 );
使用此添加的层次结构,“轴倾斜”将应用于网格,而不是网格
。在threejs中,这样做会导致组
的所有子项(即网格
)也继承该倾斜
此方法提供了一种直观的方式,将倾斜与局部应用的旋转相结合(即通过旋转。y+=0.005
)以实现所需的基于轴的旋转
这是一张工作票。希望有帮助
替代方法
或者,可以使用rotateY()
方法围绕mesh
对象的局部帧应用旋转变换:
this.mesh.rotateY(0.005);
// this.mesh.rotation.y += 0.005 <-- not needed
this.mesh.rotateY(0.005);
//this.mesh.rotation.y+=0.005嘿,谢谢你的回答,我知道这个解决方案,但我对如何在不向层次结构添加额外对象的情况下做到这一点感兴趣当然,我刚刚包括了另一个方法-这有帮助吗?天哪,它一直都在那里,您介意解释一下rotateY方法和使用旋转对象的y属性之间的区别吗?我已经接受了你的答案:)谢谢:)我的理解是rotateY()
方法在对象的世界变换之前应用旋转变换,这意味着在应用倾斜之前应用y旋转,其中作为旋转。y+=…
应用“在事实之后”旋转,导致围绕y旋转应用“倾斜后”