javascript - Three.js Object3d圆柱旋转以与向量对齐

我进行了广泛的搜索，但是似乎无法弄清楚这个基本的东西。我在一两年前就已经看到了关于stackoverflow和其他地方的其他示例，但是它们无法与Three.js的最新版本一起使用。

这是我正在处理的版本:http://medschoolgunners.com/sandbox/3d/。

我正在尝试使灰色圆锥体与未标记的红色 vector 完全对齐。就是我希望圆锥体的尖端与 vector 精确对齐，并从该方向指向原点。

这是我现在拥有的代码:

    //FUNCTION TO CREATE A CYLINDER
function create_cylinder(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded, color)
{
var material = new THREE.MeshLambertMaterial({
    color: color, //0x0000ff
    opacity: 0.2
});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded), material);

cylinder.overdraw = true;

return cylinder;
}

//ALIGN THE CYLINDER TO A GIVEN VECTOR
var alignVector=new THREE.Vector3(-50,50,50); //the vector to be aligned with

var newcylinder = create_cylinder(0.1, 10, 40, 50, 50, false, "0x0ff0f0");  // the object to be aligned with the vector above

var cylinderQuaternion = new THREE.Quaternion();
cylinderQuaternion.setFromEuler(alignVector);
newcylinder.useQuaternion = true;
newcylinder.quaternion=cylinderQuaternion;

scatterPlot.add(newcylinder);

最佳答案

如果您有任意 vector :

var vector = new THREE.Vector3(100, 60, 20);

您可以将一个物体(例如圆柱体)与 vector 对齐，如下所示:

var geometry = new THREE.CylinderGeometry(2, 2, vector.length(), 4, 4);
var mesh = new THREE.Mesh(geometry, someMaterial);
var axis = new THREE.Vector3(0, 1, 0);
mesh.quaternion.setFromUnitVectors(axis, vector.clone().normalize());

其中axis是圆柱体的原始方向(指向上方)。

您还可以像这样移动圆柱体以匹配 vector 的位置:

mesh.position.copy(vector.clone().multiplyScalar(0.5));

这将圆柱体的一端放在0, 0, 0上，另一端放在100, 60, 20上，并且由于将圆柱体的长度设置为vector.length()而起作用。

关于javascript - Three.js Object3d圆柱旋转以与向量对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9038465/