Three.js: Drehe einen Würfel um seine Kante.

Erstellt am 5. Feb. 2012 · 5Kommentare · Quelle: mrdoob/three.js

Hallo allerseits!

Ich habe bereits nach Rotationen um eine beliebige Achse gefragt und klare Antworten in # 1219 und # 1220 erhalten.

Es ist jedoch immer noch unklar, wie ein Würfel um eine seiner Kanten gedreht werden soll (könnte jemand einen solchen Code freigeben, falls vorhanden).

In # 1219 wurden zwei Funktionen veröffentlicht:

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

und

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

Sie ermöglichen es mir, einen Würfel um eine beliebige Achse zu drehen, die durch die Mitte des Begrenzungsrahmens verläuft.

Was ich brauche, ist ein Objekt um eine beliebige Achse zu drehen, die nicht unbedingt durch die Mitte des Objekts verläuft.

Wie mache ich das richtig?

Entschuldigung, wenn ich etwas nervig bin, aber eine solche Funktionalität implementieren möchte.

Vielen Dank.

PS Es scheint, dass ich eine Funktion brauche, die aussieht wie:

Funktion rotateAroundArbitraryAxis (Objekt, axisDirection, axisBasePoint, Bogenmaß) {..}

Mit axisBasePoint meine ich den Punkt, durch den die angegebene Achse verläuft.

Ich habe im Internet gelesen, dass eine solche Rotation in mehreren Schritten erfolgen sollte:

Verschieben Sie den Raum so, dass die Rotationsachse durch den Ursprung verläuft.
Drehen Sie den Raum um die Z-Achse, sodass die Rotationsachse in der XZ-Ebene liegt.
Drehen Sie den Raum um die Y-Achse, sodass die Rotationsachse entlang der Z-Achse liegt.
Führen Sie die gewünschte Drehung durch Theta um die z-Achse durch.
Wenden Sie die Umkehrung von Schritt (3) an.
Wenden Sie die Umkehrung von Schritt (2) an.
Wenden Sie die Umkehrung von Schritt (1) an.

Verstehe ich es richtig

Wie führe ich eine solche Operation mit three.js durch?

Ich habe versucht, verschiedene (Translations- / Rotations-) Matrizen in three.js miteinander zu multiplizieren, habe aber nicht das gewünschte Ergebnis erzielt :-(

Danke vielmals.

Question

Quelle

ghost

Hilfreichster Kommentar

Was ist mit so etwas?

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 am 6. Feb. 2012

👍3

Alle 5 Kommentare

Was ist mit so etwas?

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 am 6. Feb. 2012

👍3

Danke für die Antwort.

Leider dreht sich der Würfel in Ihrem Beispiel immer noch um seine lokale Achse, die durch seine Mitte verläuft, egal wie ich es nenne:

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

oder

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

Was ich wirklich herausfinden möchte, ist, wie man die Rotationsachse eines bestimmten Objekts verschiebt.

Danke vielmals.

ghost am 6. Feb. 2012

Haben Sie versucht, den Dummy / Container anstelle des Würfels zu drehen?

oosmoxiecode am 6. Feb. 2012

Guter Punkt. Es funktioniert so.

Aber warum ist es nicht so einfach :-)?

Ich denke, es sollte eine Matrizenarithmetik sein, die die Funktion verwendet, die ich in meinem ersten Beitrag vorgeschlagen habe, oder etwas Bequemeres.

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

Mit axisBasePoint meine ich den Punkt, durch den die angegebene Achse verläuft.

Mit freundlichen Grüßen.

ghost am 6. Feb. 2012

@oosmoxiecode Uops! Ja, das habe ich auf meinem Snippet vergessen.

@Landlord Nun, es ist einfach für mich. Es erfordert nicht einmal Matrizenwissen;) Ich denke, es geht nur darum, anders zu denken ... In beiden Fällen finden intern dieselben Matrixberechnungen statt.

mrdoob am 6. Feb. 2012

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Three.js: Drehe einen Würfel um seine Kante.

Hilfreichster Kommentar

Alle 5 Kommentare

Verwandte Themen