From 6ae268800efbf1027d096b5aec7907a874963955 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 19 Nov 2022 11:25:48 +0200 Subject: [OKG/HWK2] Added tailor shop and added a function for automatic shadow cast setting --- .../Homework 2/mannequin.html | 150 +++++++++++++++++++-- 1 file 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; -- cgit v1.3.1-23-gd82d