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

Posted 2023-02-27

【中文标题】如何用补间动画效果绘制三个 js 线条几何？

【英文标题】：How to draw Three js line geometry with tween animation effect?

【发布时间】：2014-01-01 22:20:04

【问题描述】：

我是 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);

方法二：使用 Tween.js 更新函数。 Referenced on

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);

我怎样才能在link 中实现这一点（它在 2D 空间中，而我试图在 3D 空间中实现）？

PS： 我可以在场景中添加形状和线条，也可以使用 tween.js 为整个对象设置动画。但问题是对线条的绘制进行动画处理。请帮忙。

【参考方案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;

【讨论】：

嗨@Dipak，我们可以为您发布的答案提供一个jsFiddle吗，这会更有帮助，提前致谢。

@santhosh.r ：它已在 3 年前发布，我现在没有这些代码 sn-ps。我将尝试创建一个小提琴并尽快更新此答案。 :)