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.