我必须使用 three.js 在动画 HTML5 图形中显示旋转的四面体。
当我创建对象时，它是倒置的，但它应该在地面上，只有一个表面，如屏幕截图所示:http://www10.pic-upload.de/08.10.12/v3nnz25zo65q.png
目前，这是旋转对象的代码。存储在 render() 函数中。但是轴不正确，对象旋转错误。
object.useQuaternion = true;
var rotateQuaternion_ = new THREE.Quaternion();
rotateQuaternion_.setFromAxisAngle(new THREE.Vector3(0, 1, 1), 0.2 * (Math.PI / 180));
object.quaternion.multiplySelf(rotateQuaternion_);
object.quaternion.normalize();
(从 Three.JS - how to set rotation axis 复制)
这是目前的结果:http://jsfiddle.net/DkhT3/
如何访问正确的轴以移动/旋转地面上的四面体？
感谢您的建议!
最佳答案
不要做你复制的东西。这是不正确的。
我假设您想要做的是从一个正面朝上的四面体开始。您可以做的一件事是修改 THREE.TetrahedronGeometry() 以使用四个顶点生成您想要的四面体。
如果你想使用现有的代码，那么你要做的就是在创建几何体后立即对其应用旋转，如下所示:
const geometry = new THREE.TetrahedronGeometry( 10, 0 );
geometry.applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, - 1 ).normalize(), Math.atan( Math.sqrt( 2 ) ) ) );
geometry.translate( 0, 10 / 3, 0 ); // optional, so it sits on the x-z plane
(确定正确的旋转 Angular 需要一些数学知识，但在这种情况下它是 sqrt( 2 ) 的反正切，以弧度表示。)
three.js r.146
关于javascript - three.js:在正确的轴上旋转四面体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12784455/