Quelle est la bonne façon de faire pivoter un objet autour d'un point dans three.js?
La plupart des didacticiels/questions sur three.js suggèrent que la façon de faire pivoter un objet autour d'un point à l'aide de three.js consiste à créer un objet parent à la position que vous souhaitez faire pivoter, à attacher votre objet, puis à déplacer l'enfant. Ensuite, lorsque le parent tourne, l'enfant tourne autour du point. Par exemple;
//Make a pivot
var pivot = new THREE.Object3D();
//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Add object to pivot
pivot.add(object);
//Move object away from pivot
object.position.set(new THREE.Vector3(5,0,0));
//rotate the object 90 degrees around pivot
pivot.rotation.y = Math.PI / 2;
Cela fonctionne mais c'est incroyablement limitant - si vous voulez faire pivoter un objet autour d'un point différent, vous ne pouvez pas parce qu'un objet ne peut pas avoir deux parents.
La méthode suivante qui fonctionne consiste à appliquer une matrice pivotée à la position de l'objet, par exemple;
//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Move the object
object.position.set(new THREE.Vector3(5,0,0);
//Create a matrix
var matrix = new THREE.Matrix4();
//Rotate the matrix
matrix.makeRotationY(Math.PI / 2);
//rotate the object using the matrix
object.position.applyMatrix4(matrix);
Encore une fois, cela fonctionne, mais il ne semble pas y avoir de moyen de définir le point de rotation. C'est toujours l'origine du monde.
Une autre option est une méthode utilitaire dans sceneUtils pour détacher un enfant d'un objet parent et une autre méthode pour attacher un nouveau parent, mais la documentation pour cela met en garde contre son utilisation, et elle n'est jamais utilisée dans aucun exemple de code.
En fin de compte, je veux pouvoir faire suivre à un cube un chemin en forme de S, mais sans cette chose (apparemment) basique, je trouve cela plutôt difficile.
tl; dr Je veux faire pivoter un objet three.js autour d'une série de points différents. Quelle serait une bonne façon d'aborder cela?
Cette réponse pourrait aider: Trois points de pivot JS
Il existe plusieurs façons d'aborder ce problème. Comme vous l'avez mentionné, vous POUVEZ permuter le point de pivot dans l'approche parentale, mais c'est beaucoup de travail, de convertir la position de l'objet vers/depuis les différents systèmes de coordonnées.
Au lieu de cela, vous pouvez toujours le voir de cette façon (pseudo-code):
Déplacer l'objet vers le point de pivot
1.1. SOUSTRAIRE le point de pivot de la position d'origine de votre objet
Appliquez votre rotation
Déplacer l'objet vers l'arrière par le même vecteur de position
1.1. AJOUTER le point de pivot à la nouvelle position de votre objet
Remarque: Tout est en coordonnées universelles, vous devrez donc peut-être effectuer une conversion appropriée.
Cela fonctionne mais c'est incroyablement limitant - si vous voulez faire pivoter un objet autour d'un point différent, vous ne pouvez pas parce qu'un objet ne peut pas avoir deux parents.
c'est vrai, mais je me demande ce que vous attendez comme comportement par défaut d'avoir 2 parents. Vous pouvez imbriquer des choses - c'est-à-dire qu'un appareil photo tenu par une femme dans une voiture a 2 niveaux de responsabilités parentales: Appareil photo-> Femme-> Voiture. Mais si à la place vous vouliez une relation parentale parallèle (?), Disons que la femme tient l'appareil photo, mais vous voulez qu'un homme tienne également l'appareil photo en même temps. Comment faire pour que l'homme se retourne et filme quelque chose sans le prendre à la femme ou vice versa? L'idée de plusieurs parents s'effondre lorsque vous essayez d'imaginer ce qui se passe par défaut. La femme bouge-t-elle avec la caméra? alors la caméra n'est-elle pas réellement son parent dans ce scénario?
Vous pouvez toujours détacher l'objet puis l'attacher à un autre si vous souhaitez changer de parent. Il vous met en garde contre le détachement manuel car l'objet passera de l'espace local à son parent dans l'espace mondial/l'espace local de son nouveau parent.
Heureusement, il y a des choses dans la scène que les utils signifient exactement pour cela: à savoir attacher et détacher . Ainsi, lorsque vous souhaitez remettre un objet sans passer des coordonnées locales aux coordonnées mondiales et le téléporter dans des endroits étranges, vous pouvez utiliser les fonctions d'attachement/détachement.
Gardez à l'esprit que cela fera des choses étranges à moins que newParent ne soit exactement au même endroit que le parent précédent au moment du transfert, car nous ne garantissons rien sur la relation de notre objet au parent, sinon qu'il restera le même au moment du transfert . 