32

この写真は私の問題を最もよく説明していると思います：

目の錯覚のためのやったー

まず、赤い線に沿ってボックスを翻訳します。次に、回転の効果をの青い線にしたいのですが、a実際に起こっているのは、の青い線のようなものbです。回転の変更は常に元のオブジェクト空間に対して相対的であるように感じますが、平行移動（最初に行われるにもかかわらず）は常に親に対して相対的であり、オブジェクト空間に関連するジオメトリポイントには実際には影響しません。ご迷惑をおかけしましたことをお詫び申し上げます。明らかに私はこれが初めてです。

この効果を生み出すコードの重要な部分は以下のとおりです。画像の向きは、このコードが生成するものとは異なることに注意してください。画像は効果を明確に示すための単なる例です。

var objectContainer = new THREE.Object3D();

var tubeRadius = 100;
var tubeGeometry = new THREE.CylinderGeometry(tubeRadius, tubeRadius, tubeRadius * 3, 36, 1, false);
var tube = new THREE.Mesh(tubeGeomtry, material);
scene.add( tube );

var boxes = new THREE.Object3D();
var boxEdge = 50;
var boxGeometry = new THREE.CubeGeometry(boxEdge, boxEdge, boxEdge);
var box1 = new THREE.Mesh( boxGeometry, material );
box1.translateX(tubeRadius + boxEdge / 2 + 5);
box1.translateY(boxEdge / 2);
box1.rotation = new THREE.Vector3(0, 2*Math.PI/3*0, 0);
boxes.add(box1);
var box2 = box1.clone();
box2.rotation = new THREE.Vector3(0, 2*Math.PI/3*1, 0);
boxes.add(box2);
var box3 = box1.clone();
box3.rotation = new THREE.Vector3(0, 2*Math.PI/3*2, 0);
boxes.add(box3);
scene.add( boxes );

私が考えることができる唯一の解決策は、各ボックスを別のオブジェクトスペースでラップし、それを中心に回転させることですが、それは過度の作業のようです。私が探している結果を達成するための好ましい方法は何ですか？

4

2 に答える 2

34

やりたいことをする方法はいくつかありますが、最も簡単なのは次のようなものだと思います。

// parent
parent = new THREE.Object3D();
scene.add( parent );

// pivots
var pivot1 = new THREE.Object3D();
var pivot2 = new THREE.Object3D();
var pivot3 = new THREE.Object3D();

pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * Math.PI / 3;
pivot3.rotation.z = 4 * Math.PI / 3;

parent.add( pivot1 );
parent.add( pivot2 );
parent.add( pivot3 );

// mesh
var mesh1 = new THREE.Mesh( geometry, material );
var mesh2 = new THREE.Mesh( geometry, material );
var mesh3 = new THREE.Mesh( geometry, material );

mesh1.position.y = 5;
mesh2.position.y = 5;
mesh3.position.y = 5;

pivot1.add( mesh1 );
pivot2.add( mesh2 );
pivot3.add( mesh3 );

次に、レンダー ループで次のようにします。

parent.rotation.z += 0.01;

編集: 更新されたフィドル: https://jsfiddle.net/edqf7ugc/

three.js r.116

于 2013-03-05T04:41:29.887 に答える
6

内部オブジェクトが回転する点を中心とする複合オブジェクトを作成することは、1 つの明白な答えであり、非常に迅速に作成できます。を作成しObject3Dてボックスを追加するだけです。

同様のアプローチがこの質問でカバーされています。オブジェクトの頂点のポイントをシフトするため、効果的に新しい中心があります。

または、手動で行列をいじることもできます。これを試して：

var boxGeometry = new THREE.CubeGeometry(boxEdge, boxEdge, boxEdge);
var mr = new THREE.Matrix4();
var mt = new THREE.Matrix4();
mt.setPosition(new THREE.Vector3(0,tubeRadius,0));
var box1 = new THREE.Mesh( boxGeometry, material );
box1.applyMatrix(mt);
var box2 = box1.clone();
mr.makeRotationZ(2 * Math.PI /3);
box2.applyMatrix(mr);
boxes.add(box2);
var box3 = box1.clone();
mr.makeRotationZ(4 * Math.PI /3);
box3.applyMatrix(mr);
boxes.add(box3);
boxes.add(box1);
scene.add( boxes );
于 2013-03-05T02:19:13.290 に答える