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

Question

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

这是我目前的结果：

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

我遇到了圆柱体的旋转中心位于物体中间的问题，因此我将旋转点移动到圆柱体的开头。但是，轮换无法正常工作。我猜，轴周围的旋转会相互影响。

以下是代码：

// 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);
}

以下是当前演示：http://www.matheretter.de/3d/vektoren/komponenten/

旋转时我做错了什么？如何实现它以使圆柱体跟随矢量线？

感谢您的帮助。

Answer 1

如果您想要转换圆柱体以使一端位于原点而另一端指向特定的point，则可以使用以下模式：

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

var geometry = new THREE.CylinderGeometry( 0, 1, length, 8, 1, true );

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, length / 2, 0 ) );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );

然后创建网格，并调用lookAt()方法：

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

three.js r.67