three.js所：上正確的軸

旋轉四面體我在一個動畫圖形HTML5顯示一個旋轉的四面體，使用three.js所。three.js所：上正確的軸

當我創建的對象，它倒過來了，但它應該是在地面上一面，就像這個截圖：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/

我如何才能獲得正確的軸移動/旋轉，地面上的四面體？

感謝建議！

來源

2012-10-08 Patrick Hafner

不要做你複製的東西。這是不正確的。

我假設你想要做的是一個四面體是右側行動開始開始。你可以做的一件事是修改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/

來源

2012-10-08 17:01:30 WestLangley

謝謝你的解釋。這就是我一直在尋找的！ –

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>

來源

2017-11-14 07:29:23

three.js所：上正確的軸

回答

相關問題