如何使用Tween动画效果绘制Three.js直线几何体？

Question

我是一个新手，对Three.js不太了解。

我想使用THREE.JS在三维空间中绘制曲线（基于一些参数方程），以说明绘制的路径。

为了实现这个目标，我基本上尝试了两种方法：

第一种方法：更新几何体中的值。：

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);


function render() {
    requestAnimationFrame(animate);
    //calculate x,y,z based on my equation  
    lineGeometry.vertices.push(new THREE.Vector3(x,y,z));
    renderer.render(scene, camera);
}

方法二：使用Tween.js的update函数。参考链接

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);

var position = {x: -15, y: 0, z: 0};
var target = {x: 4, y: 0, z: -15};
var tween = new TWEEN.Tween(position).to(target, 8000);
tween.easing(TWEEN.Easing.Elastic.InOut);

tween.onUpdate(function() {
    lineGeometry.vertices.push(position.x, position.y, position.z);

});
tween.start();
animate();
function animate() {
    render();
    requestAnimationFrame(animate);
    TWEEN.update();
}
function render() {
    renderer.render(scene, camera);
}

我如何像这个链接一样实现它（它是在2D空间中，而我正在尝试在3D空间中实现）？

PS：我可以向场景添加形状和线条，并能够使用tween.js动画整个对象。但问题是如何动画绘制线条。请帮忙解决。

- Dipak

Answer 1

谢谢大家，我最终解决了问题。

1. 我创建了一个缓冲几何体，通过指定其大小来等于我需要绘制线条的点数。

var buffer_geometry = new THREE.BufferGeometry();
buffer_geometry.attributes = {
            position: {
                itemSize: 3,
                array: new Float32Array(numberofpoints)
            }
        };

2. 保留位置数组以便在渲染时进行更新

positions = buffer_geometry.attributes.position.array;

3. 在更新函数中，我的x、y、z值在曲线上每6个相邻点更新一次：

            positions[ i * 6 ] = x;
            positions[ i * 6 + 1 ] = y;
            positions[ i * 6 + 2] = z;
            positions[ i * 6 + 3] = x + 0.1;
            positions[ i * 6 + 4] = y + 0.1;
            positions[ i * 6 + 5] = z + 0.1;

- Dipak

---

嗨@Dipak，你发布的答案能否提供一个jsFiddle链接呢？这样会更有帮助。谢谢！ - santhosh.r

@santhosh.r：这是3年前发布的，我现在手头没有这些代码片段。我会尽快创建一个fiddle并更新这个答案。 :) - Dipak