Question

我在场景中有一个对象，它为几何体的每一面执行光线投射。通过这个光线投射，我使用THREE.CatmullRomCurve3函数创建了一个样条曲线，并使用TubeGeometry进行了可视化。

我基本上想要旋转并定位一些形状，以便它们遵循样条曲线的方向。我已经尝试过对以下问题实施WestLangley的解决方案 - Three.JS Object following a spline path - rotation / tanget issues & constant speed issue - 它主要起作用，唯一有问题的是我似乎无法让形状旋转为一致的即可。似乎水平样条线后面的对象与垂直样条线的方向不同。

理想情况下，我希望将水平形状翻转90度以匹配垂直形状。

任何想法都会受到赞赏吗？感谢

Image illustrating the problem

//Create spline
var spline = new THREE.CatmullRomCurve3(splinePoints);

//Add a few shapes
for (var j = 1; j < 4; j++) {

    var curve = new THREE.EllipseCurve(0, 0, 5, 5, 0, Math.PI, false);

    var points = curve.getSpacedPoints(20);
    points.push(points[0].clone());

    var shape = new THREE.Shape(points);
    var geometry = new THREE.ShapeGeometry(shape);

    var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide }));
    scope.add(mesh);

    placeObjectOnSpline(spline, j / 4, mesh);
}

function placeObjectOnSpline(spline, pos, mesh) {

    var axis = new THREE.Vector3();

    var up = new THREE.Vector3(0, 1, 0);

    mesh.position.copy(spline.getPointAt(pos));

    var tangent = spline.getTangentAt(pos).normalize();

    axis.crossVectors(up, tangent).normalize();

    var radians = Math.acos(up.dot(tangent));

    mesh.quaternion.setFromAxisAngle(axis, radians);
}

如何沿样条线正确旋转对象 - Three.js

0 个答案: