THREEjs Flock of birds
awesome bird flock with thee.js
HTML
<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>
<div id="container"></div>
CSS
body {
background-color: rgb(200,200,200);
margin: 0px;
overflow: hidden;
}
JavaScript
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 );
// Based on http://www.openprocessing.org/visuals/?visualID=6910
var Boid = function() {
var vector = new THREE.Vector3(),
_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;
this.position = new THREE.Vector3();
this.velocity = new THREE.Vector3();
_acceleration = new THREE.Vector3();
this.setGoal = function ( target ) {
_goal = target;
}
this.setAvoidWalls = function ( value ) {
_avoidWalls = value;
}
this.setWorldSize = function ( width, height, depth ) {
_width = width;
_height = height;vector
_depth = depth;
}
this.run = function ( boids ) {
if ( _avoidWalls ) {
vector.set( - _width, this.position.y, this.position.z );
vector = this.avoid( vector );
vector.multiplyScalar( 5 );
_acceleration.addSelf( vector );
vector.set( _width, this.position.y, this.position.z );
vector = this.avoid( vector );
vector.multiplyScalar( 5 );
_acceleration.addSelf( vector );
vector.set( this.position.x, - _height, this.position.z );
vector = this.avoid( vector );
...