javascript - 鸟类动画定制

Question

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

http://www.eclectika.org/test3

我想要以下链接中的鸟：

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

在我的背景下。请有人建议我的方式。我已经尝试了很多东西。还是搞不定。

还请提出一种改变鸟类颜色的方法。

Answer 1

学习three.js 将毫无疑问地有所帮助。

该Renderer函数只是创建一个新的 DOM 元素并在其上绘制Scene。

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

这就是Stats Element（显示当前 FPS 的那个）实际上是如何放置在 webGL 元素之上的。

更新1：

如果您查看 DOM 或 WebGLRenderer 的 threejs 实现，您 会发现，如果找不到，它会创建一个 canvas 元素。因此，在您的 CSS 中，您可以将此元素的 z-index 属性设置为负数，以实现您想要的结果

更新 2： 更改材质颜色：

你可以像这样在threejs中初始化颜色。

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

或者

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

官方文档在这里

那么您只需要通过从render函数中删除以下代码行来在材质的颜色属性中设置此颜色

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

Answer 2

将颜色更改为材料非常容易...在渲染功能中只需删除下面提到的行...您可以查看鸟类的随机颜色..

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

下面的行编码对材料进行随机着色... {color:Math.random() *0xffffff} 为所有鸟类提供随机颜色...只需将其更改为 color:0x000000... 您可以以黑色查看鸟类颜色……

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

它会成功的......