Three.js: Gire um cubo em torno de sua borda.

Criado em 5 fev. 2012 · 5Comentários · Fonte: mrdoob/three.js

Oi pessoal!

Eu já estava perguntando sobre rotações em torno de um eixo arbitrário e obtive respostas claras postadas em # 1219 e # 1220.

Mas ainda não está claro como girar um cubo em torno de uma de suas bordas (alguém poderia compartilhar esse código, se ele existir).

Foram postadas duas funções em # 1219:

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

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

Eles me permitem girar um cubo em torno de um eixo arbitrário que passa pelo centro de sua caixa delimitadora.

O que eu preciso é girar um objeto em torno de um eixo arbitrário que não passa necessariamente pelo centro do objeto.

Como fazer isso corretamente?

Desculpe, se eu sou um pouco chato sobre isso, mas quero implementar essa funcionalidade.

Obrigado.

PS Parece que preciso de uma função parecida com:

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

por axisBasePoint, quero dizer o ponto pelo qual o eixo especificado passa.

Li na Internet que essa rotação deve ser feita em várias etapas:

translade o espaço para que o eixo de rotação passe pela origem.
gire o espaço em torno do eixo Z para que o eixo de rotação fique no plano XZ.
gire o espaço em torno do eixo Y para que o eixo de rotação fique ao longo do eixo Z.
execute a rotação desejada por Theta em torno do eixo z.
aplique o inverso do passo (3).
aplique o inverso do passo (2).
aplique o inverso do passo (1).

Eu entendi corretamente?

Como realizar essa operação com three.js?

Tentei multiplicar matrizes diferentes (translação / rotação) entre si em three.js, mas não obtive o resultado desejado :-(

Muito Obrigado.

Question

Fonte

ghost

Comentários muito úteis

Que tal algo assim?

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 em 6 fev. 2012

👍3

Todos 5 comentários

Que tal algo assim?

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 em 6 fev. 2012

👍3

Obrigado pela resposta.

Infelizmente, o cubo em seu exemplo ainda gira em torno de seu eixo local que passa pelo centro, não importa o que eu chame de:

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

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

O que eu realmente quero descobrir é como mudar o eixo de rotação de um objeto específico.

Muito Obrigado.

ghost em 6 fev. 2012

Você tentou girar o manequim / recipiente em vez do cubo?

oosmoxiecode em 6 fev. 2012

Bom ponto. Funciona assim.

Mas por que não é tão direto :-)?

Eu acho que deve ser alguma aritmética de matrizes usando a função que sugeri em meu post inicial ou algo mais conveniente.

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

por axisBasePoint, quero dizer o ponto pelo qual o eixo especificado passa.

Com os melhores cumprimentos.

ghost em 6 fev. 2012

@oosmoxiecode Uops! Sim, esqueci isso no meu trecho.

@Landlord Bem, é direto para mim. Nem requer conhecimento de matrizes;) Acho que é só uma questão de pensar diferente ... De qualquer forma, internamente, os mesmos cálculos de matrizes estão acontecendo.

mrdoob em 6 fev. 2012

Esta página foi útil?

0 / 5 - 0 avaliações