Faire tourner un objet correctement autour d'un point de pivot, selon un axe et un angle donnés.

Question

Dans Three.js, il semble qu'il y ait plusieurs façons de faire une rotation, ce que je ne trouve pas très intuitif. Voir par exemple l'exemple
http://cloud.engineering-bear.com/apps/robot/robot.html

J'obtiens des effets inattendus très étranges lorsque j'applique une rotation à plusieurs objets. Par exemple, lorsque je fais tourner des objets qui ont été ajoutés les uns aux autres et que je commence à faire tourner le parent, les objets individuels sont soudainement placés différemment les uns par rapport aux autres. J'expérimente maintenant le regroupement et j'aimerais éviter le même effet.

Véase http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json pour l'état actuel des choses et https://github.com/BITPlan/PI-Q-Robot pour le code source.

J'ai donc cherché des exemples appropriés en suivant les différentes options de l'API :

rotation

function renderScene() {
    stats.update();
    //side1.rotation.z += 0.02;
    pivot.rotation.z += 0.02;

• https://jsfiddle.net/of1vfhzz/1/
• https://github.com/mrdoob/three.js/issues/1958

rotateOnAxis

• three.js fait tourner Object3d autour de l'axe Y en son centre
• Comment faire pivoter un objet 3D sur l'axe three.js ?
• ThreeJS - rotation autour de l'axe propre de l'objet

rotateAroundWorldAxis

   object.rotateAroundWorldAxis(p, ax, r * Math.PI * 2 / frames);

• Comment faire pivoter un objet sur l'axe world three.js ?
• https://stackoverflow.com/a/32038265/1497139
• https://jsfiddle.net/b4wqxkjn/7/
• THREE.js Mise à jour de la propriété de rotation de l'objet après rotateOnWorldAxis

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

• Rotation autour de l'axe mondial

rotateAboutPoint

• Trois points de pivot JS
• Point d'ancrage de la rotation dans Three.js

setRotationFromAxisAngle

• https://threejs.org/docs/#api/en/core/Object3D.setRotationFromAxisAngle

setEulerFromQuaternion

   quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );
   object.rotation.setEulerFromQuaternion( quaternion );

• Three.js - Faire tourner une sphère autour d'un certain axe

applyMatrix

this.mesh.updateMatrixWorld(); // important !
childPart.mesh.applyMatrix(new THREE.Matrix4().getInverse(this.mesh.matrixWorld))

• L'application d'une matrice dans Three.js ne répond pas à mes attentes

J'aime le jsFiddle pour https://stackoverflow.com/a/56427636/1497139

  var pivot = new THREE.Object3D();
  pivot.add( cube );
  scene.add( pivot );

J'ai également trouvé les discussions suivantes question du pivot dans discourcee.three.js.org

• https://discourse.threejs.org/t/rotate-group-around-pivot/3656
• https://discourse.threejs.org/t/how-to-rotate-an-object-around-a-pivot-point/6838
• https://discourse.threejs.org/t/set-dynamically-generated-groups-pivot-position-to-the-center-of-its-children-objects-position/6349
• https://discourse.threejs.org/t/my-3d-model-is-not-rotating-around-its-origin/3339/3
  • https://jsfiddle.net/blackstrings/c0o3Lm45/
• https://discourse.threejs.org/t/rotate-object-at-end-point/2190
  • https://jsfiddle.net/f2Lommf5/3594/

Questions Aucune des informations ci-dessus n'est suffisamment claire pour aller à l'essentiel du problème à résoudre. Les graphiques ci-dessus exposent le problème de manière beaucoup plus claire que les propositions de solution.

a) J'aimerais utiliser le cylindre comme axe, même lorsque le cylindre est déplacé, et je pense que le moyen le plus simple serait d'utiliser rotateAroundWorldAxis -. Est-ce que c'est disponible dans la dernière révision de three.js ou dois-je l'ajouter à partir d'un fichier par exemple ? https://stackoverflow.com/a/32038265/1497139 ?

b) J'aimerais obtenir une chaîne d'objets à faire pivoter pour ensuite appliquer la cinématique inverse comme dans le cas suivant

• https://github.com/jsantell/THREE.IK
• https://jsantell.github.io/THREE.IK/

Bien que j'aie examiné le code source de cette solution, je n'arrive pas à trouver l'endroit où le positionnement et la rotation parent-enfant se produisent. Quelles sont les lignes de code / fonctions API pertinentes qui permettraient une rotation correcte autour d'une chaîne d'articulations ? J'ai déjà regardé dans l'API Bone/Skeleton de Three.js mais j'ai eu le même problème - beaucoup de lignes de code mais aucun point clair où la rotation/le positionnement entre l'enfant et le parent se produit.

Answer 1

Question a)

En gros, cela fonctionne comme prévu :

    cylinder.position.set( options.x, 15, options.z );
    pivot.position.x=options.x;
    pivot.position.z=options.z;

voir https://jsfiddle.net/wf_bitplan_com/4f6ebs90/13/

Question b)

voir https://codepen.io/seppl2019/pen/zgJVKM

La clé est de définir les positions correctement. Au lieu de la proposition à https://stackoverflow.com/a/43837053/1497139 la taille est calculée dans ce cas.

// create the pivot to rotate around/about
this.pivot = new THREE.Group();
this.pivot.add(this.mesh);
// shift the pivot position to fit my size + the size of the joint
this.pivot.position.set(
      x,
      y + this.size.y / 2 + this.pivotr,
      z + this.size.z / 2
);
// reposition the mesh accordingly
this.mesh.position.set(0, this.size.y / 2, 0);