[OKG/HWK2] Updated outside wall generation, moved objects and animation above functions, changed lighting and camera position

1 files changed, 90 insertions, 48 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html b/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
index 1a4becd..fa30800 100644
--- a/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
+++ b/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
@@ -33,17 +33,17 @@
 			 */

 			var renderer = new THREE.WebGLRenderer({ antialias: true });

 			renderer.setSize( window.innerWidth, window.innerHeight );

-			renderer.setAnimationLoop( drawFrame );

+			renderer.setAnimationLoop(drawFrame);

 			renderer.shadowMap.enabled = true;

-			document.body.appendChild( renderer.domElement );

+			document.body.appendChild(renderer.domElement);

 

 			var scene = new THREE.Scene();

 			scene.background = new THREE.Color( 0xdcba5c );

 

 			var aspect = window.innerWidth/window.innerHeight;

 			var camera = new THREE.PerspectiveCamera( 30, aspect );

-			camera.position.set( 0, 1500, 00 );

-			camera.lookAt( new THREE.Vector3(0, 40, 0) );

+			camera.position.set( 0, 50, 200 );

+			camera.lookAt( new THREE.Vector3(0, 50, 0) );

 

 			function onWindowResize(event)

 			{

@@ -61,7 +61,7 @@
 			 * Земя

 			 */

 

-			const sceneSize = 800;

+			const sceneSize = 1000;

 

 			var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(sceneSize, sceneSize),

 			                            new THREE.MeshPhongMaterial({ color: 0x8eb5b2 }));

@@ -72,27 +72,77 @@
 			/*

 			 * Осветяване

 			 */

-			var sun = new THREE.PointLight(0xffffff, 0.2);

-			sun.position.set( 0, 100, 100 );

+			var sun = new THREE.PointLight(0xffffff, 0.5);

+			sun.position.set( 0, 100, 00 );

 			sun.target = ground;

 			sun.castShadow = true;

 			scene.add( sun );

 

-			var ambient = new THREE.AmbientLight(0xffffff, 0.8);

+			var ambient = new THREE.AmbientLight(0xffffff, 0.5);

 			scene.add(ambient);

 

+			/*

+			 * Обекти

+			 */

+

+			var cube = new THREE.Mesh(new THREE.BoxGeometry(1.0, 125, 1.0), new THREE.MeshPhongMaterial({color: 'red'}));

+			cube.position.y = 0.5;

+			//scene.add(cube);

+

+			var jotaro = newJotaro();

+			//jotaro.rotation.x = Math.PI / 2;

+			scene.add(jotaro);

+			// scene.add(newKira());

+			// scene.add(newKoichi());

+

+			var patio = new THREE.Mesh(new THREE.BoxGeometry(300, 1, 300),

+			                           new THREE.MeshPhongMaterial({ color: 0x978661 }));

+			patio.position.set(0, 1, -125 -150);

+			scene.add(patio);

+

+			var tailorShop = new THREE.Group();

+			tailorShop.add(new THREE.Mesh(new THREE.BoxGeometry(180, 50, 180), new THREE.MeshPhongMaterial({ color: 0x965f4d })));

+			tailorShop.position.set(60, 25, 125 + 100);

+			scene.add(tailorShop);

+

+			var greenWall = new THREE.Group();

+			greenWall.add(newOutsideWall(300, 0xa8bda7, 1, 0,0));

+			greenWall.add(newOutsideWall(300, 0xa8bda7, 0, -145,150));

+			greenWall.position.set(-220, 0, -275);

+			scene.add(greenWall);

+

+			var brownWall = new THREE.Group();

+			brownWall.add(newOutsideWall(300, 0xccb696, -1, 0,0));

+			brownWall.add(newOutsideWall(300, 0xccb696, 0, 145,150));

+			brownWall.position.set(380, 0, -275);

+			scene.add(brownWall);

+

+			var blueWall = new THREE.Group();

+			blueWall.add(newOutsideWall(300, 0x718d9e, -1, 0,0));

+			blueWall.add(newOutsideWall(300, 0x718d9e, 2, 145,-150));

+			blueWall.position.set(380, 0, 275);

+			scene.add(blueWall);

+

+			/**

+			 ** Анимация

+			 **/

+

+			function animate(t)

+			{

+				scene.rotation.y += 0.005;

+			}

+

 			/**

-			 ** Герои

+			 ** Помощни функции

 			 **/

 

-			/* Помощни функции */

 			function thc(value) {

 				return new THREE.Color(value);

 			}

 

-			var cube = new THREE.Mesh(new THREE.BoxGeometry(1.0, 125, 1.0), new THREE.MeshPhongMaterial({color: 'red'}));

-			cube.position.y = 0.5;

-			scene.add(cube);

+			/*

+			 * Функции, генериращи обекти

+			 */

 

 			function newJotaro() {

 				const coatC = thc(0xedf4eb);

@@ -255,46 +305,38 @@
 			}

 

 			function newOutsideWall(width, color, rotation, x, z) {

-				const wallHeight = 200;

-				const wallWidth = 10;

+				const wallHeight = 100;

+				const wallDepth = 10;

+				const wallHighlightHeight = 0.15625 * wallHeight;

+				const highlightColor = 0xf4f8e6;

+				const brimHeight = 0.0625 * wallHeight;

+				const brimDepthAdd = 5;

 

-				var wall = new THREE.Mesh(new THREE.BoxGeometry(width, wallHeight, wallWidth),

-				                          new THREE.MeshPhongMaterial({ color: color }));

+				var wall = new THREE.Group();

 				wall.rotation.y = rotation * Math.PI / 2;

-				wall.position.set(x, wallHeight / 2 ,z);

-				return wall;

-			}

-

-			var jotaro = newJotaro();

-			jotaro.rotation.x = Math.PI / 2;

-			scene.add(jotaro);

-			// scene.add(newKira());

-			// scene.add(newKoichi());

-

-			var patio = new THREE.Mesh(new THREE.BoxGeometry(300, 0.3, 300),

-			                           new THREE.MeshPhongMaterial({ color: 0x978661 }));

-			patio.position.y = 0.3;

-			patio.position.z = -125 -150;

-			scene.add(patio);

-

-			var greenWall = new THREE.Group();

-			greenWall.add(newOutsideWall(300, 0xa8bda7, -1, -220, -275));

-			scene.add(greenWall);

-

-			var brownWall = new THREE.Group();

-			brownWall.add(newOutsideWall(300, 0xa38d6d, 1, 380, -275))

-			scene.add(brownWall);

-

-			var blueWall = new THREE.Group();

-			blueWall.add(newOutsideWall(300, 0x718d9e, 1, 380, 275));

-			scene.add(blueWall);

+				wall.position.set(x, 0, z);

 

+				var mainPart = new THREE.Mesh(new THREE.BoxGeometry(width, wallHeight - wallHighlightHeight - brimHeight, wallDepth),

+				                              new THREE.MeshPhongMaterial({ color: color }));

+				mainPart.position.y = wallHighlightHeight + (wallHeight - wallHighlightHeight - brimHeight) / 2;

+				mainPart.castShadow = true;

+				wall.add(mainPart);

+				

+				var highlight = new THREE.Mesh(new THREE.BoxGeometry(width, wallHighlightHeight, wallDepth),

+				                               new THREE.MeshPhongMaterial({ color: highlightColor }));

+				highlight.position.y = wallHighlightHeight / 2;

+				highlight.castShadow = true;

+				wall.add(highlight);

 

-			function animate(t)

-			{

-				scene.rotation.y += 0.001;

+				var brim = new THREE.Mesh(new THREE.BoxGeometry(width + brimDepthAdd * 2, brimHeight, wallDepth + brimDepthAdd),

+				                          new THREE.MeshPhongMaterial({ color: highlightColor }));

+				brim.position.y = wallHeight - brimHeight / 2;

+				brim.position.z = brimDepthAdd / 2;

+				brim.castShadow = true;

+				wall.add(brim);

+				

+				return wall;

 			}

-

 		</script>

 	</body>

 </html>