From 5f64feda8d24a82ab3db6765b22548f51de2f8be Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Sat, 28 Sep 2024 01:21:00 +0100
Subject: [PATCH] [CT404]: Add extra Week 3 lecture example

---
 .../Threejs-20-controllable-desk-lamp.html    | 183 ++++++++++++++++++
 ...imationExample1_withSmootherAnimation.html |   3 -
 2 files changed, 183 insertions(+), 3 deletions(-)
 create mode 100644 year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-20-controllable-desk-lamp.html
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-20-controllable-desk-lamp.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-20-controllable-desk-lamp.html
new file mode 100644
index 00000000..14ce3692
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-20-controllable-desk-lamp.html	
@@ -0,0 +1,183 @@
+<html>
+
+<head>
+
+    <script src="../../week2/examples/three.js"></script>
+    <script>
+
+        'use strict'
+
+        var raycaster, renderer, scene, camera;
+        var selectedObject = null;
+        var selectableObjects = [];
+        var lastMousePos = {x: 0, y: 0};
+
+        function draw() {
+            // create renderer attached to HTML Canvas object
+            var c = document.getElementById("canvas");
+            renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
+
+            // create the scenegraph 
+            scene = new THREE.Scene();
+
+            // create a camera
+            var fov = 75;
+            var aspect = 600 / 600;
+            var near = 0.1;
+            var far = 1000;
+            camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+            camera.position.set(-5, 1.5, 6);
+
+            // add a light to the scene
+            var light = new THREE.PointLight(0xFFFFFF);
+            light.position.set(0, 10, 30);
+            scene.add(light);
+
+            // desk lamp base
+            // args: radiusTop, radiusBottom, height, radialSegments
+            var base = new THREE.Mesh(
+                new THREE.CylinderBufferGeometry(1, 1, 0.1, 12),
+                new THREE.MeshLambertMaterial({color: 0xAAAAAA}));
+            scene.add(base);
+            base.position.set(-5, -2, 0);
+            selectableObjects.push(base);
+            base.canTranslate = true; // I added this property
+
+            // desk lamp first arm piece
+            var arm = new THREE.Mesh(
+                new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12),
+                new THREE.MeshLambertMaterial({color: 0xAAAAAA}));
+
+            // since we want to rotate around a point other than the arm's centre,
+            // we can create a pivot point as the parent of the arm, position the
+            // arm relative to that pivot point, and apply rotation on the pivot point
+            var pivot = new THREE.Object3D();
+            pivot.position.set(0, 0, 0); // centre of rotation we want
+            pivot.add(arm); // pivot is parent of arm
+            base.add(pivot); // base is parent of pivot
+            selectableObjects.push(arm);
+            arm.canRotate = true; // I added this property
+
+            //    translate arm relative to pivot point
+            arm.position.set(0, 1.5, 0);
+            //    rotate pivot point relative to the world
+            pivot.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 6);
+
+            // second arm piece (consisting of a pivot with a cylinder as its child)
+            var pivot2 = pivot.clone();
+            pivot.add(pivot2);
+            // rotate the 2nd pivot relative to the 1st pivot (since it's nested)
+            pivot2.rotation.z = Math.PI / 3;
+            // translate the 2nd pivot relative to the 1st pivot
+            pivot2.position.set(0, 3, 0);
+            var arm2 = pivot2.children[0];
+            selectableObjects.push(arm2);
+            arm2.canRotate = true; // I added this property
+
+            // args: radius, height, segments
+            var lampshade = new THREE.Mesh(
+                new THREE.ConeBufferGeometry(1, 0.7, 24),
+                new THREE.MeshLambertMaterial({color: 0xAAAAAA})
+            );
+            var shadePivot = new THREE.Object3D();
+            pivot2.add(shadePivot); // lampshade pivot is a child of the 2nd arm pivot
+            shadePivot.add(lampshade);
+            shadePivot.position.set(0, 3, 0);
+            shadePivot.rotation.x = Math.PI;
+            selectableObjects.push(lampshade);
+            lampshade.canRotate = true; // I added this property
+
+            raycaster = new THREE.Raycaster();
+
+            c.onmousedown = handleMouseDown;
+            c.onmousemove = handleMouseMove;
+            c.onmouseup = function (e) {
+                selectedObject = null;
+            };
+
+            animate();
+        }
+
+        function animate() {
+            setTimeout(animate, 1000 / 60);
+
+            // render the scene as seen by the camera
+            renderer.render(scene, camera);
+        }
+
+        function handleMouseDown(e) {
+            // handle mouse-clicks on the canvas
+            // did the user click a mesh?
+            /* note that 0,0 is the centre of the canvas according to WebGL, 
+                and the canvas extends from (-1,-1) to (1,1)
+                but 0,0 is the top-left of the canvas according to e.clientX,e.clientY, 
+                and the canvas extends from (0,0) to (599,599)
+            */
+            var x = 2 * (e.clientX - 300) / 600;
+            var y = -2 * ((e.clientY - 300) / 600);
+
+            lastMousePos.x = x;
+            lastMousePos.y = y;
+
+            // set up and apply the raycaster (we are returned an array of intersection objects)
+            raycaster.setFromCamera({x: x, y: y}, camera);
+            var intersects = raycaster.intersectObjects(selectableObjects);
+            if (intersects.length > 0) {
+                var closestObj, closestDist;
+
+                for (var i = 0; i < intersects.length; i++) {
+                    /*
+                            An intersection has the following properties :
+                                    - object : intersected object (THREE.Mesh)
+                                    - distance : distance from ray start to intersection (number)
+                                    - face : intersected face (THREE.Face3)
+                                    - faceIndex : intersected face index (number)
+                                    - point : intersection point (THREE.Vector3)
+                                    - uv : intersection point in the object's UV coordinates (THREE.Vector2)
+                    */
+
+                    if (i == 0 || intersects[i].distance < closestDist) {
+                        closestObj = intersects[i].object;
+                        closestDist = intersects[i].distance;
+                    }
+                }
+
+                selectedObject = closestObj;
+            }
+            else
+                selectedObject = null;
+        }
+
+        function handleMouseMove(e) {
+            if (selectedObject != null) {
+                var x = 2 * (e.clientX - 300) / 600;
+                var y = -2 * ((e.clientY - 300) / 600);
+                // dx,dy is the amount the mouse just moved by in pixels
+                var dx = x - lastMousePos.x;
+                var dy = y - lastMousePos.y;
+
+                if (selectedObject.canRotate) {
+                    // rotate the parent ('pivot') that the object is a child of
+                    selectedObject.parent.rotation.x += dx;
+                    selectedObject.parent.rotation.z += dy;
+                }
+                else if (selectedObject.canTranslate) {
+                    // translate the object 
+                    selectedObject.position.x += dx * 4;
+                    selectedObject.position.z -= dy * 4;
+                }
+
+                lastMousePos.x = x;
+                lastMousePos.y = y;
+            }
+        }
+    </script>
+</head>
+
+<body onload="draw();">
+    <!-- Note that the canvas has been positioned precisely at 0,0 so that mouse positions on the browser
+    are the same as mouse positions on the canvas -->
+    <canvas id="canvas" width="600" height="600" style="position:absolute; left:0px; top:0px"></canvas>
+</body>
+
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html
index 00e0a31a..1d6cb4a8 100644
--- a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html	
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html	
@@ -1,5 +1,4 @@
 <html>
-
 <head>
     <script>
         var x = 0, y = 0;
@@ -45,9 +44,7 @@
         }
     </script>
 </head>
-
 <body onload="draw();">
     <canvas id="canvas" width="600" height="600"></canvas>
 </body>
-
 </html>
