Three.js: Faites pivoter un cube autour de son bord.

Créé le 5 févr. 2012 · 5Commentaires · Source: mrdoob/three.js

Salut tout le monde!

Je posais déjà des questions sur les rotations autour d'un axe arbitraire et j'ai obtenu des réponses claires dans les numéros 1219 et 1220.

Mais on ne sait toujours pas comment faire pivoter un cube autour de l'un de ses bords (quelqu'un pourrait-il partager un tel code s'il existe).

Deux fonctions ont été publiées dans le # 1219:

function rotateAroundObjectAxis( object, axis, radians ) { .. }

function rotateAroundWorldAxis( object, axis, radians ) { .. }

Ils me permettent de faire pivoter un cube autour d'un axe arbitraire qui passe par le centre de sa boîte englobante.

Ce dont j'ai besoin, c'est de faire pivoter un objet autour d'un axe arbitraire qui ne passe pas nécessairement par le centre de l'objet.

Comment faire ça correctement?

Désolé, si je suis un peu ennuyeux à ce sujet mais que je veux implémenter une telle fonctionnalité.

Merci.

PS Il semble que j'ai besoin d'une fonction qui ressemble à:

function rotateAroundArbitraryAxis (objet, axisDirection, axisBasePoint, radians) {..}

par axisBasePoint Je veux dire le point par lequel passe l'axe spécifié.

J'ai lu sur Internet qu'une telle rotation devait se faire en plusieurs étapes:

translater l'espace de sorte que l'axe de rotation passe par l'origine.
faire pivoter l'espace autour de l'axe Z de sorte que l'axe de rotation se trouve dans le plan XZ.
faire pivoter l'espace autour de l'axe Y de sorte que l'axe de rotation se trouve le long de l'axe Z.
effectuez la rotation souhaitée par Theta autour de l'axe z.
appliquez l'inverse de l'étape (3).
appliquez l'inverse de l'étape (2).
appliquez l'inverse de l'étape (1).

Est-ce que je comprends bien?

Comment effectuer une telle opération avec three.js?

J'ai essayé de multiplier différentes matrices (translation / rotation) les unes avec les autres en three.js mais je n'ai pas obtenu le résultat souhaité :-(

Merci beaucoup.

Question

Source

ghost

Commentaire le plus utile

Et quelque chose comme ça?

var dummy = new THREE.Object3D();
dummy.position.x = 50;
dummy.position.z = 50;
scene.add( dummy );

var cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial() );
cube.position.x = - 50;
cube.position.z = - 50;
dummy.add( cube );

mrdoob le 6 févr. 2012

👍3

Tous les 5 commentaires

Et quelque chose comme ça?

var dummy = new THREE.Object3D();
dummy.position.x = 50;
dummy.position.z = 50;
scene.add( dummy );

var cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial() );
cube.position.x = - 50;
cube.position.z = - 50;
dummy.add( cube );

mrdoob le 6 févr. 2012

👍3

Merci pour la réponse.

Malheureusement, le cube de votre exemple tourne toujours autour de son axe local qui passe par son centre, peu importe ce que j'appelle:

function rotateAroundObjectAxis( object, axis, radians ) { .. }

function rotateAroundWorldAxis( object, axis, radians ) { .. }

Ce que je veux vraiment comprendre, c'est comment déplacer l'axe de rotation d'un objet particulier.

Merci beaucoup.

ghost le 6 févr. 2012

Avez-vous essayé de faire pivoter le mannequin / conteneur au lieu du cube?

oosmoxiecode le 6 févr. 2012

Bon point. Cela fonctionne de cette façon.

Mais pourquoi ce n'est pas si strict :-)?

Je pense qu'il devrait s'agir de certaines matrices arithmétiques utilisant la fonction que j'ai suggérée dans mon message initial ou quelque chose de plus pratique.

function rotateAroundArbitraryAxis( object, axisDirection, axisBasePoint, radians ) { .. }

par axisBasePoint Je veux dire le point par lequel passe l'axe spécifié.

Cordialement.

ghost le 6 févr. 2012

@oosmoxiecode Uops! Ouais, j'ai oublié ça sur mon extrait.

@Landlord Eh bien, c'est simple pour moi. Cela ne nécessite même pas la connaissance des matrices;) Je suppose que c'est juste une question de penser différemment ... Quoi qu'il en soit, en interne, les mêmes calculs matriciels se produisent.

mrdoob le 6 févr. 2012

Cette page vous a été utile?

0 / 5 - 0 notes