Ruota l’object su un asse specifico ovunque in Three.js – incluso all’esterno della mesh

Cercando di ruotare un object attorno a qualsiasi asse.

Ad esempio come una cerniera della porta (sul bordo dell’object) o un pianeta attorno al sole (al di fuori dell’object).

Il problema sembra essere la definizione dell’asse. Il sottostante vettore unitario risulta in asse rimanente sull’origine dell’object (al centro) quindi identico alla rotazione standard:

object2.rotateOnAxis(new THREE.Vector3(1,0,0), 0.01); // same as object1.rotation.x += 0.01; 

Vedi esempio di codice: JSFiddle

MODIFICA: cercare un modo per ruotare attorno a un pivot senza usare bambini nidificati. La rotazione del genitore di un bambino fornisce un modo semplice per manipolare il punto di pivot del bambino, ma la modifica del punto di articolazione non è praticabile.

Esempio di seguito, se si desidera ruotare il cubo in un movimento di figura 8, sarebbe ansible con questo metodo modificando il genitore. Ma si dovrebbe assicurare che la posizione e l’orientamento del nuovo genitore siano precisamente configurati per far sì che il bambino salti senza ostacoli tra i genitori, e movimenti complessi che non si ripetano o si ripetano sarebbero molto complicati. Invece, mi piacerebbe (e io parafrasando il titolo della domanda) ruotare un object su un asse specifico senza utilizzare l’annidamento di oggetti in qualsiasi punto della scena, anche al di fuori della mesh dell’object.

Vedi esempio di codice: JSFiddle con pivot

Se si desidera ruotare un object attorno a una linea arbitraria nello spazio del mondo, è ansible utilizzare il seguente metodo. La linea è specificata da un point 3D e un vettore di direzione ( axis ).

 THREE.Object3D.prototype.rotateAroundWorldAxis = function() { // rotate object around axis in world space (the axis passes through point) // axis is assumed to be normalized // assumes object does not have a rotated parent var q = new THREE.Quaternion(); return function rotateAroundWorldAxis( point, axis, angle ) { q.setFromAxisAngle( axis, angle ); this.applyQuaternion( q ); this.position.sub( point ); this.position.applyQuaternion( q ); this.position.add( point ); return this; } }(); 

three.js r.85