[OKG/HWK2] Added tailor shop and added a function for automatic shadow cast setting

1 files changed, 139 insertions, 11 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html b/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
index bd418b1..25e81e1 100644
--- a/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
+++ b/Year 2/Computer Graphics Fundamentals/Homework 2/mannequin.html
@@ -33,6 +33,7 @@
 			 */

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

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

+			renderer.domElement.style = 'width:100%; height:100%; position:fixed; top:0; left:0;';

 			renderer.setAnimationLoop(drawFrame);

 			renderer.shadowMap.enabled = true;

 			document.body.appendChild(renderer.domElement);

@@ -42,8 +43,8 @@
 

 			var aspect = window.innerWidth/window.innerHeight;

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

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

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

+			camera.position.set( 0, 100, -200 );

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

 

 			function onWindowResize(event)

 			{

@@ -72,13 +73,13 @@
 			/*

 			 * Осветяване

 			 */

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

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

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

 			sun.target = ground;

 			sun.castShadow = true;

 			scene.add( sun );

 

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

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

 			scene.add(ambient);

 

 			/*

@@ -91,6 +92,8 @@
 

 			var jotaro = newJotaro();

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

+			jotaro.position.x = 50;

+			jotaro.position.z = 120;

 			scene.add(jotaro);

 

 			// scene.add(newKira());

@@ -119,9 +122,8 @@
 			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);

+			var tailorShop = newTailorShop();

+			tailorShop.position.set(60, 0, 225);

 			scene.add(tailorShop);

 

 			var greenWall = new THREE.Group();

@@ -142,13 +144,15 @@
 			blueWall.position.set(380, 0, 275);

 			scene.add(blueWall);

 

+			enableCastShadow(scene);

+

 			/**

 			 ** Анимация

 			 **/

 

 			function animate(t)

 			{

-				scene.rotation.y += 0.005;

+				//tailorShop.rotation.y += 0.005;

 			}

 

 			/**

@@ -159,10 +163,137 @@
 				return new THREE.Color(value);

 			}

 

+			function enableCastShadow(object) {

+				if (object.children.length === 0) {

+					object.castShadow = true;

+					object.receiveShadow = true;

+				}

+				else

+					object.children.forEach((child) => enableCastShadow(child));

+			}

+

 			/*

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

 			 */

 

+			function newTailorShop() {

+				const size = 180;

+				const bottomHeight = 25;

+				const eaveSize = 20;

+				const eaveTileRad = 2;

+				const floorColor = 0xd4cdb7;

+				const floorHeight = 55 + eaveSize;

+				const floorSeparatorHeight = 20;

+

+				const borderColor = 0x715949;

+				const borderSize = 2;

+				const doorHeight = 70;

+				const doorWidth = 34;

+				const windowSize = 30;

+				const mailBoxSize = 8;

+

+				var tailorShop = new THREE.Group();

+

+				var bricks = new THREE.Mesh(new THREE.BoxGeometry(size, bottomHeight, size),

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

+				bricks.position.y = bottomHeight / 2;

+				tailorShop.add(bricks);

+				var floor1 = new THREE.Mesh(new THREE.BoxGeometry(size, floorHeight, size),

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

+				floor1.position.y = bottomHeight + floorHeight / 2;

+				tailorShop.add(floor1);

+				var floorSeparator = new THREE.Mesh(new THREE.BoxGeometry(size, floorSeparatorHeight, size),

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

+				floorSeparator.position.y = bottomHeight + floorHeight + floorSeparatorHeight / 2;

+				tailorShop.add(floorSeparator);

+

+				var floor2 = new THREE.Mesh(new THREE.BoxGeometry(size, floorHeight, size),

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

+				floor2.position.y = bottomHeight + floorHeight * 1.5 + floorSeparatorHeight;

+				tailorShop.add(floor2);

+

+

+				var shopEave = new THREE.Group();

+				var eaveShape = new THREE.Shape();

+				eaveShape.lineTo(-eaveSize, 0);

+				eaveShape.lineTo(0,eaveSize);

+				var eave = new THREE.Mesh(new THREE.ExtrudeGeometry(eaveShape, { depth: size, bevelEnabled: true, bevelSize: 0.1, bevelThickness: 0.1  }),

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

+				shopEave.add(eave);

+				var eaveTileLength = Math.sqrt(2 * eaveSize * eaveSize);

+				var eaveTile = new THREE.Mesh(new THREE.CylinderGeometry(eaveTileRad, eaveTileRad, eaveTileLength),

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

+				eaveTile.rotation.z = -Math.PI / 4;

+				eaveTile.position.y = eaveSize / 2 + eaveTileRad;

+				eaveTile.position.x = -eaveSize / 2 - eaveTileRad;

+				for (var i = 0; i <= size + eaveTileRad; i+=2*eaveTileRad) {

+					eaveTile.position.z = i;

+					shopEave.add(eaveTile.clone());

+				}

+				eaveTile.rotation.z = 0;

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

+				eaveTile.position.x = 0;

+				eaveTile.position.y = eaveSize + eaveTileRad * 2;

+				for (var i = -eaveTileRad + eaveTileLength / 2; i <= size + eaveTileRad - eaveTileLength; i++) {

+					eaveTile.position.z = i;

+					shopEave.add(eaveTile.clone());

+				}

+				eaveTile.position.z = size + eaveTileRad - eaveTileLength / 2;

+				shopEave.add(eaveTile);

+

+				shopEave.rotation.y = -Math.PI / 2;

+				shopEave.position.set(size/2, bottomHeight + floorHeight - eaveSize, -size/2);

+				tailorShop.add(shopEave);

+

+

+				var door = new THREE.Group();

+				var doorVoid = new THREE.Mesh(new THREE.BoxGeometry(doorWidth - borderSize * 2, doorHeight - borderSize, borderSize / 2),

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

+				door.add(doorVoid);

+				var doorMat = new THREE.MeshPhongMaterial({ color: borderColor });

+				var doorFrameVert = new THREE.Mesh(new THREE.BoxGeometry(borderSize, doorHeight - borderSize, borderSize),

+				                                   doorMat);

+				doorFrameVert.position.x = doorWidth / 2 - borderSize / 2;

+				door.add(doorFrameVert.clone());

+				doorFrameVert.position.x = -doorWidth / 2 + borderSize / 2;

+				door.add(doorFrameVert);

+				var doorFrameTop = new THREE.Mesh(new THREE.BoxGeometry(doorWidth, borderSize, borderSize),

+				                                  doorMat);

+				doorFrameTop.position.y = doorHeight / 2;

+				door.add(doorFrameTop);

+

+				door.position.set(10, doorHeight / 2 - borderSize / 2, -size / 2);

+				tailorShop.add(door);

+

+				var window = new THREE.Group();

+				var windowVoid = new THREE.Mesh(new THREE.BoxGeometry(windowSize - borderSize * 2, windowSize - borderSize * 2, borderSize / 2),

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

+				window.add(windowVoid);

+				var windowBorder = new THREE.Mesh(new THREE.BoxGeometry(windowSize, borderSize, borderSize),

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

+				windowBorder.position.set(0, -windowSize / 2 + borderSize / 2, 0);

+				window.add(windowBorder.clone());

+				windowBorder.position.y = windowSize / 2 - borderSize / 2;

+				window.add(windowBorder.clone());

+				windowBorder.rotation.z = Math.PI / 2;

+				windowBorder.position.set(-windowSize / 2 + borderSize / 2, 0, 0);

+				window.add(windowBorder.clone());

+				windowBorder.position.x = windowSize / 2 - borderSize / 2;

+				window.add(windowBorder);

+

+				window.position.set(60, doorHeight * 0.9 - windowSize / 2, -size / 2);

+				tailorShop.add(window.clone());

+				window.position.x = -60;

+				tailorShop.add(window);

+

+				var mailBox = new THREE.Mesh(new THREE.BoxGeometry(mailBoxSize, mailBoxSize * 0.75, mailBoxSize / 3),

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

+				mailBox.position.set(-16, doorHeight * 0.6, -size / 2);

+				tailorShop.add(mailBox);

+

+				return tailorShop;

+			}

+

 			function newJotaro() {

 				const coatC = thc(0xedf4eb);

 				const skinC = thc(0xdcc7b4);

@@ -338,20 +469,17 @@
 				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);

 

 				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;