Line animations

Questions
1

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:

http://jsfiddle.net/156yxd3L/
https://jsfiddle.net/prisoner849/ofcdgtz8/
http://jsfiddle.net/prisoner849/sfxo7m24/

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 );
 scene.add(mainLogo);

function animate() {
  requestAnimationFrame( animate );
  render();
}

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

  renderer.render( scene, camera );
}

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

2

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

http://jsfiddle.net/fqLvsdnu/

You can adapt this to your code like so:

http://jsfiddle.net/anLpwy18/ see link below

1 Like
3

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?

4

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.

5

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

http://jsfiddle.net/6nwvmf7u/3/

1 Like
6

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
7

No problem, happy to help :smile:

8

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

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

9

Sure thing. Here was my result

https://jsfiddle.net/TheDarkNord/5t3n8v47/5/

1 Like
10

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:

http://jsfiddle.net/prisoner849/kqp7x5cr/

3 Likes