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

[CT404]: Add Week 2 lecture examples

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2024-09-27 20:51:51 +01:00
parent ccb97f986d
commit 4fd9d77214
10 changed files with 52527 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
year4/semester1/CT404: Graphics & Image Processing/materials/24_01_Intro_2D_Graphics_Canvas_upload.pdf → year4/semester1/CT404: Graphics & Image Processing/materials/week1/24_01_Intro_2D_Graphics_Canvas_upload.pdf
View File

0
year4/semester1/CT404: Graphics & Image Processing/materials/24_02_Intro_3D_Graphics_Threejs.pdf → year4/semester1/CT404: Graphics & Image Processing/materials/week2/24_02_Intro_3D_Graphics_Threejs.pdf
View File

3214
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/GLTFLoader.js Normal file
View File

File diff suppressed because it is too large Load Diff

44
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-1-hello_cube.html Normal file
View File

@ -0,0 +1,44 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph
var scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 600/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 100;
// add a light to the scene
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 30, 25);
scene.add(light);
// add a cube to the scene
var geometry = new THREE.BoxGeometry(20, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xfd59d7});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

76
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-2-primitives_galore.html Normal file
View File

@ -0,0 +1,76 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
var scene;
function addGeometryAtPosition(geometry, x, y, z) {
var material = new THREE.MeshLambertMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(x,y,z);
}
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph (global variable)
scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 400/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 100;
// add a light to the scene
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 0, 25);
scene.add(light);
// add a bunch of sample primitives to the scene
// see more here: https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
// args: width, height, depth
addGeometryAtPosition(new THREE.BoxGeometry(6,4,8), -50, 0, 0);
// args: radius, segments
addGeometryAtPosition(new THREE.CircleBufferGeometry(7, 24), -30, 0, 0);
// args: radius, height, segments
addGeometryAtPosition(new THREE.ConeBufferGeometry(6, 4, 24), -10, 0, 0);
// args: radiusTop, radiusBottom, height, radialSegments
addGeometryAtPosition(new THREE.CylinderBufferGeometry(4, 4, 8, 12), 20, 0, 0);
// arg: radius
// Polyhedrons
// (Dodecahedron is a 12-sided polyhedron, Icosahedron is 20-sided, Octahedron is 8-sided, Tetrahedron is 4-sided)
addGeometryAtPosition(new THREE.DodecahedronBufferGeometry(7), 40, 0, 0);
addGeometryAtPosition(new THREE.IcosahedronBufferGeometry(7), -50, 20, 0);
addGeometryAtPosition(new THREE.OctahedronBufferGeometry(7), -30, 20, 0);
addGeometryAtPosition(new THREE.TetrahedronBufferGeometry(7), -10, 20, 0);
// args: radius, widthSegments, heightSegments
addGeometryAtPosition(new THREE.SphereBufferGeometry(7,12,8), 20, 20, 0);
// args: radius, tubeRadius, radialSegments, tubularSegments
addGeometryAtPosition(new THREE.TorusBufferGeometry(5,2,8,24), 40, 20, 0);
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

68
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-3-nested-hut.html Normal file
View File

@ -0,0 +1,68 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph
var scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 600/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(0, 10, 30);
// add a light to the scene
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 10, 30);
scene.add(light);
// add a cylinder ('hut walls')
// args: radiusTop, radiusBottom, height, radialSegments
var walls = new THREE.Mesh(
new THREE.CylinderBufferGeometry(4, 4, 4, 12),
new THREE.MeshLambertMaterial({color: 0x800020}) );
scene.add(walls);
// add a cone ('hut roof')
// args: radius, height, segments
var roof = new THREE.Mesh(
new THREE.ConeBufferGeometry(6, 4, 24),
new THREE.MeshLambertMaterial({color: 0x800080}) );
///scene.add(roof); // not needed, since roof will be added as a child of walls
roof.position.set(0, 4, 0);
// set the roof as a child of the walls, i.e. nest their coordinate systems
walls.add(roof);
// move the walls.. and their nested roof! (try it with the previous line removed)
walls.position.set(0,-5,0);
// clone the walls object and its children
// and move the cloned "hut" to a new (random) position
var hut2 = walls.clone();
scene.add(hut2);
var x = (Math.random()-0.5)*15;
var y = (Math.random()-0.5)*15;
var z = (Math.random()-0.5)*15;
hut2.position.set(x,y,z);
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

57
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-4-rotated-cylinders.html Normal file
View File

@ -0,0 +1,57 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph
var scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 600/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(0, 10, 30);
// add a light to the scene
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 10, 30);
scene.add(light);
// add a cylinder
// args: radiusTop, radiusBottom, height, radialSegments
var cyl = new THREE.Mesh(
new THREE.CylinderBufferGeometry(1, 1, 10, 12),
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
scene.add(cyl);
// clone the cylinder
var cyl2 = cyl.clone();
// modify its rotation by 60 degrees around its z axis
cyl2.rotateOnAxis(new THREE.Vector3(0,0,1), Math.PI/3);
scene.add(cyl2);
// clone the cylinder again
var cyl3 = cyl.clone();
scene.add(cyl3);
// set its rotation directly using "Euler angles", to 120 degrees on z axis
cyl3.rotation.set(0,0,2*Math.PI/3);
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

80
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-5-partial-desk-lamp.html Normal file
View File

@ -0,0 +1,80 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph
var scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 600/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(0, 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);
// 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();
// centre of rotation we want
// (in world coordinates, since pivot is not yet a child of the base)
pivot.position.set(0, 0, 0);
pivot.add(arm); // pivot is parent of arm
base.add(pivot); // base is parent of pivot
// translate arm relative to its parent, i.e. 'pivot'
arm.position.set(0, 1.5, 0);
// rotate pivot point relative to its parent, i.e. 'base'
pivot.rotateOnAxis(new THREE.Vector3(0,0,1), -Math.PI/6);
// clone a second arm piece (consisting of a pivot with a cylinder as its child)
var pivot2 = pivot.clone();
// add as a child of the 1st pivot
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);
// TEST: we can rotate the 1st arm piece and the 2nd arm piece should stay correct
pivot.rotateOnAxis(new THREE.Vector3(0,0,1), Math.PI/12);
// TEST: we can also move the base, and everything stays correct
base.position.x -= 3;
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

61
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/Threejs-6-alien-spaceship.html Normal file
View File

@ -0,0 +1,61 @@
<html>
<head>
<script src="three.js"></script>
<script>
'use strict'
function draw() {
// create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph
var scene = new THREE.Scene();
// create a camera
var fov = 75;
var aspect = 600/600;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(0, 10, 30);
// add a light to the scene
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 10, 30);
scene.add(light);
// "fuselage"
// args: radius, widthSegments, heightSegments
var fuselage = new THREE.Mesh(
new THREE.SphereBufferGeometry(7,12,8),
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
scene.add(fuselage);
fuselage.scale.set(2, 0.2, 0.5);
// "wing"
// args: radiusTop, radiusBottom, height, radialSegments
var wing = new THREE.Mesh(
new THREE.CylinderBufferGeometry(4, 4, 1, 60),
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
scene.add(wing);
wing.scale.set(0.5, 0.2, 3);
// use a scaled coordinate system to modify clones of the fuselage and wing
var scaledGroup = new THREE.Object3D();
scaledGroup.add(fuselage.clone());
scaledGroup.add(wing.clone());
scaledGroup.scale.set(0.25, 1.5, 0.75);
scene.add(scaledGroup);
// render the scene as seen by the camera
renderer.render(scene, camera);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

48927
year4/semester1/CT404: Graphics & Image Processing/materials/week2/examples/three.js Normal file
View File

File diff suppressed because one or more lines are too long