获取曲线上的点位置

时间:2018-05-09 16:13:25

标签: three.js

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

const curve = new THREE.CatmullRomCurve3(points);

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

我想这样做是为了在我用来创建曲线的每个点之间以相等数量的段细分曲线。因此,例如在点0和点1之间获得10个细分,在点1和点2之间获得10,依此类推。

1 个答案:

答案 0 :(得分:2)

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

  1. 使用数组或Vector3 s。
  2. 创建原始曲线
  3. 使用相同的数组创建一个重复的曲线,该曲线在您正在搜索的Vector3处停止。
  4. 取第二条曲线的长度,除以原曲线的长度,然后得到[0,1]位置。
  5. 代码:

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