three.js - 如何繞特定點旋轉圓柱？

Question

我已經提到了以下對象旋轉的問題。

• link 1link 2link 3link 4link 5

但不能準確理解我怎麼繞特定時間點的缸？

Answer 1

我假設你的意思是你想要一個物體圍繞其幾何形狀內的特定點旋轉。

例如，cylinderGeometry圍繞其旋轉中心。假設您希望它圍繞其端旋轉。

您需要做的是在創建圓柱體後立即轉換圓柱體幾何圖形，以便幾何體內的所需點現在位於原點。

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; 

希望有所幫助。