Three.js 3D相机路径线条尖锐边缘平滑处理技术咨询

问题背景 #

我通过函数从trackline.json读取3D点数据生成轨迹线条，用作相机路径，但线条在段端点处存在尖锐边缘，希望通过补点或更高效的方式实现平滑处理。

示例JSON数据 #

[{"x":5.01088018657063,"y":0.033095929202426655,"z":-1.469083126575439},{"x":-2.836023686139761,"y":1.2315534616542192,"z":-2.623173656748311},{"x":-5.188269059945695,"y":-3.889753328348702,"z":2.4758137354826646},{"x":0.5400173030307891,"y":-4.415289185011361,"z":3.7757418987784406},{"x":4.475184816920873,"y":-0.3696880702837009,"z":0.6426064577081578}]

当前实现代码 #

setupTrackline() {
    fetch('trackline.json')
        .then(response => {
            return response.json();
        })
        .then(data => {
            // Process the data if needed
            console.log(data); // Check the retrieved data
            this.setupTracklineWithData(data);
        })
        .catch(error => {
            console.error('Error fetching trackline.json:', error);
        });
}

setupTracklineWithData(data) {
    // Assuming the data is an array of Vector3 objects, adjust this part accordingly
    const points = data.map(position => new THREE.Vector3(position.x, position.y, position.z));

    const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00dd00 }); // Green color for the line

    this.trackline = new THREE.Line(lineGeometry, lineMaterial);
}

问题可视化（2D示例） #

解决方案 #

方法一：使用Three.js内置的CatmullRomCurve3（最简便） #

Three.js自带的CatmullRomCurve3类可直接生成平滑样条曲线，自动在原始点间生成过渡插值点，适配相机路径需求。

修改setupTracklineWithData函数：

setupTracklineWithData(data) {
    const points = data.map(position => new THREE.Vector3(position.x, position.y, position.z));
    
    // 创建Catmull-Rom曲线，false表示非闭合轨迹，可改为true实现闭合
    const spline = new THREE.CatmullRomCurve3(points, false, 'centripetal', 0.5);
    // 生成50个插值点，数值越大曲线越平滑
    const smoothPoints = spline.getPoints(50);

    const lineGeometry = new THREE.BufferGeometry().setFromPoints(smoothPoints);
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00dd00 });

    this.trackline = new THREE.Line(lineGeometry, lineMaterial);
}

• 参数说明：
  • centripetal类型曲线可避免不必要的波动，适合相机路径
  • 最后一个参数0.5为张力值：0贴合原始点，1曲线更平缓

方法二：手动贝塞尔曲线插值（自定义程度高） #

若需精细控制曲线形态，可通过三次贝塞尔曲线计算相邻点的控制点，实现平滑过渡。

示例实现：

function smoothPointsWithBezier(originalPoints, segmentsPerCurve = 10) {
    const smoothPoints = [];
    for (let i = 0; i < originalPoints.length - 1; i++) {
        const p0 = originalPoints[i];
        const p1 = originalPoints[i + 1];
        let controlPoint1, controlPoint2;

        // 针对首尾线段和中间线段分别计算控制点
        if (i === 0) {
            controlPoint1 = p0.clone().add(p1.clone().sub(p0).multiplyScalar(0.2));
            controlPoint2 = p1.clone().sub(p1.clone().sub(p0).multiplyScalar(0.2));
        } else if (i === originalPoints.length - 2) {
            controlPoint1 = p0.clone().add(p1.clone().sub(p0).multiplyScalar(0.2));
            controlPoint2 = p1.clone().sub(p1.clone().sub(p0).multiplyScalar(0.2));
        } else {
            const prevPoint = originalPoints[i - 1];
            const nextPoint = originalPoints[i + 1];
            controlPoint1 = p0.clone().add(p1.clone().sub(prevPoint).multiplyScalar(0.25));
            controlPoint2 = p1.clone().sub(nextPoint.clone().sub(p0).multiplyScalar(0.25));
        }

        // 生成贝塞尔曲线上的点并加入结果数组
        const curve = new THREE.CubicBezierCurve3(p0, controlPoint1, controlPoint2, p1);
        const curvePoints = curve.getPoints(segmentsPerCurve);
        smoothPoints.push(...(i === 0 ? curvePoints : curvePoints.slice(1)));
    }
    return smoothPoints;
}

// 在setupTracklineWithData中调用
setupTracklineWithData(data) {
    const points = data.map(position => new THREE.Vector3(position.x, position.y, position.z));
    const smoothPoints = smoothPointsWithBezier(points, 15);

    const lineGeometry = new THREE.BufferGeometry().setFromPoints(smoothPoints);
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00dd00 });

    this.trackline = new THREE.Line(lineGeometry, lineMaterial);
}

方法三：线性插值补点（简单但平滑度有限） #

若需保留原始轨迹走向，仅减少视觉尖锐感，可在相邻原始点间插入线性插值点。

示例实现：

function interpolatePoints(originalPoints, steps = 5) {
    const interpolated = [];
    for (let i = 0; i < originalPoints.length - 1; i++) {
        const start = originalPoints[i];
        const end = originalPoints[i + 1];
        interpolated.push(start);
        
        // 插入steps个中间点
        for (let s = 1; s < steps; s++) {
            const t = s / steps;
            const x = start.x + (end.x - start.x) * t;
            const y = start.y + (end.y - start.y) * t;
            const z = start.z + (end.z - start.z) * t;
            interpolated.push(new THREE.Vector3(x, y, z));
        }
    }
    interpolated.push(originalPoints[originalPoints.length - 1]);
    return interpolated;
}

// 在setupTracklineWithData中调用
setupTracklineWithData(data) {
    const points = data.map(position => new THREE.Vector3(position.x, position.y, position.z));
    const smoothPoints = interpolatePoints(points, 10);

    const lineGeometry = new THREE.BufferGeometry().setFromPoints(smoothPoints);
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00dd00 });

    this.trackline = new THREE.Line(lineGeometry, lineMaterial);
}

选择建议 #

• 优先选CatmullRomCurve3：实现简单、效果稳定，适合相机路径这类需要自然平滑的场景
• 需自定义曲线形态用贝塞尔插值：可精细调整每段曲线的平滑程度
• 线性插值适合严格保留原始轨迹走向，仅需弱化尖锐感的场景

内容的提问来源于stack exchange，提问作者JohannesDev