时间戳

首页 > 解决方案 > 获取曲线上点的位置

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

问题描述

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

const curve = new THREE.CatmullRomCurve3(points);

我想知道曲线上这些相同点的位置（范围从 0 到 1）。.getPointAt()基本上与第一个点在 0 的位置相反，最后一个点在 1 的位置。

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

标签： three.js

解决方案

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

  1. 使用数组或Vector3s 创建原始曲线。
  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);

推荐阅读