Vector Three.js-表示向量的圆柱体的旋转

我正在使用three.js创建一个简单的3d矢量环境。我用直线来表示所有3个向量分量x，y，z，最后用一条直线表示向量。问题是在Windows中设置线条的宽度。我尝试实现的解决方法是将圆柱体放置在直线上（请参见下图中的红色对象）

这就是我目前的结果：

如您所见，我无法将气缸旋转到正确的位置

我面临的问题是，气缸的旋转中心在物体的中间，所以我把旋转点移到气缸的起点。但是，旋转仍然不能正常工作。我想，绕轴旋转是相互影响的

代码如下：

// VEKTOR
var vektor = {};
vektor._x = 2;
vektor._y = 1.5;
vektor._z = 1;
vektor._length = Math.sqrt(vektor._x*vektor._x + vektor._y*vektor._y + vektor._z*vektor._z);

// CYLINDER
var cyl_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
// cylinder which is our line that represents the vector
var cyl_width = 0.025; // default line width
var cyl_height = vektor._length;
// THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, 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
// https://stackoverflow.com/questions/12746011/three-js-how-do-i-rotate-a-cylinder-around-a-specific-point
cylGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cyl_height/2, 0 ) );
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);

updateCylinder();
scene.add( cylinder );  

函数updateCylinder尝试进行旋转

function updateCylinder() {
    // ... stuff, then:
    cylinder.rotation.x = Math.atan2(vektor._z,vektor._y);
    cylinder.rotation.y = 0.5*Math.PI+Math.atan2(vektor._x,vektor._z);
    cylinder.rotation.z = Math.atan2(vektor._x,vektor._y);
}

以下是当前演示：

旋转有什么不对吗？如何实现它，使圆柱体沿着矢量线

---

感谢您的帮助。

如果您希望变换圆柱体，使一端位于原点，而另一端指向特定的

点，请遵循以下模式：

首先，变换几何体，使圆柱体的一端位于原点，另一端（顶部）位于正z轴上

然后创建网格，并调用
lookAt（）
方法：

var mesh = new THREE.Mesh( geometry, material );
mesh.lookAt( point );

three.js r.67
无法帮助你进行数学运算，但既然你已经有了一条线，你可以用这条线来构建你的圆柱体？看看这个例子。如果你有一条样条曲线（你的线），你可以用它来挤出一个圆柱体。这样的话，你当然会在每次改变的基础上建立一个新的几何体。但我只是想在你的问题中加入这一点，作为一种选择。太好了，谢谢。因此，我不用做3次旋转，只需使用
lookAt（point）
其中
var point=new THREE.Vector3（vektor.\ux，vektor.\uy，vektor.\uz）
。为什么Math.PI/2的
makeRotationX
变得必要？因为默认情况下，对象被视为“注视”正z轴。在本例中，需要变换几何体，使其“指向”该方向。
var mesh = new THREE.Mesh( geometry, material );
mesh.lookAt( point );