three.js: faire pivoter le tétraèdre sur l'axe correct

Je dois afficher un tétraèdre en rotation dans un graphique HTML5 animé, en utilisant three.js.three.js: faire pivoter le tétraèdre sur l'axe correct

Lorsque je crée l'objet, il est à l'envers, mais il devrait être sur le terrain avec une surface, comme sur cette capture d'écran: http://www10.pic-upload.de/08.10.12/v3nnz25zo65q.png

C'est le code pour faire tourner l'objet, en ce moment. Stocké dans la fonction render(). Mais l'axe est incorrect et l'objet tourne mal.

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

(copié à partir Three.JS - how to set rotation axis)

Ceci est le résultat au moment: http://jsfiddle.net/DkhT3/

Comment puis-je accéder à l'axe correct pour déplacer/tourner le tétraèdre sur le terrain?

Merci pour vos suggestions!

Source

2012-10-08 Patrick Hafner

Ne faites pas ce que vous avez copié. Ce n'est pas correct. Je suppose que ce que vous voulez faire est de commencer avec un tétraèdre qui est à droite pour commencer. Une chose que vous pouvez faire est de modifier THREE.TetrahedronGeometry() pour utiliser quatre sommets qui produisent le tétraèdre que vous voulez.

Si vous souhaitez utiliser le code existant, alors ce que vous avez à faire est d'appliquer une rotation à droite de la géométrie après sa création, comme ceci:

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

(détermination de l'angle de rotation correct exige un peu de maths, mais il s'avère que c'est l'arctangente du sqrt (2) dans ce cas, en radians.)

Voici un violon mis à jour. Faites glisser et faites un zoom sur la souris pour contrôler la caméra.

Fiddle: http://jsfiddle.net/DkhT3/3/

Source

2012-10-08 17:01:30 WestLangley

Merci pour cette explication. C'est ce que je cherchais! –

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>

Source

2017-11-14 07:29:23

three.js: faire pivoter le tétraèdre sur l'axe correct

Répondre

Questions connexes