Line animations

Hi there.

I am trying to animate the logo, unfortunately, it is currently rendering very fast. I need to find a way to slow this down. I’ve tried several examples using the following links as guidance, unfortunately they did not help:

The issue is that I want to draw the logo once at a reasonable speed, and then it should remain static. See below code for reference.

var camera, scene, renderer;
var mainLogo, drawCount, logoVertices;

var logoGeometry = new THREE.BufferGeometry();
logoVertices = new Float32Array( [
    -180, 90, 0,
    -180, 350, 0,
    -135, 350, 0,
    -30, 140, 0,
    -30, 350, 0,
    0, 350, 0,
    0, 230, 0,
    100, 230, 0,
    100, 350, 0,
    130, 350, 0,
    130, 90, 0,
    100, 90, 0,
    100, 200, 0,
    0, 200, 0,
    0, 90, 0,
    -30, 90, 0,
    -150, 320, 0,
    -150, 90, 0,
    -180, 90, 0
    ] );
 logoGeometry.addAttribute( 'position', new THREE.BufferAttribute( logoVertices, 3) );
 drawCount = 2;
 logoGeometry.setDrawRange( 0, drawCount);
 var logoMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
 mainLogo = new THREE.Line( logoGeometry, logoMaterial );

function animate() {
  requestAnimationFrame( animate );

function render() {
  function animateLogo(){
    drawCount = ( drawCount + 1) % logoVertices.length;
    mainLogo.geometry.setDrawRange( 0, drawCount );

  renderer.render( scene, camera );

Any help will be greatly appreciated. I am still new to this so any feedback is welcome.

A minor adjustment to the first fiddle you shared makes it stop when the animation completes:

You can adapt this to your code like so: see link below

1 Like

Hi there.

Thank you for the response. This has slowed down the animation, but completely destroyed the logo. It’s only rendering a single line now. Albeit at the right speed. I checked the Vec3 coordinates, and they should still represent the correct values. Any advice?

I got it to work. The solution was to separate all the vertices to separate arrays and individually add them as geometries. Thank you for the help. Really appreciate it.

Sorry, I linked the wrong fiddle above. Should have been this one:

1 Like

That was indeed what I was looking for. However, I messed around a bit and got a very cool effect of drawing the vertex lines simultaniously by separating each combination of vertex points and adding a new mesh to each one. It looks pretty good. Thank you again for your efforts. This was indeed what I was looking for. Have a good one

1 Like

No problem, happy to help :smile:

I’ve made something similar: Drawing with THREE.LineDashedMaterial() :slight_smile:

Could you show the result with this approach? :slight_smile:

Sure thing. Here was my result

1 Like

Interesting approach :slight_smile:
There’s another solution, without splitting a geometry into many others :slight_smile:
Just use a modified attribute of line distances, having doubled points in the geometry: