diff options
| Commit | 96fd548ff23753073bcb3c8d430ce78efda8f0b6 (patch) | |
|---|---|---|
| Author | 2022-12-07 10:11:52 +0200 | |
| Committer | 2022-12-07 10:11:52 +0200 | |
| Files | d49e08dc23782442bc9800238b30c1b122fa21f5 | |
| uni-projects-96fd548ff23753073bcb3c8d430ce78efda8f0b6.tar uni-projects-96fd548ff23753073bcb3c8d430ce78efda8f0b6.tar.gz uni-projects-96fd548ff23753073bcb3c8d430ce78efda8f0b6.zip | ||
| Parent | b989d1290c2c2ecdb13dd1ba6da1d0a888f56b75 (diff) | |
[OKG/HW08] Solved practicum homework
1 files changed, 124 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics Fundamentals/Practicum Homework/a08.html | 124 |
diff --git a/Year 2/Computer Graphics Fundamentals/Practicum Homework/a08.html b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a08.html new file mode 100644 index 0000000..1186ca0 --- /dev/null +++ b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a08.html @@ -0,0 +1,124 @@ +<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( 4, 3, 0 );
+ camera.lookAt( new THREE.Vector3(0, 0.35, 0) );
+
+
+
+ var table = new THREE.Group();
+ const tableLen = 3;
+ var tablePlot = new THREE.Mesh(new THREE.BoxGeometry(2, 0.05, tableLen), new THREE.MeshPhongMaterial({ color: 0x966F33 }));
+ tablePlot.receiveShadow = true;
+ tablePlot.position.y = -0.05;
+ table.add(tablePlot);
+
+ var cupCSG = new CSG();
+ var cupOuter = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 0.5, 32));
+ var cupInner = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.5, 32));
+ cupInner.position.y = 0.05;
+ cupCSG.subtract([cupOuter, cupInner]);
+
+ var cup = cupCSG.toMesh();
+ cup.material = new THREE.MeshLambertMaterial({ color: 0xf6feff, transparent: true, opacity: 0.7 });
+ cup.position.y = 0.25;
+
+ var water = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.35, 32),
+ new THREE.MeshLambertMaterial({ color: 0x40a4df, transparent: true, opacity: 0.8 }));
+ water.position.y = 0.05 + 0.175;
+ var iceCube = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1),
+ new THREE.MeshLambertMaterial({ color: 'white', transparent: true, opacity: 0.9 }));
+ iceCube.position.y = 0.05 + 0.35;
+
+ var cup1 = new THREE.Group();
+ cup1.add(cup.clone());
+ cup1.add(water.clone());
+ var iceCube1 = iceCube.clone();
+ cup1.add(iceCube1);
+ cup1.position.z = tableLen / 2 - 0.25;
+
+ var cup2 = new THREE.Group();
+ cup2.add(cup);
+ cup2.add(water);
+ var iceCube2 = iceCube;
+ cup2.add(iceCube2);
+ cup2.position.z = -cup1.position.z;
+
+ scene.add(cup1);
+ scene.add(cup2);
+
+
+
+
+ scene.add(table);
+
+ var light = new THREE.PointLight(0xffffff, 0.25);
+ light.position.set(1,4,0);
+ light.castShadow = true;
+ light.target = table;
+ scene.add(light);
+
+ var ambient = new THREE.AmbientLight(0xffffff, 0.5);
+ scene.add(ambient);
+
+ var direction = 1;
+ const movementFrames = 200;
+ var cup1Vec = -0.03;
+ var cup2Vec = cup1Vec * -1;
+ var iceCubeCup1Vec = 0.005;
+ var iceCubeCup2Vec = iceCubeCup1Vec * -1;
+
+ scene.rotation.y = Math.PI / 8;
+ var frame = 0;
+ function drawFrame()
+ {
+ cup1.position.z += cup1Vec;
+ if ((0.01 < iceCube1.position.z && iceCubeCup1Vec < 0) || (iceCube1.position.z < 0.13 && iceCubeCup1Vec > 0))
+ iceCube1.position.z += iceCubeCup1Vec;
+ if (cup1.position.z <= 0.25) {
+ cup1Vec *= -1;
+ iceCubeCup1Vec *= -1;
+ }
+ if (cup1Vec > 0)
+ cup1Vec *= Math.exp((-frame % movementFrames) / movementFrames / 2);
+ if (iceCubeCup1Vec < 0)
+ iceCubeCup1Vec *= Math.exp((-frame % movementFrames) / movementFrames / 7);
+
+ cup2.position.z += cup2Vec;
+ if ((0.01 > iceCube2.position.z && iceCubeCup2Vec > 0) || (iceCube2.position.z > -0.13 && iceCubeCup2Vec < 0))
+ iceCube2.position.z += iceCubeCup2Vec;
+ if (cup2.position.z >= -0.25) {
+ cup2Vec *= -1;
+ iceCubeCup2Vec *= -1;
+ }
+ if (cup2Vec < 0)
+ cup2Vec *= Math.exp((-frame % movementFrames) / movementFrames / 2);
+ if (iceCubeCup2Vec > 0)
+ iceCubeCup2Vec *= Math.exp((-frame % movementFrames) / movementFrames / 7);
+
+ // scene.rotation.y += 0.005;
+ renderer.render( scene, camera );
+ frame++;
+ }
+ </script>
+ </body>
+</html>
|