Bird Animation customization

你离开我真会死。 提交于 2019-12-08 14:14:10

问题


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.


回答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



回答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...



来源:https://stackoverflow.com/questions/21301859/bird-animation-customization

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!