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

[CT404]: Add extra Week 3 lecture example

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2024-09-28 01:21:00 +01:00
parent 38b9e2f2b2
commit 5f64feda8d
2 changed files with 183 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-20-controllable-desk-lamp.html Normal file
View File

@ -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>

3
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html
View File

@ -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>