three.js：在正确的轴上旋转四面体答案

【问题标题】：three.js: rotate tetrahedron on correct axisthree.js：在正确的轴上旋转四面体
【发布时间】：2012-09-28 20:45:28
【问题描述】：

我必须使用 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/

如何访问正确的轴来移动/旋转地面上的四面体？

感谢您的建议！

【问题讨论】：

标签： javascript 3d rotation three.js

【解决方案1】：

不要做你复制的东西。这是不正确的。

我假设你想要做的是从一个正面朝上的四面体开始。您可以做的一件事是修改THREE.TetrahedronGeometry() 以使用四个顶点来生成您想要的四面体。

如果您想使用现有代码，那么您要做的就是在几何图形创建后立即对其应用旋转，如下所示：

var geometry = new THREE.TetrahedronGeometry( 40, 0 );
geometry.applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, - 1 ).normalize(), Math.atan( Math.sqrt( 2 )) ) );

（确定正确的旋转角度需要一些数学知识，但在这种情况下，它是 sqrt( 2 ) 的反正切，以弧度为单位。）

three.js r.133

【讨论】：

感谢您的解释。这就是我要找的东西！

【解决方案2】：

Download three.js from [http://www.html5canvastutorials.com/libraries/Three.js] library and put in the below HTML code. 
You will get good output.

<!Doctype html>
<html lang="eng">
<head>
    <title>I like shapes</title>
    <meta charset="UTF-8">
     <style>
     canvas{
     width: 100%; 
     height: 100% 
     }
    body{
    background: url(mathematics.jpg);
    width: 800px; 
    height: 500px;
    }
     </style>
</head>
<body>

    <script src="three.js"></script>

    <script> 
    // creating a Scene
    var scene = new THREE.Scene(); 

    // Adding Perspective Camera
    // NOTE: There are 3 cameras: Orthographic, Perspective and Combined.   
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 


    //create WebGL renderer 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    //Drawing a Tetrahedron.
    var pyramidgeometry = new THREE.CylinderGeometry(0, 0.8, 4, 4, false);

    //Change colour of Pyramid using Wireframe
    var pyramidmaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x0ff000});
    var pyramid = new THREE.Mesh(pyramidgeometry, pyramidmaterial); //This creates the cone
    pyramid.position.set(3.1,0,0);
    scene.add(pyramid);

    //moving camera outward of centre to Z-axis, because Cube is being created at the centre
    camera.position.z = 5;

    //we have a scene, a camera, a cube and a renderer. 

    /*A render loop essentially makes the renderer draw the scene 60 times per second.
    I have used requestAnimationFrame() function.*/
    var render = function() {
    requestAnimationFrame(render);

    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;*/

    pyramid.rotation.y += 0.01;
    pyramid.rotation.x += 0.01;
    pyramid.rotation.z += 0.01;

    renderer.render(scene, camera);
    };
    // calling the function
    render();

    </script>
</body>
</html>

【讨论】：