鸟类动画定制 [英] Bird Animation customization

查看:131
本文介绍了鸟类动画定制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个网站。该网站的链接是:

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:

< a href =http://mrdoob.github.io/three.js/examples/canvas_geometry_birds.html =nofollow> 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.

推荐答案

学习three.js会有所帮助。

Learning three.js will defiantly helps.

Renderer 函数刚创建一个新的DOM元素,并在其上绘制场景

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

因此,实现目标的最简单方法是你设置ui上每个其他元素的 z-index css属性高于这个Three.js DOM元素。

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.

这实际上是如何将统计元素(显示当前FPS的那个)置于webGL元素之上。

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

更新1:

如果你看一下 WebGLRenderer ,如果找不到一个画布元素,它会创建一个画布元素。因此,在CSS中,您可以将此元素的z-index属性设置为负数以获得所需结果

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

更新2:
更改材料颜色:

Update 2: Changing material color:

您可以像这样初始化三个颜色的颜色。

you can initialize the color in threejs like this.

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

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

官方文件这里

然后您只需要删除以下代码行,就可以在材质的颜色属性中设置此颜色来自渲染函数

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;

并添加这些行。

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

这篇关于鸟类动画定制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆