javascripthtmlthree.jsboids

Bird Animation customization

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.

Solution

  • 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