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