three.js - ¿cómo giro un cilindro alrededor de un punto específico?

Question

He referido las siguientes preguntas para la rotación de objetos.

• link 1link 2link 3link 4link 5

Pero no podía entender exactamente cómo puedo rotar un cilindro alrededor de un punto específico?

Answer 1

Supongo que lo que quieres decir es que quieres que un objeto gire alrededor de un punto específico dentro de su geometría. Por ejemplo, cylinderGeometry gira alrededor de centro. Supongamos que desea rotar alrededor de su final.

Lo que debe hacer es traducir la geometría del cilindro inmediatamente después de haberla creado, de modo que el punto deseado dentro de la geometría esté ahora en el origen.

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

EDIT: Ahora puede hacer esto, en su lugar:

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

Ahora, cuando se gira el cilindro, y pasará a girar alrededor de su extremo, en lugar de su medio.

El extremo que gira alrededor también estará ubicado en la posición que ha configurado para la malla del cilindro.

Obviamente, puede hacer esto con cualquier geometría, no solo con cilindros.

Answer 2

Para dar un ejemplo de código de la respuesta anterior de 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);  

ahora las obras de rotación alrededor del origen del cilindro:

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

Espero que ayude.