Comment faire pivoter un objet 3D sur l'axe three.js?

J'ai un grand problème à propos de la rotation dans three.js
Je veux faire tourner mon cube 3D dans l'un de mes jeu.

//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) peut ê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 pivoter une Three.js Vector3 autour d'un axe?, mais il vient de laisser une Vector3 point de pivoter 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 fonctionne pas, je n'ai pas si je l'ai utilisé dans un mauvais sens ou il y a d'autres façons de faire.

alors, comment laisser la 3D cube en rotation autour de l'axe du monde???

  • Qu'est ce que @ notation?
  • '@' dans CoffeeScript signifie " ce. en JavaScript. C'est une abréviation.
InformationsquelleAutor Tony Han | 2012-06-16
  1. 48

    Voici les deux fonctions que j'utilise. Ils sont basés sur la matrice de rotation. et peut pivoter autour d'arbitraire axes. Pour faire pivoter en utilisant les axes que vous souhaitez 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);
}

    De sorte que vous devez appeler ces fonctions au sein de votre anim fonction (requestAnimFrame de rappel), résultant en une rotation de 90 degrés sur l'axe des x:

    var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);
    • Ça fonctionne, Merci!!!!!
    • Je pense qu'il serait coûteux de garder la création d'une nouvelle TROIS.Matrix4 pour chaque appel, cependant, auriez-vous la réutilisez pas si son pour chaque image de l'animation?
    • J'ai eu ces deux fonctions que quelqu'un avait posté sur github. J'ai dû le modifier pour utiliser les nouveaux noms de fonction et de ces pour la plus récente version de dev de la version de threejs. J'ai demandé moi-même. Le garbage collector se débarrasser des objets à chaque tellement souvent. J'ai vu l'utilisation de la mémoire graphique dans google Chrome, et il va en haut et en bas, où les objets sont créés et détruits, mais l'animation a l'air bien pour tout ce que j'ai utilisé jusqu'à présent.
    • Lorsque je tente de changer la fonction de la réutilisation de la même matrice je ne peux pas obtenir tout de mes démos de travail. Si quelqu'un arrive à faire tout cela sans créer de nouvelles matrices comme cela, s'il vous plaît poster jusqu'.
    • Comment puis-je l'utiliser pour faire pivoter l'avion autour de son bord?
    • obtiens de l'objet est indéfini' erreur
    • Attention avec cette méthode! Dans Three.js on devrait faire soit directement manipulation de matrice sur un Object3D (avec objet.matrixAutoUpdate = false) ou de la manipulation des propriétés comme la rotation, position, etc. three.js docs Plus rotateAroundWorldAxis ne fonctionne PAS pour les non-mise à l'échelle uniforme appliqué à l'objet.Vous devez extraire la rotation de object.matrix, se multiplient avec rotWorldMatrix et de définir les composants de object.rotation du résultat.
    • pouvez-vous poster un exemple de ce que vous décrivez ici?
    • C'est il y a quelques temps, mais le problème, c'est direct la multiplication avec la object.matrix que cette matrice est un composite de la rotation, l'échelle et de la transformer. Pour être sûr de la non-uniforme à l'échelle vous pouvez utiliser object.matrix.extractRotation(m) et de multiplier la matrice m avec rotWorldMatrix. Enfin, vous pouvez faire object.rotation.setFromRotationMatrix(m). Si vous avez matrixAutoUpdate = true le changement à la propriété de rotation va enfin être composés dans la object.matrix par ThreeJS automatiquement.

    InformationsquelleAutor Cory Gross
  2. 52

    Depuis la libération r59, three.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);
    • Merci. Ce doit être la première réponse, mos d'autres réponses sont soit obsolètes ou plus inefficace. Excellent travail!
    • Cela ne devrait pas être utilisé pour l'animation! Prises à partir de la Three.js documentation: This is typically done as a one time operation, and not during a loop Use Object3D.rotation for typical real-time mesh rotation.
    • Vous êtes de droite. Pourriez-vous donner une meilleure ou une solution efficace pour l'animation?
    • Je suis toujours à la recherche de la bonne solution moi-même.
    InformationsquelleAutor Hetong
  3. 13

    J'avais besoin de la rotateAroundWorldAxis fonction, mais le code ci-dessus ne fonctionne pas avec la dernière version (r52). Il ressemble à 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 );
}
    InformationsquelleAutor guntrumm
  4. 10

    avec r55 vous devez changer

    rotationMatrix.multiplySelf( objet.la matrice );

    pour

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

    InformationsquelleAutor block23
  5. 7

    Dans Three.js R59, object.rotation.setEulerFromRotationMatrix(object.matrix); a été modifié pour object.rotation.setFromRotationMatrix(object.matrix);

    3js est en train de changer si rapidement 😀

    InformationsquelleAutor mind1n
  6. 6

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

    InformationsquelleAutor Leprosy
  7. 3

    Quelque part autour de r59 cela devient plus facile (rotation autour de x):

    bb.GraphicsEngine.prototype.calcRotation = function ( obj, rotationX)
{
    var euler = new THREE.Euler( rotationX, 0, 0, 'XYZ' );
    obj.position.applyEuler(euler);
}
    InformationsquelleAutor acarlon
  8. 2

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

    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
    InformationsquelleAutor aymericbeaumet
  9. 1

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

    J'ai créé le "ObjectControls' module pour ThreeJS qui permet de faire pivoter un OBJET unique (ou un Groupe), et non de 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 en live ici: https://albertopiras.github.io/threeJS-object-controls/

    Ici est le repo: https://github.com/albertopiras/threeJS-object-controls.

    • Liens mourir étonnamment rapide, ce qui fera de cette réponse pour le moins utile. Pouvez-vous distiller les parties pertinentes de la solution dans le texte ou le code dans le corps de la Réponse?
    InformationsquelleAutor Alberto Piras