Comment faire pour faire pivoter Object3d autour de l'axe X, Y et Z sans avoir les axes à retourner ou provoquer le verrouillage de cardan?

Question

Probablement la question de rotation de troisjs pas 9000, je veux simplement avoir 3 boutons d'interface utilisateur pour faire pivoter un objet de 90 degrés dans chaque direction x, y & z avec chaque clic sur chaque, comment cela pourrait-il être difficile?

L'utilisation de méthodes de rotation régulières qui utilisent euler provoquera un blocage du cardan, et en utilisant des quan- térités, les axes se retourneront de manière aléatoire dans lesquels l'axe z sera à un point ou à un autre.

s'il vous plaît jeter un oeil à ma démo de travail: http://grutex.com/webgl/demos/help/

Edit: voici les fonctions de rotation partie:

 function z_rotate(){ 

     var startAngle = 0; 
     var start = {angle: startAngle}; 
     var end = {angle: startAngle + 90}; 
     var lastAngle=0;         
     var tween = new TWEEN.Tween(start) 
      .to(end, 400) 
      .easing(TWEEN.Easing.Quadratic.Out) 
      .onUpdate(function(){ 
       startAngle=this.angle;  
       my_object.rotateOnAxis(new THREE.Vector3(0,0,1),degreeToRadians(startAngle-lastAngle)); 
       lastAngle=startAngle;      
      }) 
      .start(); 


    } 

    function x_rotate(){ 

     var startAngle = 0; 
     var start = {angle: startAngle}; 
     var end = {angle: startAngle + 90}; 
     var lastAngle=0;         
     var tween = new TWEEN.Tween(start) 
      .to(end, 400) 
      .easing(TWEEN.Easing.Quadratic.Out) 
      .onUpdate(function(){ 
       startAngle=this.angle; 
       my_object.rotateOnAxis(new THREE.Vector3(1,0,0),degreeToRadians(startAngle-lastAngle)); 
       lastAngle=startAngle;      
      }) 
      .start(); 
    } 

    function y_rotate(){ 
     var startAngle = 0; 
     var start = {angle: startAngle}; 
     var end = {angle: startAngle + 90}; 
     var lastAngle=0;         
     var tween = new TWEEN.Tween(start) 
      .to(end, 400) 
      .easing(TWEEN.Easing.Quadratic.Out) 
      .onUpdate(function(){ 
       startAngle=this.angle; 
       my_object.rotateOnAxis(new THREE.Vector3(0,1,0),degreeToRadians(startAngle-lastAngle)); 
       lastAngle=startAngle;      
      }) 
      .start(); 

    } 

Answer 1

Comme @WestLangley a souligné, j'attacher et détacher l'objet 3D à un point de pivot parent (THREE.Object3D), attachant l'objet 3d au point de pivotement avant le début de l'interpolation et détache le point de pivot après l'achèvement de l'interpolation et réinitialise sa rotation à (0,0,0)

@WestLangley answer: Three.js: Adding and Removing Children of Rotated Objects

Nouvelle fonction modifiée de rotation:

var axis_x = new THREE.Vector3(1, 0, 0).normalize(); 

    function x_rotate(){ 
     pivot_attach(); 
     var startAngle = 0; 
     var start = {angle: degreeToRadians(startAngle)}; 
     var end = {angle: degreeToRadians(startAngle + 90)}; 
     var lastAngle=0;         
     var tween = new TWEEN.Tween(start) 
      .to(end, 400) 
      .easing(TWEEN.Easing.Quadratic.Out) 
      .onUpdate(function(){ 
       startAngle=this.angle; 
      pivot.rotateOnAxis(axis_x,startAngle-lastAngle); 
       lastAngle=startAngle;      
      }) 
      .start().onComplete(pivot_detach); 
    } 

function pivot_attach() { 

    pivot.updateMatrixWorld(); 
    THREE.SceneUtils.attach(my_object, scene, pivot); 

} 

function pivot_detach() { 

    pivot.updateMatrixWorld(); 
    my_object.updateMatrixWorld(); // if not done by the renderer 

    THREE.SceneUtils.detach(my_object, pivot, scene); 
    pivot.rotation.set(0, 0, 0); 

} 

et ne pas oublier d'ajouter le pivot à la scène "scene.add (pivot);"