aindreas/uni
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[CT404]: Finish Assignment 1 Q2

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2024-10-15 16:32:26 +01:00
parent e978b3a998
commit c41c5d4cc7
2 changed files with 146 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/images/hobbit.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

243
year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html
View File

@ -1,84 +1,102 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<!-- This code builds on the template availble on Canvas: 'Threejs-20-controllable-desk-lamp.html' -->
<script src="./three.js"></script> <script src="./three.js"></script>
<script src="./OrbitControls.js"></script> <script src="./OrbitControls.js"></script>
<script> <script>
'use strict' 'use strict'
var raycaster, renderer, scene, camera, orbitControls, lightbulb, lampshade; // global variables
var renderer, scene, camera, orbitControls;
var lightbulb, lampshade, table, movingCube;
var cubeSpeed = 0.5;
var cubeDirection = new THREE.Vector3(1, 0, 0);
var selectedObject = null; var selectedObject = null;
var selectableObjects = []; var selectableObjects = [];
var lastMousePos = {x: 0, y: 0}; var lastMousePos = {x: 0, y: 0};
function draw() { function draw() {
// create renderer attached to HTML Canvas object setUpScene();
addDeskLamp();
addTable();
addBook();
addGlass();
addGoldBar();
addMovingCube();
animate();
}
function animate() {
setTimeout(animate, 1000 / 60);
orbitControls.update();
moveCube();
renderer.render(scene, camera);
}
function setUpScene() {
// set up scene
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
renderer.shadowMap.enabled = true;
// create the scenegraph
scene = new THREE.Scene(); scene = new THREE.Scene();
// create a camera // add mouse event handlers
var fov = 75; canvas.onmousedown = handleMouseDown;
var aspect = 600 / 600; canvas.onmousemove = handleMouseMove;
var near = 0.1; canvas.onmouseup = handleMouseUp;
var far = 1000;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // add camera
camera = new THREE.PerspectiveCamera(75, 600 / 600, 0.1, 1000);
camera.position.set(-10, 5, -2); camera.position.set(-10, 5, -2);
// add orbit controls
orbitControls = new THREE.OrbitControls(camera, canvas); orbitControls = new THREE.OrbitControls(camera, canvas);
orbitControls.enableDamping = true; orbitControls.enableDamping = true;
orbitControls.dampingFactor = 0.25; orbitControls.dampingFactor = 0.25;
orbitControls.enableZoom = true; orbitControls.enableZoom = true;
orbitControls.autoRotate = false; orbitControls.autoRotate = false;
// add ambient light
const light = new THREE.AmbientLight(0xFFFFFF); const light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light); scene.add(light);
}
// function to add the lamp to the scene
function addDeskLamp() {
// desk lamp base // desk lamp base
// args: radiusTop, radiusBottom, height, radialSegments const base = new THREE.Mesh(new THREE.CylinderBufferGeometry(1, 1, 0.1, 12), new THREE.MeshLambertMaterial({color: 0xff84a3}));
var base = new THREE.Mesh(
new THREE.CylinderBufferGeometry(1, 1, 0.1, 12),
new THREE.MeshLambertMaterial({color: 0xff84a3}));
scene.add(base); scene.add(base);
base.position.set(-5, -2, 0); base.position.set(-5, 0.05, 0);
base.canTranslate = false; // make base unmovable base.canTranslate = false; // make base unmovable
// desk lamp first arm piece // desk lamp first arm piece
var arm = new THREE.Mesh( const arm = new THREE.Mesh( new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12), new THREE.MeshLambertMaterial({color: 0x84ffa3}));
new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12),
new THREE.MeshLambertMaterial({color: 0x84ffa3}));
// since we want to rotate around a point other than the arm's centre, // 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
// we can create a pivot point as the parent of the arm, position the const pivot = new THREE.Object3D();
// arm relative to that pivot point, and apply rotation on the pivot point pivot.position.set(0, 0, 0);
var pivot = new THREE.Object3D(); pivot.add(arm);
pivot.position.set(0, 0, 0); // centre of rotation we want base.add(pivot);
pivot.add(arm); // pivot is parent of arm
base.add(pivot); // base is parent of pivot
arm.canRotate = false; arm.canRotate = false;
// translate arm relative to pivot point
arm.position.set(0, 1.5, 0); 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); pivot.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 6);
// second arm piece (consisting of a pivot with a cylinder as its child) // second arm piece (consisting of a pivot with a cylinder as its child)
var pivot2 = pivot.clone(); const pivot2 = pivot.clone();
pivot.add(pivot2); pivot.add(pivot2);
// rotate the 2nd pivot relative to the 1st pivot (since it's nested)
pivot2.rotation.z = Math.PI / 3; pivot2.rotation.z = Math.PI / 3;
// translate the 2nd pivot relative to the 1st pivot
pivot2.position.set(0, 3, 0); pivot2.position.set(0, 3, 0);
var arm2 = pivot2.children[0]; const arm2 = pivot2.children[0];
arm2.canRotate = false; arm2.canRotate = false;
// args: radius, height, segments lampshade = new THREE.Mesh( new THREE.ConeBufferGeometry(1, 0.7, 24), new THREE.MeshLambertMaterial({color: 0xff84a3}) );
lampshade = new THREE.Mesh( const shadePivot = new THREE.Object3D();
new THREE.ConeBufferGeometry(1, 0.7, 24),
new THREE.MeshLambertMaterial({color: 0xff84a3})
);
var shadePivot = new THREE.Object3D();
pivot2.add(shadePivot); // lampshade pivot is a child of the 2nd arm pivot pivot2.add(shadePivot); // lampshade pivot is a child of the 2nd arm pivot
shadePivot.add(lampshade); shadePivot.add(lampshade);
shadePivot.position.set(0, 3, 0); shadePivot.position.set(0, 3, 0);
@ -86,30 +104,73 @@
selectableObjects.push(lampshade); selectableObjects.push(lampshade);
lampshade.canRotate = true; lampshade.canRotate = true;
lightbulb = new THREE.PointLight(0xffffff, 1, 70); // add lightbulb
lightbulb = new THREE.PointLight(0xffffff, 1, 70); // point light is the light source type most like a lightbulb: single point, emits light in all directions
lightbulb.position.set(0, -0.7, 0); lightbulb.position.set(0, -0.7, 0);
lightbulb.castShadow = true;
shadePivot.add(lightbulb); shadePivot.add(lightbulb);
raycaster = new THREE.Raycaster();
canvas.onmousedown = handleMouseDown;
canvas.onmousemove = handleMouseMove;
canvas.onmouseup = handleMouseUp;
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
scene.add(box);
box.position.set(0, -5, 0);
animate();
} }
function animate() { // function to add a table to the scene
setTimeout(animate, 1000 / 60); function addTable() {
table = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
scene.add(table);
table.position.set(0, -2.5, 0);
}
orbitControls.update(); // function to add a book to the scene
function addBook() {
const coverGeometry = new THREE.BoxGeometry(6, 1.5, 8);
const coverTexture = new THREE.TextureLoader().load('./images/hobbit.jpg');
const coverMaterial = new THREE.MeshStandardMaterial({ map: coverTexture });
const book = new THREE.Mesh(coverGeometry, coverMaterial);
book.position.set(0, 0.75, 5);
scene.add(book);
}
// render the scene as seen by the camera // function to add a tapered, transparent glass to the scene
renderer.render(scene, camera); function addGlass() {
const glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
opacity: 0.3,
transparent: true,
reflectivity: 0.8,
clearcoat: 1.0,
clearcoatRoughness: 0.1
});
const glass = new THREE.Mesh(new THREE.CylinderGeometry(1, 0.7, 3, 32), glassMaterial);
glass.position.set(-8, 1.5, 5);
scene.add(glass);
}
// function to add a gold bar to the scene
function addGoldBar() {
const goldMaterial = new THREE.MeshPhongMaterial({
color: 0xffd700,
specular: 0xaaaaaa,
shininess: 30
});
const goldBar = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1), goldMaterial);
goldBar.position.set(-15, 0.5, 3);
scene.add(goldBar);
}
// function to add the cube that will be animated moving across the table
function addMovingCube() {
movingCube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshLambertMaterial({color: 0x00ff00}));
scene.add(movingCube);
movingCube.position.set(0, 2, -5);
}
// function to handle the animation and movement of the cube
function moveCube() {
movingCube.position.add(cubeDirection.clone().multiplyScalar(cubeSpeed));
if (movingCube.position.x > 28 || movingCube.position.x < -28) {
cubeDirection.x *= -1;
}
} }
// handle mouse up events // handle mouse up events
@ -119,13 +180,14 @@
orbitControls.enabled = true; orbitControls.enabled = true;
// find the position of the click // find the position of the click
let mouseUpX = 2 * (e.clientX - 300) / 600; const mouseUpX = 2 * (e.clientX - 300) / 600;
let mouseUpY = -2 * ((e.clientY - 300) / 600); const mouseUpY = -2 * ((e.clientY - 300) / 600);
// send a raycast from the clicked position and check if it intersects with the lampshade // send a raycast from the clicked position and check if it intersects with the lampshade
let lightswitchRaycaster = new THREE.Raycaster(); // while it is technically more memory-efficient to re-use raycasters rather than create new ones, i have chosen to prioritise simplicity as this program is small enough that efficiency does not really matter
const lightswitchRaycaster = new THREE.Raycaster();
lightswitchRaycaster.setFromCamera({x: mouseUpX, y: mouseUpY}, camera); lightswitchRaycaster.setFromCamera({x: mouseUpX, y: mouseUpY}, camera);
let intersects = lightswitchRaycaster.intersectObject(lampshade); const intersects = lightswitchRaycaster.intersectObject(lampshade);
// if the lampshade was clicked, toggle the lightbulb // if the lampshade was clicked, toggle the lightbulb
if (intersects.length > 0) { if (intersects.length > 0) {
@ -134,68 +196,56 @@
} }
function handleMouseDown(e) { function handleMouseDown(e) {
// handle mouse-clicks on the canvas // get coordinates of click
// did the user click a mesh? const x = 2 * (e.clientX - 300) / 600;
/* note that 0,0 is the centre of the canvas according to WebGL, const y = -2 * ((e.clientY - 300) / 600);
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.x = x;
lastMousePos.y = y; lastMousePos.y = y;
// set up and apply the raycaster (we are returned an array of intersection objects) // find what objects were clicked using a raycaster
raycaster.setFromCamera({x: x, y: y}, camera); const mouseDownRaycaster = new THREE.Raycaster();
var intersects = raycaster.intersectObjects(selectableObjects); mouseDownRaycaster.setFromCamera({x: x, y: y}, camera);
const intersects = mouseDownRaycaster.intersectObjects(selectableObjects);
// if the raycast intersected with any selectable objects, select the one nearest to the camera (the one visible)
if (intersects.length > 0) { if (intersects.length > 0) {
// disable orbit controls if an object is clicked (so it can be manipulated) // disable orbit controls if an object is clicked (so it can be manipulated)
orbitControls.enabled = false; orbitControls.enabled = false;
// loop through each intersect to find the closest object (the selected one)
var closestObj, closestDist; let closestObj, closestDist;
for (let i = 0; i < intersects.length; i++) {
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) { if (i == 0 || intersects[i].distance < closestDist) {
closestObj = intersects[i].object; closestObj = intersects[i].object;
closestDist = intersects[i].distance; closestDist = intersects[i].distance;
} }
} }
selectedObject = closestObj; selectedObject = closestObj;
} }
else else {
selectedObject = null; selectedObject = null;
} }
}
function handleMouseMove(e) { function handleMouseMove(e) {
// if an object is selected
if (selectedObject != null) { if (selectedObject != null) {
var x = 2 * (e.clientX - 300) / 600; const x = 2 * (e.clientX - 300) / 600;
var y = -2 * ((e.clientY - 300) / 600); const 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;
// dx,dy is the amount the mouse just moved by in pixels
const dx = x - lastMousePos.x;
const dy = y - lastMousePos.y;
// if the selected object can rotate, rotate it
if (selectedObject.canRotate) { if (selectedObject.canRotate) {
// rotate the parent ('pivot') that the object is a child of // rotate the parent ('pivot') that the object is a child of
selectedObject.parent.rotation.x += dx; selectedObject.parent.rotation.x += dx;
selectedObject.parent.rotation.z += dy; selectedObject.parent.rotation.z += dy;
} }
// otherwise, if the object can be translated, translate the object
else if (selectedObject.canTranslate) { else if (selectedObject.canTranslate) {
// translate the object
selectedObject.position.x += dx * 4; selectedObject.position.x += dx * 4;
selectedObject.position.z -= dy * 4; selectedObject.position.z -= dy * 4;
} }
@ -207,8 +257,7 @@
</script> </script>
</head> </head>
<body onload="draw();"> <body onload="draw();">
<!-- Note that the canvas has been positioned precisely at 0,0 so that mouse positions on the browser <!-- 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 -->
are the same as mouse positions on the canvas -->
<canvas id="canvas" width="600" height="600" style="position:absolute; left:0px; top:0px"></canvas> <canvas id="canvas" width="600" height="600" style="position:absolute; left:0px; top:0px"></canvas>
</body> </body>
</html> </html>