diff options
| Commit | b989d1290c2c2ecdb13dd1ba6da1d0a888f56b75 (patch) | |
|---|---|---|
| Author | 2022-12-03 13:57:27 +0200 | |
| Committer | 2022-12-03 13:57:27 +0200 | |
| Files | f7c6db80ba5b3d3833a6ac37c15fb4bcda0f81b6 | |
| uni-projects-b989d1290c2c2ecdb13dd1ba6da1d0a888f56b75.tar uni-projects-b989d1290c2c2ecdb13dd1ba6da1d0a888f56b75.tar.gz uni-projects-b989d1290c2c2ecdb13dd1ba6da1d0a888f56b75.zip | ||
| Parent | b5efd4cb6b9814b06ea6db62e3b14ed9e3fcc9b4 (diff) | |
[OKG/HW07] Solved last practicum homework
1 files changed, 83 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics Fundamentals/Practicum Homework/a07.html | 83 |
diff --git a/Year 2/Computer Graphics Fundamentals/Practicum Homework/a07.html b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a07.html new file mode 100644 index 0000000..35dc827 --- /dev/null +++ b/Year 2/Computer Graphics Fundamentals/Practicum Homework/a07.html @@ -0,0 +1,83 @@ +<html>
+ <head>
+ <style>
+ body { margin: 0; }
+ canvas { width: 100%; height: 100% }
+ </style>
+ </head>
+ <body>
+ <script src="three.min.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( 5, 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: 0x007f00 }));
+ tablePlot.receiveShadow = true;
+ tablePlot.position.y = -0.05;
+ table.add(tablePlot);
+
+ var ball = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshPhongMaterial({ color: 0xffffff }));
+ ball.castShadow = true;
+ table.add(ball);
+
+ var racket = new THREE.Group();
+ var paddle = new THREE.Mesh(new THREE.CylinderGeometry(0.15, 0.15, 0.03, 32), new THREE.MeshPhongMaterial({ color: 0xb32d25 }));
+ paddle.castShadow = true;
+ paddle.rotation.x = Math.PI / 2;
+ racket.add(paddle);
+ var handle = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.06, 0.04), new THREE.MeshPhongMaterial({ color: 0x775a28 }));
+ handle.castShadow = true;
+ handle.position.set(-0.15, -0.15, 0);
+ handle.rotation.z = Math.PI / 4;
+ racket.add(handle);
+
+ racket.position.y = 0.5;
+ racket.position.z = tableLen / 2 + 0.015;
+ table.add(racket.clone());
+ racket.position.z *= -1;
+ racket.rotation.z = Math.PI / 2;
+ table.add(racket);
+
+
+
+ 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 amp = 0.5;
+ function drawFrame()
+ {
+ ball.position.z += 0.02 * direction;
+ ball.position.y = amp * Math.abs(Math.sin((ball.position.z / (tableLen / 2)) * Math.PI / 2));
+
+ if (Math.abs(ball.position.z) + 0.025 >= tableLen / 2) direction *= -1;
+
+ table.rotation.y += 0.005;
+ renderer.render( scene, camera );
+ }
+ </script>
+ </body>
+</html>
|