three.js - three.js - 特定の点を中心に円柱を回転させるにはどうすればよいですか?

Question

オブジェクトの回転については、次の質問を参照しました。

• リンク 1 リンク 2 リンク 3 リンク 4 リンク 5

しかし、特定の点を中心に円柱を回転させる方法を正確に理解できませんでしたか?

Answer 1

オブジェクトをそのジオメトリ内の特定の点を中心に回転させたいということだと思います。

たとえば、 はその中心を中心cylinderGeometryに回転します。endを中心に回転させたいとします。

行う必要があるのは、円柱ジオメトリを作成した直後に変換して、ジオメトリ内の目的のポイントが原点になるようにすることです。

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cylinderHeight/2, 0 ) );

編集:代わりに、これを行うことができます:

geometry.translate( 0, cylinderHeight/2, 0 ); // three.js r.72

円柱を回転させると、円柱の中心ではなく、円柱の端を中心に回転するようになりました。

回転している端も、円柱メッシュに設定した位置に配置されます。

明らかに、円柱だけでなく、任意のジオメトリでこれを行うことができます。

Answer 2

上記の WestLangley の回答のコード例を示すには:

// CYLINDER
var cyl_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cyl_width = 1;
var cyl_height = 5;
// THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight, openEnded )
var cylGeometry = new THREE.CylinderGeometry(cyl_width, cyl_width, cyl_height, 20, 1, false);
// translate the cylinder geometry so that the desired point within the geometry is now at the origin
cylGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cyl_height/2, 0 ) );
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);

scene.add( cylinder );    

これで、円柱の原点を中心に回転が機能します。

cylinder.rotation.x = 0.5*Math.PI;

それが役立つことを願っています。