How to draw Three js line geometry with tween animation effect?

Question

I am new to 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:

APPROACH ONE: update values in geometry. :

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: using Tween.js update function. 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);
}

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

PS: I can add a shapes and lines to scene also able animate the entire object with tween.js. But problem is to animating the drawing of line. Please help out.

Persuade

Answer 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. Keep the position array to update it while rendering

positions = buffer_geometry.attributes.position.array;

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;

Persuade

Hi @Dipak, Can we have a jsFiddle for the answer that you have posted, It would be more helpful, Thanks in advance. – Prevision

@Prevision : Its been posted 3year back, I don't have these code snippets right now with me. I will try to create a fiddle and update this answer asap. :) – Persuade