path: root / Year 2 / Computer Graphics Fundamentals / Homework 1 / moidom-6.html

<!DOCTYPE html>

<!-- Камен Младенов, група 6, ф.н. 0MI0800028 -->

<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script src="three.min.js"></script>
		<script src="OrbitControls.js"></script>
		<script src="CSG.js"></script>
	</head>
	
	<body>
		<script>
			const FN = '0MI0800028';
		</script>
		
		<script src="init.js"></script>
			
		<script>
			// Обекти:
			// мини телескоп и въртящ се стол

			/*
			 * Помощни функции
			 */
			var groups = [];
			function hNewGroup(meshes, position) {
				var group = new THREE.Group();
				meshes.forEach((mesh) => { enableShadows(mesh); group.add(mesh); });
				group.position.set(...position);
				groups.push(group);
				return group;
			}

			function enableShadows(mesh) {
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				mesh.children.forEach((child) => enableShadows(child));
			}



			/*
			 * Дупки
			 */
			function holePrimitive(size, position) {
				var hole = new THREE.Mesh(new THREE.BoxGeometry(...size));
				position[1] -= (3.10 - size[1]) / 2;
				hole.position.set(...position);
				return hole;
			}

			function doorHole(x, y, z) {
				return holePrimitive([1, 2.10, 1], [x, y, z]);
			}

			function doubleDoorHole(x, y, z) {
				return holePrimitive([2, 2.10, 1], [x, y, z]);
			}

			function windowHole(x, y, z) {
				return holePrimitive([0.70, 1.44, 1], [x, y+1.10, z]);
			}

			function doubleWindowHole(x, y, z) {
				return holePrimitive([1.40, 1.44, 1], [x, y+1.10, z]);
			}



			/*
			 * Обекти
			 */
			function wall(length, rotation, holes, position) {
				const height = 3.10;
				const width  = 0.20;
				const color  = 0xf0fff0;

				var wall = new THREE.Mesh(new THREE.BoxGeometry(length, height, width),
				                          new THREE.MeshPhongMaterial({ color: color }));

				if (holes !== undefined && holes.length >= 0) {
					var wallCSG = new CSG();
					wallCSG.subtract([wall]);
					holes.forEach((hole) => wallCSG.subtract([hole]));
					wall = wallCSG.toMesh();
				}

				wall.rotation.y = rotation * Math.PI / 2;
				if (position === undefined)
					position = [0, 0, 0];
				wall.position.set(position[0] -Math.sin(wall.rotation.y) * width / 2,
				                  position[1] +height / 2 - 0.01,
				                  position[2] -Math.cos(wall.rotation.y) * width / 2);

				return wall;
			}

			function table(width, depth, height, position) {
				const thickness = 0.20;
				const legWidth = 0.10;
				const tableLip = 0.08;
				const color = 0x55342b;

				var material = new THREE.MeshPhongMaterial({ color: color });
				var tableTop = new THREE.Mesh(new THREE.BoxGeometry(width, thickness, depth), material);
				tableTop.position.y = height - thickness / 2;

				var tableCSG = new CSG();

				var tableLeg = new THREE.Mesh(new THREE.BoxGeometry(legWidth, height - thickness, legWidth), material);
				tableLeg.position.set(width / 2 - legWidth / 2 - tableLip, (height - thickness) / 2, depth / 2 - legWidth / 2 - tableLip);
				tableCSG.union([tableTop, tableLeg]);
				tableLeg.position.set(-width / 2 + legWidth / 2 + tableLip, (height - thickness) / 2, depth / 2 - legWidth / 2 - tableLip);
				tableCSG.union([tableLeg]);
				tableLeg.position.set(-width / 2 + legWidth / 2 + tableLip, (height - thickness) / 2, -depth / 2 + legWidth / 2 + tableLip);
				tableCSG.union([tableLeg]);
				tableLeg.position.set(width / 2 - legWidth / 2 - tableLip, (height - thickness) / 2, -depth / 2 + legWidth / 2 + tableLip);
				tableCSG.union([tableLeg]);

				var table = tableCSG.toMesh();
				if (position !== undefined)
					table.position.set(...position);

				return table;
			}

			function miniTelescope(rotation, position) {
				const scopeEyeWidth = 0.07;
				const scopeEndWidth = 0.15;
				const scopeLength = 1.0;
				const scopeColor = 0xD1DBDD;
				const scopeHeight = 0.20;
				const scopeSegments = 8;
				const scopeAngle = 5/4 * Math.PI / 2;
				const legRingRadius = 0.05;
				const lensColor = 0x87CEEB;
				const viewExtensionLength = 0.15;
				const viewExtensionColor = 0x262626;
				const legWidth = 0.05;
				const legAngle = 7/4 * Math.PI / 2;
				const legSideAngle = 1/5 * Math.PI / 2;
				const legColor = 0x262626;

				var teleBody = new THREE.Group();

				var teleTube = new THREE.Mesh(new THREE.CylinderGeometry(scopeEyeWidth, scopeEndWidth, scopeLength),
				                              new THREE.MeshPhongMaterial({ color: scopeColor }));

				var legRing = new THREE.Mesh(new THREE.TorusGeometry((scopeEyeWidth + scopeEndWidth) / 2 + legRingRadius / 2, legRingRadius, 16, scopeSegments),
				                             new THREE.MeshPhongMaterial({ color: legColor }));

				legRing.rotation.x = Math.PI / 2;
				legRing.position.y = -legWidth * 1.5;

				var lens = new THREE.Mesh(new THREE.SphereGeometry(scopeEndWidth * 1.4, scopeSegments, 16, 0, 2 * Math.PI, 3/4 * Math.PI, 1/4 * Math.PI),
				                          new THREE.MeshPhongMaterial({ color: lensColor, shininess: 100 }));
				lens.position.y = -scopeLength / 2 + scopeEyeWidth * 2.3;


				var viewExtension = new THREE.Mesh(new THREE.CylinderGeometry(scopeEyeWidth * 0.7, scopeEyeWidth * 1.4, viewExtensionLength),
				                                   new THREE.MeshPhongMaterial({ color: viewExtensionColor }));
				viewExtension.position.y = scopeLength / 2;
				viewExtension.position.z = -scopeEyeWidth * 0.7;
				viewExtension.rotation.x = -Math.PI / 4;

				teleBody.add(teleTube, legRing, lens, viewExtension);
				teleBody.position.y = scopeHeight + (scopeEyeWidth + scopeEndWidth) / 2;
				teleBody.rotation.x = scopeAngle;

				var teleLeg = new THREE.Mesh(new THREE.CylinderGeometry(legWidth, legWidth, scopeHeight / Math.sin(legAngle), scopeSegments),
				                             new THREE.MeshPhongMaterial({ color: legColor }));

				var telescope = new THREE.Group();
				telescope.add(teleBody);
				
				teleLeg.rotation.x = legAngle;
				telescope.add(teleLeg.clone());
				teleLeg.position.z -= scopeHeight * scopeHeight * 1/Math.tan(legAngle) * 1/Math.tan(legAngle);
				teleLeg.position.x = legWidth * 1.5;
				teleLeg.rotation.x = -legAngle;
				teleLeg.rotation.z = -legSideAngle;
				telescope.add(teleLeg.clone());
				teleLeg.position.x = -legWidth * 1.5;
				teleLeg.rotation.z = legSideAngle;
				telescope.add(teleLeg.clone());

				telescope.rotation.y = rotation * Math.PI / 2;
				if (position !== undefined)
					telescope.position.set(...position);
				return telescope;
			}

			function swivelChair(rotation, position) {
				const seatColor = 0x585058;
				const seatWidth = 0.70;
				const seatDepth = 0.50;
				const seatThickness = 0.10;
				const backrestHeight = 0.80;
				const backrestAngle = 1/5 * Math.PI / 2;
				const armrestHeight = 0.30;
				const armrestAngle = 1/10 * Math.PI / 2;
				const baseColor = 0xD1DBDD;
				const basePointsCount = 10;
				const baseRadius = 0.25;
				const baseHeight = 0.4;
				const baseTubeWidth = 0.05;

				var seat = new THREE.Group();

				var leatherMaterial = new THREE.MeshPhongMaterial({ color: seatColor });
				var bottomPillow = new THREE.Mesh(new THREE.BoxGeometry(seatWidth, seatThickness, seatDepth), leatherMaterial);
				bottomPillow.position.y = baseHeight;

				var backrest = new THREE.Group();
				var backrestBody = new THREE.Mesh(new THREE.BoxGeometry(seatWidth, backrestHeight, seatThickness), leatherMaterial);
				var backrestRound = new THREE.Mesh(new THREE.CylinderGeometry(seatThickness / 2, seatThickness / 2, seatWidth), leatherMaterial);
				backrestRound.rotation.z = Math.PI / 2;
				backrestRound.position.y = backrestHeight / 2;
				backrest.add(backrestBody, backrestRound.clone());
				backrestRound.position.y = -backrestHeight / 2;
				backrest.add(backrestRound.clone());

				backrest.position.y = baseHeight + backrestHeight / 2;
				backrest.position.z = -seatDepth / 2 - backrestHeight / 2 / Math.tan(Math.PI / 2 - backrestAngle);
				backrest.rotation.x = -backrestAngle;

				var armrest = new THREE.Group();
				var armrestBody = new THREE.Mesh(new THREE.BoxGeometry(seatThickness, armrestHeight, seatDepth), leatherMaterial);
				var armrestVertRound = new THREE.Mesh(new THREE.CylinderGeometry(seatThickness / 2, seatThickness / 2, seatDepth), leatherMaterial);
				armrestVertRound.rotation.x = Math.PI / 2;
				var armrestHorRound = new THREE.Mesh(new THREE.CylinderGeometry(seatThickness / 2, seatThickness / 2, armrestHeight), leatherMaterial);
				armrestHorRound.position.z = -seatDepth / 2;
				var armrestRoundCaps = new THREE.Mesh(new THREE.SphereGeometry(seatThickness / 2 * 0.99, 8, 8), leatherMaterial);
				armrestRoundCaps.position.z = -seatDepth / 2;
				
				armrestVertRound.position.y = armrestHeight / 2;
				armrestRoundCaps.position.y = armrestHeight / 2;
				armrest.add(armrestBody, armrestHorRound, armrestVertRound.clone(), armrestRoundCaps.clone());
				armrestVertRound.position.y = -armrestHeight / 2;
				armrestRoundCaps.position.y = -armrestHeight / 2;
				armrest.add(armrestVertRound.clone(), armrestRoundCaps.clone());

				armrest.position.y = baseHeight + armrestHeight / 2;

				seat.add(bottomPillow, backrest);
				armrest.position.x = -seatWidth / 2;
				armrest.rotation.z = armrestAngle;
				seat.add(armrest.clone());
				armrest.position.x = seatWidth / 2;
				armrest.rotation.z = -armrestAngle;
				seat.add(armrest.clone());

				var basePoints = [];
				for (var x = 0; x < baseRadius; x += baseRadius / basePointsCount) {
					basePoints.push(new THREE.Vector2(-baseRadius + x - baseTubeWidth, Math.exp(x / baseRadius * 5 - 5 + 2) * baseHeight / 7.3));
				}
				var base = new THREE.Mesh(new THREE.LatheGeometry(basePoints),
				                          new THREE.MeshPhongMaterial({ color: baseColor }));

				var swivelChair = new THREE.Group();
				swivelChair.add(seat, base);

				swivelChair.rotation.y = rotation * Math.PI / 2;
				if (position !== undefined)
					swivelChair.position.set(...position);
				return swivelChair;
			}



			/*
			 * Сцена
			 */

			/* Външни стени */
			var frontDoor = hNewGroup([
				wall(6, 0, [doorHole(1.5,0,0)]),
			], [5, 0, 5]);

			var wall1 = hNewGroup([
				wall(2.20, 1),
			], [2, 0, 5.90]);

			var wall2 = hNewGroup([
				wall(8, 0),
			], [-2, 0, 7]);

			var wall3 = hNewGroup([
				wall(11, -1, [doubleWindowHole(4,0,0), doubleWindowHole(1,0,0), doubleWindowHole(-3,0,0)]),
			], [-6, 0, 1.5]);

			var wall4 = hNewGroup([
				wall(8, 2, [doubleDoorHole(-0.5,0,0)]),
			], [-2, 0, -4]);

			var wall5 = hNewGroup([
				wall(1.20, 1),
			], [2, 0, -3.4]);

			var wall6 = hNewGroup([
				wall(6, 2),
			], [5, 0, -3]);

			var wall7 = hNewGroup([
				wall(8, 1, [doubleWindowHole(1,0,0),windowHole(2,0,0)]),
			], [8, 0, 1]);

			/* Вътрешни стени */

			var wall8 = hNewGroup([
				wall(3, 0), wall(1.414, -0.5, [], [-2,0,-0.5]), wall(4, -1, [doorHole(0,0,0)], [-2.5,0,-3])
			], [6.5,0,2]);

			var wall9 = hNewGroup([
				wall(8, 0),
			], [-2,0,1]);

			var wall10 = hNewGroup([
				wall(8, 1, [doubleDoorHole(-2,0,0), doubleDoorHole(2,0,0)])
			], [2, 0, 1]);

			var wall11 = hNewGroup([
				wall(5, 1, [doorHole(-1,0,0)]),
			], [-3, 0, -1.5]);

			/* Стаи */

			var livingRoom = hNewGroup([
				table(1, 1.5, 1, [-3.3,0,1.5]), miniTelescope(1, [-3.0,1.25,1.5]), swivelChair(-0.2, [1, 0, -2]),
			], [-2,0,4]);



			/*
			 * Добавяне на групи в сцената
			 */
			groups.forEach((group) => scene.add(group));
		</script>
		
	</body>
</html>