diff options
| Commit | 1507f3b1c71d670e618ce615f681e4e796080d20 (patch) | |
|---|---|---|
| Author | 2022-12-16 23:25:51 +0200 | |
| Committer | 2022-12-16 23:25:51 +0200 | |
| Files | fab4a70e16e3cc4166a36e6539aa4529dbd62f26 | |
| uni-projects-1507f3b1c71d670e618ce615f681e4e796080d20.tar uni-projects-1507f3b1c71d670e618ce615f681e4e796080d20.tar.gz uni-projects-1507f3b1c71d670e618ce615f681e4e796080d20.zip | ||
| Parent | 169f7ba1ce459dad1a816fda52c06f7582f36883 (diff) | |
[OKG/HW10] Solved 10th homework
1 files changed, 151 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics Fundamentals/Practicum Homework/a10.html | 151 |
diff --git a/Year 2/Computer Graphics Fundamentals/Practicum Homework/a10.html b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a10.html new file mode 100644 index 0000000..dd3c31e --- /dev/null +++ b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a10.html @@ -0,0 +1,151 @@ +<html>
+ <head>
+ <style>
+ body { margin: 0; }
+ canvas { width: 100%; height: 100% }
+ </style>
+ </head>
+ <body>
+ <script src="three.min.js"></script>
+ <script src="CSG.js"></script>
+ <script>
+ var renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.setAnimationLoop( drawFrame );
+ renderer.shadowMap.enabled = true;
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+ document.body.appendChild( renderer.domElement );
+
+ var scene = new THREE.Scene();
+
+ var aspect = window.innerWidth/window.innerHeight;
+ var camera = new THREE.PerspectiveCamera( 30, aspect );
+ // camera.position.set( 0, 1200, 0 );
+ // camera.lookAt( new THREE.Vector3(0, 0, -1) );
+ camera.position.set(0, 10, 0);
+ var cameraLook = new THREE.Vector3(0, 10, 1);
+
+
+
+ var groundShape = new THREE.Shape();
+ groundShape.moveTo(-31, 142);
+ groundShape.lineTo(8, 142);
+ groundShape.lineTo(38, 164);
+ groundShape.lineTo(65, 151);
+ groundShape.lineTo(103, 204);
+ groundShape.lineTo(152, 214);
+ groundShape.lineTo(154, 201);
+ groundShape.lineTo(189, 152);
+ groundShape.lineTo(208, 123);
+ groundShape.lineTo(162, 111);
+ groundShape.lineTo(168, 91);
+ groundShape.lineTo(136, 90);
+ groundShape.lineTo(154, 30);
+ groundShape.lineTo(146, 6);
+ groundShape.lineTo(197, -38);
+ groundShape.lineTo(194, -95);
+ groundShape.lineTo(175, -74);
+ groundShape.lineTo(142, -88);
+ groundShape.lineTo(150, -112);
+ groundShape.lineTo(138, -121);
+ groundShape.lineTo(132, -142);
+ groundShape.lineTo(150, -152);
+ groundShape.lineTo(52, -246);
+ groundShape.lineTo(-11, -226);
+ groundShape.lineTo(-86, -276);
+ groundShape.lineTo(-100, -314);
+ groundShape.lineTo(-163, -286);
+ groundShape.lineTo(-116, -242);
+ groundShape.lineTo(-129, -213);
+ groundShape.lineTo(-70, -132);
+ groundShape.lineTo(-56, -136);
+ groundShape.lineTo(-26, -93);
+ groundShape.lineTo(-55, -87);
+ groundShape.lineTo(-80, -62);
+ groundShape.lineTo(-141, -92);
+ groundShape.lineTo(-162, -64);
+ groundShape.lineTo(-106, -20);
+ groundShape.lineTo(-142, 5);
+ groundShape.lineTo(-236, -8);
+ groundShape.lineTo(-252, 146);
+ groundShape.lineTo(-240, 169);
+ groundShape.lineTo(-106, 266);
+ groundShape.lineTo(-112, 162);
+ groundShape.lineTo(-64, 175);
+ groundShape.lineTo(-62, 201);
+ groundShape.lineTo(-24, 197);
+
+ var extrudeSettings = { depth: 3, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 0.1, bevelThickness: 0.1 };
+ var ground = new THREE.Mesh(new THREE.ExtrudeGeometry( groundShape, extrudeSettings ),
+ new THREE.MeshPhongMaterial({ color: 'green' }));
+ ground.rotation.x = -Math.PI / 2;
+ ground.receiveShadow = true;
+
+ var uni = new THREE.Mesh(new THREE.BoxGeometry(28, 10, 20),
+ new THREE.MeshPhongMaterial({ color: 'gray' }));
+ uni.position.set(42, 5, -111);
+ uni.rotation.y = Math.PI / 4;
+ uni.castShadow = true;
+ scene.add(uni);
+
+ var mosque = new THREE.Mesh(new THREE.BoxGeometry(10, 12, 10),
+ new THREE.MeshPhongMaterial({ color: 0xdec687 }));
+ mosque.position.set(-181, 6, -30);
+ mosque.castShadow = true;
+ scene.add(mosque);
+
+ var founders = new THREE.Mesh(new THREE.BoxGeometry(30, 20, 30),
+ new THREE.MeshPhongMaterial({ color: 0xcdc1c1 }));
+ founders.position.set(-101, 10, 47);
+ founders.rotation.y = Math.PI / 4;
+ founders.castShadow = true;
+ scene.add(founders);
+
+ var lake = new THREE.Mesh(new THREE.BoxGeometry(40, 3, 50),
+ new THREE.MeshPhongMaterial({ color: 0x9cc0f9 }));
+ lake.position.set(66, 2, 159);
+ lake.rotation.y = -Math.PI / 4;
+ scene.add(lake);
+
+
+
+ scene.add(ground);
+
+ var light = new THREE.PointLight(0xffffff, 0.5);
+ light.position.set(0,200,0);
+ light.castShadow = true;
+ light.target = ground;
+ scene.add(light);
+
+ var ambient = new THREE.AmbientLight(0xffffff, 0.25);
+ scene.add(ambient);
+
+
+ const MOVE_SPEED = 1.5;
+ const ROTATION_SPEED = 0.05;
+ addEventListener("keydown", (event) => {
+ switch (event.key) {
+ case 'ArrowUp':
+ camera.position.x -= MOVE_SPEED * Math.sin(camera.rotation.y);
+ camera.position.z -= MOVE_SPEED * Math.cos(camera.rotation.y);
+ break;
+ case 'ArrowDown':
+ camera.position.x += MOVE_SPEED * Math.sin(camera.rotation.y);
+ camera.position.z += MOVE_SPEED * Math.cos(camera.rotation.y);
+ break;
+ case 'ArrowLeft':
+ camera.rotation.y += ROTATION_SPEED;
+ break;
+ case 'ArrowRight':
+ camera.rotation.y -= ROTATION_SPEED;
+ break;
+ }
+ });
+
+ function drawFrame()
+ {
+ renderer.render( scene, camera );
+ }
+ </script>
+ </body>
+</html>
|