如何绘制补间动画效果三线JS几何？ [英] How to draw Three js line geometry with tween animation effect?

问题描述

我是新来three.js所。

I am new to Three.js.

我想绘制曲线（基于某些参数方程）三维空间，使用的 three.js所 ，说明绘画的道路。

I want to draw curves (based on some parametric equations) on 3D space, using THREE.JS, to illustrate the path of drawing.

要做到这一点我基本上在两个方面尝试：

To achieve this basically I tried in two ways:

方法的一个：在几何更新值：

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更新功能的引用的

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

我

如何才能做到这一点在本链接（其在二维空间中，我是尝试在3D空间中实现）？

How can I achieve this as in this link (its in 2D space and I was trying to achieve in 3D space)?

PS： 我可以添加形状和线条场景也能有生整个对象与tween.js。但问题是，以动画线的绘制。请大家帮帮忙。的

推荐答案

1 我创建了一个缓冲的几何形状，通过指定其大小是等于我要画线的点数。

Thanks all, finally I resolved it.

1. I created a buffered geometry, by specifying its size which is equals to number of points I need to draw line.

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

2 保持阵位，同时渲染更新

2. Keep the position array to update it while rendering

positions = buffer_geometry.attributes.position.array;

3 在更新功能，每6近邻点被我X，Y更新，在曲线上z值：

3. In update function, each 6 neighbor points were updated by my x,y,z values on the curve:

            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;

这篇关于如何绘制补间动画效果三线JS几何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！