轴变更如何在Three.js中更改旋转轴

Question

你好，我实际上正在使用three.js，并想通过x轴旋转我的3D模型，但是当我尝试以下代码时：object.rotation.x += 0.01;它不像我想要的那样工作。下面的图片说明了左图现在的工作方式以及右图中我想要的效果。 PS：类似公爵形状的是我的3D模型。

- bosskay972

---

你可以尝试使用模型子几何体的.center() 方法。 - prisoner849

Answer 1

这里发生的情况是你的网格原点不在它的中心，正如你的鸭子图片（做得好！）所清楚地说明的那样。

解决方案是在 Y 方向上平移网格的顶点，使原点到达中间位置（也可以参见这个回答）：

geometry.translate( distX, distY, distZ );

还有一种自动重置网格原点的方法，即使用边界框来定义其中心（也就是说，您不必计算沿Y轴平移顶点的距离）：

// Create a bounding box:
var box = new THREE.Box3().setFromObject( mesh );
// Reset mesh position:
box.center(mesh.position);
mesh.position.multiplyScalar(-1);

然后将网格添加到一个枢轴对象中：

var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(mesh);

(还可以查看这个答案)。现在，您应该能够按预期围绕x轴旋转黄鸭了。

- Alexander van Oostenrijk

---

PS. 很喜欢这个带有“增强现实”标签的。 - Alexander van Oostenrijk

如果你能偷看我的新话题，我问了很多关于AR的问题。 - bosskay972

Answer 2

我尝试了两种方法来解决这个问题，但都没有成功，这是我的代码：

andy是我的对象。

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);

                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){ //loop function
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;
                                    pivot.rotation.x -= 0.01;
                                    //andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

编辑：我解决了问题，这是代码：

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);
                                andy.children[0].geometry.center();
                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;

                                    andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

- bosskay972

Answer 3

Object.children[0].geometry.center() - 这是关键代码。

- Milord Vladyslav