Question

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

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

感谢您的建议！

Answer 1

不要做你复制的内容。这是不对的。

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

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

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

（确定正确的旋转角度需要一些数学运算，但在这种情况下，它实际上是sqrt（2）的反正切，以弧度表示。）

这是一个更新的小提琴。拖动并缩放鼠标以控制相机。

小提琴：http://jsfiddle.net/DkhT3/3/

Answer 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>

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

2 个答案: