鸟类动画定制答案

【问题标题】：Bird Animation customization鸟类动画定制
【发布时间】：2014-02-13 15:04:49
【问题描述】：

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

我想要以下链接中的小鸟：

在我的背景中。请有人建议我的方式。我已经尝试了很多东西。还是没弄好。

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

【问题讨论】：

【解决方案1】：

学习 three.js 绝对有帮助。

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

因此，实现目标的最简单方法是将 ui 上所有其他元素的 z-index 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)");

官方文档here

那么你只需要在材质的颜色属性中设置这个颜色，只需从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

【讨论】：

【解决方案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 } ) );

它会成功的......

【讨论】：