Bird Animation customization

Question

I am trying to create a website. The link for the website is:

http://www.eclectika.org/test3

I want the birds in the following link:

http://mrdoob.github.io/three.js/examples/canvas_geometry_birds.html

to be in my background. Please someone suggest me the way. I have tried many things. Still cant get it right.

Also please suggest a way to change the color of the birds.

Answer 1

Learning three.js will defiantly helps.

The Renderer function just creates a new DOM element and draws the Scene on it.

So the easiest way you can achieve your goal is that you set the z-index css property of every other element on the ui higher than this Three.js DOM element.

That is infact how the Stats Element (the one which shows you the current FPS ) is placed on top of the webGL element.

Update 1:

If you look at the DOM or the threejs implementation of WebGLRenderer you will find ,it creates a canvas element if it doesn't finds one. so in your CSS you can set the z-index property of this element in negative to achieve your desired result

Update 2: Changing material color:

you can initialize the color in threejs like this.

var desiredColor= new THREE.Color( 0xff0000 );

or

var desiredColor= new THREE.Color("rgb(255,0,0)");

official documentation here

then you just need to set this color in the material's color property by just removing the following lines of code from the render function

color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

and adding these lines instead.

bird.material.color= desiredColor; // in this case it will change all bird's color to red

Answer 2

its pretty easy to change colors to a material... In render function just remove the below mentioned line...you can view random colors of birds..

color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

the below line coding does the material random coloring... {color:Math.random() *0xffffff} gives random color to all birds... just change it as color:0x000000... u can view the bird color in black....

bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:Math.random() * 0xffffff, side: THREE.DoubleSide } ) );

it will do the trick...