如何使用补间动画效果绘制三个js线几何？

Question

我是Three.js的新手.

我想在3D空间上绘制曲线(基于一些参数方程),使用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);
}

APPROACH TWO:使用Tween.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);

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为整个对象设置动画.但问题是动画画线.请帮忙.

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.在更新功能中,每个6个相邻点由曲线上的x,y,z值更新:

            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;