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

Question

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

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

我试图让灰色圆锥与未标记的红色矢量完全对齐。 IE。我希望圆锥体的尖端与矢量完全对齐，并从原点指向该方向。

这是我现在的代码:

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

Answer 1

如果你有一个任意向量:

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

您可以像这样将一个对象(例如圆柱体)与矢量对齐:

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 是圆柱体的原始方向(向上)。

您也可以像这样移动圆柱体以匹配矢量的位置:

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

这将圆柱体的一端放在 0, 0, 0 上，另一端放在 100, 60, 20 上，因为我将圆柱体长度设置为vector.length().