three.js - 获取点在曲线上的位置

Question

我有一个由 Vector3 点数组创建的 CatmullRomCurve3。

const curve = new THREE.CatmullRomCurve3(points);

我想知道这些相同点在曲线上的位置(在 0 到 1 的范围内)。基本上是 .getPointAt() 的倒数，其中第一个点为 0，最后一个点为 1。

我想这样做是为了将曲线分割为相等数量的段在我用来创建曲线的每个点之间。因此，例如在点 0 和点 1 之间进行 10 次分割，在点 1 和点 2 之间进行 10 次分割，依此类推。

Answer 1

我确定您的问题有数学方法，但一个简单的解决方法是:

1. 使用数组或 Vector3 创建原始曲线。
2. 使用相同的数组创建一条重复曲线，该曲线在您要搜索的 Vector3 处停止。
3. 取第二条曲线的长度除以原始曲线的长度，您将得到 [0, 1] 位置。

在代码中:

// Create original curve
var curve = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( -10, 0, 10 ),
    new THREE.Vector3( -5, 5, 5 ),
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 5, -5, 5 ),
    new THREE.Vector3( 50, 0, 50 )
], false );

var searchPoint = new THREE.Vector3( 5, -5, 5 ); // Point we're looking for
var searchArray = [];   // Array for second curve
var uPosition = null; // Result is null for now

// Loop through curve.points to find our final point
for(var i = 0; i < curve.points.length; i++){
    searchArray.push(curve.points[i]);

    // Exit loop once point has been found
    if(searchPoint.equals(curve.points[i])){
        // Create shorter curve that stops at desired point
        var curve2 = new THREE.CatmullRomCurve3(searchArray);

        // Result is short length / original length
        uPosition = curve2.getLength() / curve.getLength();
        break;
    }
}

// Result is null if position not found
console.log(uPosition);