three.js - w jaki sposób mogę obrócić cylinder wokół określonego punktu?

Question

Dodałem następujące pytania dotyczące rotacji obiektów.

• link 1link 2link 3link 4link 5

Ale nie mógł dokładnie zrozumieć, w jaki sposób mogę obrócić cylinder wokół określonego punktu?

Answer 1

Zakładam, że masz na myśli to, że chcesz obrócić obiekt wokół określonego punktu w jego geometrii.

Na przykład cylinderGeometry obraca się wokół tego centrum. Załóżmy, że chcesz go obrócić wokół jego koniec.

Co trzeba zrobić, to przetłumaczyć geometrię cylindra zaraz po jej utworzeniu, aby żądany punkt w geometrii znajdował się teraz w punkcie początkowym.

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

EDIT: Teraz można to zrobić, zamiast:

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

Teraz, kiedy obrócić cylinder, będzie teraz obracać wokół jego końca, a nie jego środku.

Koniec, w którym się obraca, będzie również znajdować się w położeniu ustawionym dla siatki cylindra.

Oczywiście można to zrobić za pomocą dowolnej geometrii, a nie tylko cylindrów.

Answer 2

Aby dać przykład kodu do powyższego odpowiedź na 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);  

obecnie prace obrót wokół pochodzenia skokowej:

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

nadzieję, że pomoże.