три.js-как вращать цилиндр вокруг определенной точки?

Я сослался на следующие вопросы для вращения объекта.

но не мог понять, как именно вращать цилиндр вокруг определенной точки ?

2 ответов


Я предполагаю, что вы имеете в виду, что вы хотите, чтобы объект вращался вокруг определенной точки внутри это геометрия.

например,cylinderGeometry вращается вокруг это центр. Предположим, вы хотите, чтобы он вращался вокруг своего конец.

что вам нужно сделать, это перевести геометрию цилиндра сразу после ее создания, чтобы желаемая точка в геометрии теперь находилась в начале координат.

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

EDIT: вы можете сейчас этого делать, вместо этого:

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

Теперь, когда вы вращаете цилиндр, он теперь будет вращаться вокруг своего конца, а не его середины.

конец который он вращает вокруг также будет расположен на положении вы устанавливали для сетки цилиндра.

очевидно, вы можете сделать это с любой геометрией, не только цилиндры.


дать пример кода для ответа на 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;

надеюсь, что это поможет.