Javascript 三行 .js 圆边-解网

问：

我有一个函数，可以使用单独的 3D 点从单独的 trackline.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}]

这将创建多个 3D 线（3D 矢量），这些线应用作相机路径。但是线条的每一端都有锋利的边缘。我怎样才能计算更多的点数来平滑线条，或者有没有更快的方法来实现这一点？

这是我创建轨迹线的代码：

    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 可视化示例：

JavaScript 矢量三.js 3D 线

const curve = new THREE.SplineCurve( [
    new THREE.Vector2( -10, 0 ),
    new THREE.Vector2( -5, 5 ),
    new THREE.Vector2( 0, 0 ),
    new THREE.Vector2( 5, -5 ),
    new THREE.Vector2( 10, 0 )
] );

const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );

上一个：正确绘制线数据

下一个：从线段生成晶格图

Javascript 三行 .js 圆边

Javascript Three.js lines round edges

评论