Three.js:将圆柱体旋转到 Vector3 方向 [英] Three.js: Rotate Cylinder into Vector3 direction
问题描述
我已经搜索过了,但没有找到任何有用的内容:
I've already searched, but didn't find anything that helps:
我得到了一个向量和一个 CylinderGeometry 网格.我想实现,圆柱面向向量显示的点.作为输入,我得到了一个位置 (c) 和一个方向 (m)(就像一个直线方程:y = mx + c):
I got an vector and a CylinderGeometry Mesh. I want to acchieve, that the cylinder is facing the point where the vector is showing. As input I got a position (c) and a direction (m) (like a line equation: y = mx + c):
function draw (m,c, _color) {
//... create the geometry and mesh
// set the position
line.position.x = c.x;
line.position.y = c.y;
line.position.z = c.z;
// i've tried something like this:
line.lookAt(c.add(m));
//.. and add to scene
}
但看起来方向与我想要实现的方向正好相反.
But it looks like the direction is the direct opposite of what I want to acchieve.
我也尝试过翻译之类的东西:
I've also tried stuff like translation:
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, length/2, 0));
并尝试像 line.rotation.x = direction.angleTo(vec3(1,0,0))* 180/Math.PI;
那样手动获取旋转.但没有一个像我需要的那样工作.
and tried to get the rotation manually like line.rotation.x = direction.angleTo(vec3(1,0,0))* 180 / Math.PI;
. But none of them worked like I needed.
推荐答案
这对我有用:
// Make the geometry (of "distance" length)
var geometry = new THREE.CylinderGeometry( 0.6, 0.6, distance, 8, 1, true );
// shift it so one end rests on the origin
geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, distance / 2, 0 ) );
// rotate it the right way for lookAt to work
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( THREE.Math.degToRad( 90 ) ) );
// Make a mesh with the geometry
var mesh = new THREE.Mesh( geometry, material );
// Position it where we want
mesh.position.copy( from.sceneObject.position );
// And make it point to where we want
mesh.lookAt( to.sceneObject.position );
这篇关于Three.js:将圆柱体旋转到 Vector3 方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!