Comment faire tourner un objet 3D sur l'axe trois.js?

j'ai un gros problème avec la rotation en trois.js Je veux faire tourner mon cube 3D dans un de mes jeux. 

//init
geometry = new THREE.CubeGeometry grid, grid, grid
material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8}
for i in [1...@shape.length]
    othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid)
    othergeo.position.x = grid * @shape[i][0]
    othergeo.position.y = grid * @shape[i][1]
    THREE.GeometryUtils.merge geometry, othergeo
@mesh = new THREE.Mesh geometry, material

//rotate
@mesh.rotation.y += y * Math.PI / 180
@mesh.rotation.x += x * Math.PI / 180
@mesh.rotation.z += z * Math.PI / 180

et (x, y, z) peuvent être (1, 0, 0)

, puis le cube peut tourner, mais le problème est que le cube tourne sur son propre axe,donc après qu'il a tourné, il ne peut pas tourner comme prévu.

je trouve la page comment faire tourner un trois.js Vector3 autour d'un axe? , mais il vient de laisser un Vector3 point tourner autour de l'axe du monde?

et j'ai essayé d'utiliser matrixRotationWorld comme 

@mesh.matrixRotationWorld.x += x * Math.PI / 180
@mesh.matrixRotationWorld.y += y * Math.PI / 180
@mesh.matrixRotationWorld.z += z * Math.PI / 180

mais ça ne marche pas, Je ne sais pas si je l'ai mal utilisé ou s'il y a d'autres moyens..

alors, comment faire tourner le cube 3D autour de l'axe du monde???

32
demandé sur Community 2012-06-16 08:08:23

9 réponses

Voici les deux fonctions que j'utilise. Ils sont basés sur la matrice de rotation. et peut tourner autour d'axes arbitraires. Pour tourner en utilisant les axes du monde, vous voudriez utiliser la deuxième fonction rotateAroundWorldAxis (). 

// Rotate an object around an arbitrary axis in object space
var rotObjectMatrix;
function rotateAroundObjectAxis(object, axis, radians) {
    rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    // object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply
    // new code for Three.JS r55+:
    object.matrix.multiply(rotObjectMatrix);

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js r50-r58:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // new code for Three.js r59+:
    object.rotation.setFromRotationMatrix(object.matrix);
}

var rotWorldMatrix;
// Rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    //  rotWorldMatrix.multiply(object.matrix);
    // new code for Three.JS r55+:
    rotWorldMatrix.multiply(object.matrix);                // pre-multiply

    object.matrix = rotWorldMatrix;

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js pre r59:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // code for r59+:
    object.rotation.setFromRotationMatrix(object.matrix);
}

vous devez donc appeler ces fonctions dans votre fonction anim (requestanimframe callback), résultant en une rotation de 90 degrés sur l'axe des abscisses: 

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);
46
répondu Cory Gross 2014-08-21 03:38:10

depuis la sortie r59, trois.js fournit ces trois fonctions pour faire pivoter un objet autour de l'axe de l'objet. 

object.rotateX(angle);
object.rotateY(angle);
object.rotateZ(angle);
45
répondu Hetong 2015-06-20 14:20:33

j'avais besoin de la fonction rotateAroundWorldAxis mais le code ci-dessus ne fonctionne pas avec la version la plus récente (r52). On dirait que getRotationFromMatrix() a été remplacé par setEulerFromRotationMatrix() 

function rotateAroundWorldAxis( object, axis, radians ) {

    var rotationMatrix = new THREE.Matrix4();

    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    rotationMatrix.multiplySelf( object.matrix );                       // pre-multiply
    object.matrix = rotationMatrix;
    object.rotation.setEulerFromRotationMatrix( object.matrix );
}
12
répondu guntrumm 2012-10-15 23:15:27

avec r55 vous devez changer

rotationMatrix.multiplySelf (objet.la matrice );

à

rotationMatrix.la multiplication( de l'objet.matrice );

9
répondu block23 2013-01-22 14:23:53

juste au cas ... dans r52 la méthode est appelée setEulerFromRotationMatrix au lieu de getRotationFromMatrix

6
répondu Leprosy 2012-11-07 21:20:29

En Trois.js R59, object.rotation.setEulerFromRotationMatrix(object.matrix); a été remplacé par object.rotation.setFromRotationMatrix(object.matrix);

3JS change si rapidement :d

6
répondu mind1n 2013-08-18 06:27:37

quelque part autour de r59 cela devient plus facile (tourner autour de x): 

bb.GraphicsEngine.prototype.calcRotation = function ( obj, rotationX)
{
    var euler = new THREE.Euler( rotationX, 0, 0, 'XYZ' );
    obj.position.applyEuler(euler);
}
3
répondu acarlon 2014-05-24 11:21:33

En Trois.js R66, c'est ce que j'utilise (version CoffeeScript): 

THREE.Object3D.prototype.rotateAroundWorldAxis = (axis, radians) ->
  rotWorldMatrix = new THREE.Matrix4()
  rotWorldMatrix.makeRotationAxis axis.normalize(), radians
  rotWorldMatrix.multiply this.matrix
  this.matrix = rotWorldMatrix
  this.rotation.setFromRotationMatrix this.matrix
2
répondu aymericbeaumet 2014-03-11 19:40:02

j'ai résolu ce problème de cette façon:

j'ai créé le module 'ObjectControls' pour ThreeJS qui vous permet de faire tourner un seul objet (ou un groupe), et non la scène.

Inclure la bibliothèque:

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

Utilisation:

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

vous pouvez trouver ici une démo live ici: https://albertopiras.github.io/threeJS-object-controls/

voici le rapport: https://github.com/albertopiras/threeJS-object-controls .

1
répondu Alberto Piras 2017-12-06 15:38:42