I'm currently working with a sample script that involves flying bird objects. However, I am struggling to figure out how to change the color of the birds. I attempted to modify the color on the line where the birds are instantiated:
bird = birds[i] = new THREE.Mesh(new Bird(), new THREE.MeshBasicMaterial({color: 0x54A1D8, side: THREE.DoubleSide}));Unfortunately, the color did not change...
Bird.js
var Bird = function () {
var scope = this;
THREE.Geometry.call(this);
v(5, 0, 0);
v(-5, -2, 1);
v(-5, 0, 0);
v(-5, -2, -1);
v(0, 2, -6);
v(0, 2, 6);
v(2, 0, 0);
v(-3, 0, 0);
f3(0, 2, 1);
// f3( 0, 3, 2 );
f3(4, 7, 6);
f3(5, 6, 7);
this.computeCentroids();
this.computeFaceNormals();
function v(x, y, z) {
scope.vertices.push(new THREE.Vector3(x, y, z));
}
function f3(a, b, c) {
scope.faces.push(new THREE.Face3(a, b, c));
}
}
Bird.prototype = Object.create(THREE.Geometry.prototype);
Main script
<script>
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;
var camera, scene, renderer,
birds, bird;
var boid, boids;
var stats;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.z = 450;
scene = new THREE.Scene();
birds = [];
boids = [];
for (var i = 0; i < 200; i++) {
boid = boids[i] = new Boid();
boid.position.x = Math.random() * 400 - 200;
boid.position.y = Math.random() * 400 - 200;
boid.position.z = Math.random() * 400 - 200;
boid.velocity.x = Math.random() * 2 - 1;
boid.velocity.y = Math.random() * 2 - 1;
boid.velocity.z = Math.random() * 2 - 1;
boid.setAvoidWalls(true);
boid.setWorldSize(500, 500, 400);
bird = birds[i] = new THREE.Mesh(new Bird(), new THREE.MeshBasicMaterial({color: 0x54A1D8, side: THREE.DoubleSide}));
bird.phase = Math.floor(Math.random() * 62.83);
bird.position = boids[i].position;
scene.add(bird);
}
renderer = new THREE.CanvasRenderer();
// renderer.autoClear = false;
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.addEventListener('click', triggerPlay, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.body.appendChild(renderer.domElement);
/*stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild(stats.domElement);
//
window.addEventListener('resize', onWindowResize, false);
*/
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
var vector = new THREE.Vector3(event.clientX - SCREEN_WIDTH_HALF, -event.clientY + SCREEN_HEIGHT_HALF, 0);
for (var i = 0, il = boids.length; i < il; i++) {
boid = boids[i];
vector.z = boid.position.z;
boid.repulse(vector);
}
}
//
function animate() {
requestAnimationFrame(animate);
render();
//stats.update();
}
function render() {
for (var i = 0, il = birds.length; i < il; i++) {
boid = boids[i];
boid.run(boids);
bird = birds[i];
color = bird.material.color;
color.r = color.g = color.b = (500 - bird.position.z) / 1000;
bird.rotation.y = Math.atan2(-boid.velocity.z, boid.velocity.x);
bird.rotation.z = Math.asin(boid.velocity.y / boid.velocity.length());
bird.phase = (bird.phase + (Math.max(0, bird.rotation.z) + 0.1)) % 62.83;
bird.geometry.vertices[5].y = bird.geometry.vertices[4].y = Math.sin(bird.phase) * 5;
}
renderer.render(scene, camera);
}
</script>