Question

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

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

在我的背景中。请有人建议我的方式。我尝试了很多东西。仍然无法做到正确。

另外请建议一种改变鸟类颜色的方法。

Answer 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： 改变材料颜色：

你可以像这样初始化三种颜色。

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

Answer 2

很容易改变材料的颜色...... 在渲染功能中，只需删除下面提到的行......你可以查看鸟类的随机颜色..

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

下面的行编码做材料随机着色... {color：Math.random（）* 0xffffff}为所有鸟提供随机颜色......只需将其改为颜色：0x000000 ...你可以查看鸟黑色的颜色......

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

它会起作用......