https://chuongmep.github.io/script.js

1//THREEJS RELATED VARIABLES 
2
3var scene, 
4    camera,
5    controls,
6    fieldOfView,
7  	aspectRatio,
8  	nearPlane,
9  	farPlane,
10    shadowLight, 
11    backLight,
12    light, 
13    renderer,
14		container;
15
16//SCENE
17var floor, brid1, bird2;
18
19//SCREEN VARIABLES
20
21var HEIGHT,
22  	WIDTH,
23    windowHalfX,
24  	windowHalfY,
25    mousePos = {x:0,y:0};
26
27
28//INIT THREE JS, SCREEN AND MOUSE EVENTS
29
30function init(){
31  scene = new THREE.Scene();
32  HEIGHT = window.innerHeight;
33  WIDTH = window.innerWidth;
34  aspectRatio = WIDTH / HEIGHT;
35  fieldOfView = 60;
36  nearPlane = 1;
37  farPlane = 2000; 
38  camera = new THREE.PerspectiveCamera(
39    fieldOfView,
40    aspectRatio,
41    nearPlane,
42    farPlane);
43  camera.position.z = 1000;  
44  camera.position.y = 300;
45  camera.lookAt(new THREE.Vector3(0,0,0));    
46  renderer = new THREE.WebGLRenderer({alpha: true, antialias: true });
47  renderer.setPixelRatio(window.devicePixelRatio); 
48  renderer.setSize(WIDTH, HEIGHT);
49  renderer.shadowMapEnabled = true;
50  
51  container = document.getElementById('world');
52  container.appendChild(renderer.domElement);
53
54  windowHalfX = WIDTH / 2;
55  windowHalfY = HEIGHT / 2;
56    
57  window.addEventListener('resize', onWindowResize, false);
58  document.addEventListener('mousemove', handleMouseMove, false);
59  document.addEventListener('touchstart', handleTouchStart, false);
60	document.addEventListener('touchend', handleTouchEnd, false);
61	document.addEventListener('touchmove',handleTouchMove, false);
62  /*
63  controls = new THREE.OrbitControls( camera, renderer.domElement);
64  //*/
65}
66
67function onWindowResize() {
68  HEIGHT = window.innerHeight;
69  WIDTH = window.innerWidth;
70  windowHalfX = WIDTH / 2;
71  windowHalfY = HEIGHT / 2;
72  renderer.setSize(WIDTH, HEIGHT);
73  camera.aspect = WIDTH / HEIGHT;
74  camera.updateProjectionMatrix();
75}
76
77function handleMouseMove(event) {
78  mousePos = {x:event.clientX, y:event.clientY};
79}
80
81function handleTouchStart(event) {
82  if (event.touches.length > 1) {
83    event.preventDefault();
84		mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};
85  }
86}
87
88function handleTouchEnd(event) {
89    mousePos = {x:windowHalfX, y:windowHalfY};
90}
91
92function handleTouchMove(event) {
93  if (event.touches.length == 1) {
94    event.preventDefault();
95		mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};
96  }
97}
98
99function createLights() {
100  light = new THREE.HemisphereLight(0xffffff, 0xffffff, .5)
101  
102  shadowLight = new THREE.DirectionalLight(0xffffff, .8);
103  shadowLight.position.set(200, 200, 200);
104  shadowLight.castShadow = true;
105  shadowLight.shadowDarkness = .2;
106 	
107  backLight = new THREE.DirectionalLight(0xffffff, .4);
108  backLight.position.set(-100, 200, 50);
109  backLight.shadowDarkness = .1;
110  backLight.castShadow = true;
111 	
112  scene.add(backLight);
113  scene.add(light);
114  scene.add(shadowLight);
115}
116
117//BIRD
118
119Bird = function(){
120  
121  this.rSegments = 4;
122  this.hSegments = 3;
123  this.cylRay = 120;
124  this.bodyBirdInitPositions = [];
125  this.vAngle = this.hAngle = 0;
126  this.normalSkin = {r:255/255, g:222/255, b:121/255};
127  this.shySkin = {r:255/255, g:157/255, b:101/255};
128  this.color = {r:this.normalSkin.r, g:this.normalSkin.g, b:this.normalSkin.b};
129  this.side = "left";
130  
131  this.shyAngles = {h:0, v:0};
132  this.behaviourInterval;
133  this.intervalRunning = false;
134  
135  this.threegroup = new THREE.Group();
136  
137  // materials
138  this.yellowMat = new THREE.MeshLambertMaterial ({
139    color: 0xffde79, 
140    shading:THREE.FlatShading
141  });
142  this.whiteMat = new THREE.MeshLambertMaterial ({
143    color: 0xffffff,
144    shading: THREE.FlatShading
145  });
146  this.blackMat = new THREE.MeshLambertMaterial ({
147    color: 0x000000,
148    shading: THREE.FlatShading
149  });
150  this.orangeMat = new THREE.MeshLambertMaterial ({
151    color: 0xff5535,
152    shading: THREE.FlatShading
153  });
154  
155  //WINGS
156  
157  this.wingLeftGroup = new THREE.Group();
158  this.wingRightGroup = new THREE.Group();
159 
160  var wingGeom = new THREE.BoxGeometry(60,60, 5);
161  var wingLeft = new THREE.Mesh(wingGeom, this.yellowMat);
162  this.wingLeftGroup.add(wingLeft);
163  this.wingLeftGroup.position.x = 70;
164  this.wingLeftGroup.position.z = 0;
165  this.wingLeftGroup.rotation.y = Math.PI/2;
166  wingLeft.rotation.x = -Math.PI/4;
167  var wingRight = new THREE.Mesh(wingGeom, this.yellowMat);
168  this.wingRightGroup.add(wingRight);
169  this.wingRightGroup.position.x = -70;
170  this.wingRightGroup.position.z = 0;
171  this.wingRightGroup.rotation.y = -Math.PI/2;
172  wingRight.rotation.x = -Math.PI/4;
173  
174  //BODY
175  
176  var bodyGeom = new THREE.CylinderGeometry(40, 70, 200, this.rSegments, this.hSegments);
177  this.bodyBird = new THREE.Mesh(bodyGeom, this.yellowMat);
178  this.bodyBird.position.y = 70;
179  
180  this.bodyVerticesLength = (this.rSegments+1)*(this.hSegments);
181  for (var i=0;i<this.bodyVerticesLength; i++){
182    var tv = this.bodyBird.geometry.vertices[i];
183    this.bodyBirdInitPositions.push({x:tv.x, y:tv.y, z:tv.z});
184  }
185  
186  this.threegroup.add(this.bodyBird);
187  this.threegroup.add(this.wingLeftGroup);
188  this.threegroup.add(this.wingRightGroup);
189  
190  
191  // EYES
192  
193  this.face = new THREE.Group();
194  var eyeGeom = new THREE.BoxGeometry(60,60,10);
195  var irisGeom = new THREE.BoxGeometry(10,10,10);
196  
197  this.leftEye = new THREE.Mesh(eyeGeom, this.whiteMat);
198  this.leftEye.position.x = -30;
199  this.leftEye.position.y = 120;
200  this.leftEye.position.z = 35;
201  this.leftEye.rotation.y = -Math.PI/4;
202  
203  this.leftIris = new THREE.Mesh(irisGeom, this.blackMat);
204  this.leftIris.position.x = -30;
205  this.leftIris.position.y = 120;
206  this.leftIris.position.z = 40;
207  this.leftIris.rotation.y = -Math.PI/4;
208  
209  
210  this.rightEye = new THREE.Mesh(eyeGeom, this.whiteMat);
211  this.rightEye.position.x = 30;
212  this.rightEye.position.y = 120;
213  this.rightEye.position.z = 35;
214  this.rightEye.rotation.y = Math.PI/4;
215  
216  this.rightIris = new THREE.Mesh(irisGeom, this.blackMat);
217  this.rightIris.position.x = 30;
218  this.rightIris.position.y = 120;
219  this.rightIris.position.z = 40;
220  this.rightIris.rotation.y = Math.PI/4;
221  
222  // BEAK
223  
224  var beakGeom = new THREE.CylinderGeometry(0,20,20, 4,1);
225  this.beak = new THREE.Mesh(beakGeom, this.orangeMat);
226  this.beak.position.z = 65;
227  this.beak.position.y = 70;
228  this.beak.rotation.x = Math.PI/2;
229  
230  this.face.add(this.rightEye);
231  this.face.add(this.rightIris);
232  this.face.add(this.leftEye);
233  this.face.add(this.leftIris);
234  this.face.add(this.beak);
235  
236  //FEATHERS
237  
238  var featherGeom = new THREE.BoxGeometry(10,20,5);
239  this.feather1 = new THREE.Mesh(featherGeom, this.yellowMat);
240  this.feather1.position.z = 55;
241  this.feather1.position.y = 185;
242  this.feather1.rotation.x = Math.PI/4;
243  this.feather1.scale.set(1.5,1.5,1);
244  
245  this.feather2 = new THREE.Mesh(featherGeom, this.yellowMat);
246  this.feather2.position.z = 50;
247  this.feather2.position.y = 180;
248  this.feather2.position.x = 20;
249  this.feather2.rotation.x = Math.PI/4;
250  this.feather2.rotation.z = -Math.PI/8;
251    
252  this.feather3 = new THREE.Mesh(featherGeom, this.yellowMat);
253  this.feather3.position.z = 50;
254  this.feather3.position.y = 180;
255  this.feather3.position.x = -20;
256  this.feather3.rotation.x = Math.PI/4;
257  this.feather3.rotation.z = Math.PI/8;
258  
259  this.face.add(this.feather1);
260  this.face.add(this.feather2);
261  this.face.add(this.feather3);
262  this.threegroup.add(this.face);
263  
264  this.threegroup.traverse( function ( object ) {
265		if ( object instanceof THREE.Mesh ) {
266			object.castShadow = true;
267			object.receiveShadow = true;
268		}
269	} );
270  
271}
272
273Bird.prototype.look = function(hAngle,vAngle){
274  this.hAngle = hAngle;
275  this.vAngle = vAngle;
276  
277  this.leftIris.position.y = 120 - this.vAngle*30;
278  this.leftIris.position.x = -30 + this.hAngle*10;
279  this.leftIris.position.z = 40 + this.hAngle*10;
280  
281  this.rightIris.position.y = 120 - this.vAngle*30;
282  this.rightIris.position.x = 30 + this.hAngle*10;
283  this.rightIris.position.z = 40 - this.hAngle*10;
284  
285  this.leftEye.position.y = this.rightEye.position.y = 120 - this.vAngle*10;
286  
287  this.beak.position.y = 70 - this.vAngle*20;
288  this.beak.rotation.x = Math.PI/2 + this.vAngle/3;
289  

290  this.feather1.rotation.x = (Math.PI/4) + (this.vAngle/2);
291  this.feather1.position.y = 185 - this.vAngle*10;
292  this.feather1.position.z = 55 + this.vAngle*10;
293  
294  this.feather2.rotation.x = (Math.PI/4) + (this.vAngle/2);
295  this.feather2.position.y = 180 - this.vAngle*10;
296  this.feather2.position.z = 50 + this.vAngle*10;
297  
298  this.feather3.rotation.x = (Math.PI/4) + (this.vAngle/2);
299  this.feather3.position.y = 180 - this.vAngle*10;
300  this.feather3.position.z = 50 + this.vAngle*10;
301  
302  
303  for (var i=0;i<this.bodyVerticesLength; i++){
304    var line = Math.floor(i/(this.rSegments+1));
305    var tv = this.bodyBird.geometry.vertices[i];
306    var tvInitPos = this.bodyBirdInitPositions[i];
307    var a, dy;
308    if (line >= this.hSegments-1){
309      a = 0;
310    }else{
311      a = this.hAngle/(line+1); 
312    }
313    var tx = tvInitPos.x*Math.cos(a) + tvInitPos.z*Math.sin(a);
314    var tz = -tvInitPos.x*Math.sin(a) + tvInitPos.z*Math.cos(a);
315    tv.x = tx;
316    tv.z = tz;
317  }
318  this.face.rotation.y = this.hAngle;
319  this.bodyBird.geometry.verticesNeedUpdate = true;
320  
321}
322Bird.prototype.lookAway = function(fastMove){
323  var speed = fastMove? .4 : 2;
324  var ease = fastMove? Strong.easeOut : Strong.easeInOut;
325  var delay = fastMove? .2 : 0;
326  var col = fastMove? this.shySkin : this.normalSkin;
327  var tv = (-1 + Math.random()*2) * Math.PI/3;
328  var beakScaleX = .75 + Math.random()*.25;
329  var beakScaleZ = .5 + Math.random()*.5;
330  
331  if (this.side == "right"){
332    var th = (-1 + Math.random()) * Math.PI/4;  
333  }else{
334    var th = Math.random() * Math.PI/4; 
335  }  
336  _this = this;
337  TweenMax.killTweensOf(this.shyAngles);
338  TweenMax.to(this.shyAngles, speed, {v:tv, h:th, ease:ease, delay:delay});
339  TweenMax.to (this.color, speed, {r:col.r, g:col.g, b:col.b, ease:ease, delay:delay});
340  TweenMax.to(this.beak.scale, speed, {z:beakScaleZ, x:beakScaleX, ease:ease, delay:delay});
341      
342}
343
344Bird.prototype.stare = function(){
345  _this = this;
346  var col = this.normalSkin;
347  if (this.side == "right"){
348    var th = Math.PI/3;  
349  }else{
350    var th = -Math.PI/3;
351  }  
352  TweenMax.to(this.shyAngles, 2, {v:-.5, h:th, ease:Strong.easeInOut});
353  TweenMax.to (this.color, 2, {r:col.r, g:col.g, b:col.b, ease:Strong.easeInOut});
354  TweenMax.to(this.beak.scale, 2, {z:.8, x:1.5, ease:Strong.easeInOut});
355 
356}
357
358 //*   
359function createFloor(){ 
360  floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,1000), new THREE.MeshBasicMaterial({color: 0xe0dacd}));
361  floor.rotation.x = -Math.PI/2;
362  floor.position.y = -33;
363  floor.receiveShadow = true;
364  scene.add(floor);
365}
366
367function createBirds(){
368  bird1 = new Bird();
369  bird1.threegroup.position.x = 0;
370  scene.add(bird1.threegroup);
371  
372  bird2 = new Bird();
373  bird2.threegroup.position.x = -250;
374  bird2.side = "right";
375  bird2.threegroup.scale.set(.8,.8,.8);
376  bird2.threegroup.position.y = -8;
377  scene.add(bird2.threegroup);
378  
379  bird3 = new Bird();
380  bird3.threegroup.position.x = 250;
381  bird3.side = "left";
382  bird3.threegroup.scale.set(.8,.8,.8);
383  bird3.threegroup.position.y = -8;
384  scene.add(bird3.threegroup);
385}
386
387
388function loop(){
389  var tempHA = (mousePos.x-windowHalfX)/200;
390  var tempVA = (mousePos.y - windowHalfY)/200;

391  var userHAngle = Math.min(Math.max(tempHA, -Math.PI/3), Math.PI/3);
392  var userVAngle = Math.min(Math.max(tempVA, -Math.PI/3), Math.PI/3);
393  bird1.look(userHAngle,userVAngle);
394  
395  if (bird1.hAngle < -Math.PI/5 && !bird2.intervalRunning){
396      bird2.lookAway(true);
397      bird2.intervalRunning = true;
398      bird2.behaviourInterval = setInterval(function(){
399        bird2.lookAway(false);
400      }, 1500);
401  }else if (bird1.hAngle > 0 && bird2.intervalRunning){
402    bird2.stare();
403    clearInterval(bird2.behaviourInterval);
404    bird2.intervalRunning = false;
405
406  }else if (bird1.hAngle > Math.PI/5 && !bird3.intervalRunning){
407    bird3.lookAway(true);
408    bird3.intervalRunning = true;
409    bird3.behaviourInterval = setInterval(function(){
410      bird3.lookAway(false);
411    }, 1500);
412  }else if (bird1.hAngle < 0 && bird3.intervalRunning){
413    bird3.stare();
414    clearInterval(bird3.behaviourInterval);
415    bird3.intervalRunning = false;
416  }
417  
418  bird2.look(bird2.shyAngles.h, bird2.shyAngles.v);
419  bird2.bodyBird.material.color.setRGB(bird2.color.r,bird2.color.g,bird2.color.b);
420  
421  bird3.look(bird3.shyAngles.h, bird3.shyAngles.v);
422  bird3.bodyBird.material.color.setRGB(bird3.color.r,bird3.color.g,bird3.color.b);
423  
424  render();
425  requestAnimationFrame(loop);
426}
427
428function render(){
429  //controls.update();
430  renderer.render(scene, camera);
431}
432
433
434init();
435createLights();
436createFloor();
437createBirds();
438loop();