轴改变旋转轴三个js

Posted 2023-02-27

【中文标题】轴改变旋转轴三个js

【英文标题】：Axis change the rotation axis three js

【发布时间】：2019-01-10 10:16:28

【问题描述】：

您好，我实际上使用的是 three.js，我想通过 x 轴旋转我的 3d 模型，但是当我尝试代码时：object.rotation.x += 0.01; 它不像我想要的那样工作。下图说明了它现在在左图中的工作方式以及我想要在右图中的内容。 PS：像公爵一样的造型是我的3d模型

【问题讨论】：

您可以尝试使用模型子几何的.center()方法。

【参考方案1】：

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

一种解决方案是在 Y 方向平移网格的顶点，使原点向中间移动（另见this answer）：

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

（另见this answer）。您现在应该可以根据需要围绕 x 轴旋转鸭子了。

【讨论】：

附言。喜欢这个上的augmented-reality 标签

如果你能偷看我的new topic，我会问很多关于 AR 的问题

【参考方案2】：

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

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

【参考方案3】：

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