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

Question

オブジェクトの回転に関する次の質問を参照しました。

• link 1link 2link 3link 4link 5

しかし、私は特定のポイントを中心にシリンダーを回転させない方法を正確に理解できませんでしたか？

Answer 1

私は、あなたが意味することは、そのオブジェクト内の特定の点を回転させたいということです。です。

たとえば、cylinderGeometryは、の中心を中心に回転します。 エンドの周りを回転させたいとします。

シリンダージオメトリを作成した直後に変換して、ジオメトリ内の希望するポイントが原点に来るようにするだけです。

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

EDIT：あなたは今の代わりに、これを行うことができます。

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

を今、あなたはシリンダーを回転させたときに、それは今ではなく、その真ん中よりも、その先端を中心に回転します。

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

もちろん、シリンダーだけでなく、どのようなジオメトリでも実行できます。 WestLangleyの上記の回答のためのコード例を与えることを

Answer 2

：

// 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; 

お役に立てば幸いです。