Three.js: Gire un cubo alrededor de su borde.

Creado en 5 feb. 2012 · 5Comentarios · Fuente: mrdoob/three.js

¡Hola a todos!

Ya estaba preguntando acerca de las rotaciones alrededor de un eje arbitrario y obtuve respuestas claras publicadas en # 1219 y # 1220.

Pero aún no está claro cómo rotar un cubo alrededor de uno de sus bordes (¿alguien podría compartir ese código si existe)?

Se publicaron dos funciones en el # 1219:

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

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

Me permiten rotar un cubo sobre un eje arbitrario que pasa por el centro de su cuadro delimitador.

Lo que necesito es rotar un objeto alrededor de un eje arbitrario que no necesariamente pasa por el centro del objeto.

¿Cómo hacerlo correctamente?

Lo siento, si estoy un poco molesto por eso, pero quiero implementar esa funcionalidad.

Gracias.

PD Parece que necesito una función que se parezca a:

función rotateAroundArbitraryAxis (objeto, ejeDirección, ejeBasePoint, radianes) {..}

por axisBasePoint me refiero al punto por el que pasa el eje especificado.

Leí en Internet que dicha rotación debe realizarse en varios pasos:

traslade el espacio para que el eje de rotación pase por el origen.
gire el espacio sobre el eje Z de modo que el eje de rotación se encuentre en el plano XZ.
gire el espacio sobre el eje Y de modo que el eje de rotación se encuentre a lo largo del eje Z.
Realice la rotación deseada por Theta sobre el eje z.
aplique la inversa del paso (3).
aplique la inversa del paso (2).
aplique la inversa del paso (1).

¿Lo entiendo correctamente?

¿Cómo realizar una operación de este tipo con three.js?

Intenté multiplicar matrices diferentes (traducción / rotación) entre sí en three.js pero no obtuve el resultado deseado :-(

Muchas gracias.

Question

Fuente

ghost

Comentario más útil

¿Qué pasa con algo como esto?

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 en 6 feb. 2012

👍3

Todos 5 comentarios

¿Qué pasa con algo como esto?

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 en 6 feb. 2012

👍3

Gracias por la respuesta.

Desafortunadamente, el cubo en su ejemplo aún gira alrededor de su eje local que atraviesa su centro sin importar lo que llame:

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

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

Lo que realmente quiero averiguar es cómo cambiar el eje de rotación de un objeto en particular.

Muchas gracias.

ghost en 6 feb. 2012

¿Intentaste rotar el maniquí / contenedor en lugar del cubo?

oosmoxiecode en 6 feb. 2012

Buen punto. Funciona de esta manera.

Pero, ¿por qué no es tan sencillo :-)?

Pensé que debería ser aritmética de matrices usando la función que sugerí en mi publicación inicial o algo más conveniente.

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

por axisBasePoint me refiero al punto por el que pasa el eje especificado.

Atentamente.

ghost en 6 feb. 2012

@oosmoxiecode ¡Ups! Sí, lo olvidé en mi fragmento.

@Landlord Bueno, es sencillo para mí. Ni siquiera requiere conocimiento de matrices;) Supongo que es solo una cuestión de pensar de manera diferente ... De cualquier manera, internamente, están sucediendo los mismos cálculos de matrices.

mrdoob en 6 feb. 2012

¿Fue útil esta página

0 / 5 - 0 calificaciones