Assignment 4
Grading in the works!
Assignment 5
Due Monday!
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
with T = Pi/2
0
0
1
2 Pi
Pi
Pi/2
1.5 Pi
90°
1
1
-2
2
2
-1
Frame of Reference
X
Y
Z
World Frame
Frame of Reference
X
Y
Z
Object Frame
Frame of Reference
X
Y
Z
Object Frame
Frame of Reference
X
Y
Z
Eye Frame
Camera
(Eye)
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
rotation around Z
cos(T/2)
sin(T/2) * 0
sin(T/2) * 0
sin(T/2) * 1
Matrix
Quaternion
var m = new Float32Array( [
Math.cos(T), Math.sin(T), 0, 0,
-Math.sin(T), Math.cos(T), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
var q = new Float32Array( [
Math.cos(T/2),
Math.sin(T/2)*0,
Math.sin(T/2)*0,
Math.sin(T/2)*1
]);
var q = new Float32Array( [
Math.sin(T/2)*0,
Math.sin(T/2)*0,
Math.sin(T/2)*1,
Math.cos(T/2)
]);
w
x
y
z
1 0 0 0
0 cos(T) -sin(T) 0
0 sin(T) cos(T) 0
0 0 0 1
rotation around X
cos(T/2)
sin(T/2) * 1
sin(T/2) * 0
sin(T/2) * 0
Matrix
Quaternion
cos(T) 0 sin(T) 0
0 1 0 0
-sin(T) 0 cos(T) 0
0 0 0 1
rotation around Y
cos(T/2)
sin(T/2) * 0
sin(T/2) * 1
sin(T/2) * 0
Matrix
Quaternion
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
Identity
1
0
0
0
Matrix
Quaternion
w
x
y
z
-1
0
0
0
Quaternion
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
with T = Pi/2
0
0
1
2 Pi
Pi
Pi/2
1.5 Pi
-1
-2, 2, 2
cos(T/2)
sin(T/2) * 0
sin(T/2) * 0
sin(T/2) * 1
Quaternion
w
x
y
z
~0.7
~0.7
0
0
Pi/2 / 2
~0.7
0
0
~0.7
0
2
2
2
w
x
y
z
*
Quaternion
?
~0.7
0
0
~0.7
0
2
2
2
*
~0.7
- 0
- 0
- ~0.7
Inverse
page 64, Gortler: 3D Computer Graphics
~0.7
0
0
~0.7
0
2
2
2
w
x
y
z
*
Quaternion
~0.7
0
0
~0.7
0
2
2
2
*
~0.7
- 0
- 0
- ~0.7
Inverse
page 64, Gortler: 3D Computer Graphics
0
- 2
2
2
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
with T = Pi/2
0
0
1
2 Pi
Pi
Pi/2
1.5 Pi
-1
-2, 2, 2
cos(T/2)
sin(T/2) * 0
sin(T/2) * 0
sin(T/2) * 1
Quaternion
w
x
y
z
~0.7
~0.7
0
0
Rigid Body Transformation
Quaternion
Translation Vector
w
x
y
z
x
y
z
0
var q = new THREE.Quaternion( x, y, z, w );SLERP!
spherical linear interpolation
<html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
var mesh = null;
window.onload = function() {
scene = new THREE.Scene();
fov = 75;
ratio = window.innerWidth / window.innerHeight;
zNear = 1;
zFar = 10000;
// console.log(ratio);
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 100);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
//
// The invisible plane
//
geometry = new THREE.PlaneGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});
invisible_plane = new THREE.Mesh( geometry, material );
scene.add( invisible_plane );
//
//
//
controls = new THREE.TrackballControls( camera, renderer.domElement );
animate();
//
// ACTION!
//
totalObjects = 0;
renderer.domElement.onmouseup = function(e) {
if (!e.shiftKey) {
e.preventDefault();
return false;
}
console.log('yes! you clicked!');
pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
console.log('Pixel coordinates', pixel_coords);
vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
-( pixel_coords.y / window.innerHeight ) * 2 + 1);
console.log('Viewport coordinates', vp_coords);
vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject(invisible_plane);
// choose random geometry
random_geometry = Math.floor((Math.random() * 6));
switch(random_geometry) {
case 0:
geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
break;
case 1:
geometry = new THREE.BoxGeometry( 20, 20, 20 );
break;
case 2:
geometry = new THREE.SphereGeometry(20,20,10);
break;
case 3:
geometry = new THREE.OctahedronGeometry(20);
break;
case 4:
geometry = new THREE.ConeGeometry(20,10);
break;
case 5:
geometry = new THREE.RingGeometry( 1, 20, 32 );
}
random_geometry += 1
// choose random color
colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
random_color = colors[Math.floor((Math.random() * colors.length))];
material = new THREE.MeshStandardMaterial({ color: random_color });
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)
scene.add(mesh);
totalObjects += 1;
console.log('Total objects', totalObjects);
};
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html><html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
var mesh = null;
var all_meshes = [];
window.onload = function() {
scene = new THREE.Scene();
fov = 75;
ratio = window.innerWidth / window.innerHeight;
zNear = 1;
zFar = 10000;
// console.log(ratio);
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 100);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
//
// The invisible plane
//
geometry = new THREE.PlaneGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});
invisible_plane = new THREE.Mesh( geometry, material );
scene.add( invisible_plane );
//
//
//
controls = new THREE.TrackballControls( camera, renderer.domElement );
animate();
//
// ACTION!
//
totalObjects = 0;
renderer.domElement.onmousemove = function(e) {
if (!e.shiftKey) {
e.preventDefault();
return false;
}
console.log('yes! you clicked!');
pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
console.log('Pixel coordinates', pixel_coords);
vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
-( pixel_coords.y / window.innerHeight ) * 2 + 1);
console.log('Viewport coordinates', vp_coords);
vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject(invisible_plane);
// choose random geometry
random_geometry = Math.floor((Math.random() * 6));
switch(random_geometry) {
case 0:
geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
break;
case 1:
geometry = new THREE.BoxGeometry( 20, 20, 20 );
break;
case 2:
geometry = new THREE.SphereGeometry(20,20,10);
break;
case 3:
geometry = new THREE.OctahedronGeometry(20);
break;
case 4:
geometry = new THREE.ConeGeometry(20,10);
break;
case 5:
geometry = new THREE.RingGeometry( 1, 20, 32 );
}
random_geometry += 1
// choose random color
colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
random_color = colors[Math.floor((Math.random() * colors.length))];
material = new THREE.MeshStandardMaterial({ color: random_color });
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)
scene.add(mesh);
all_meshes.push(mesh);
totalObjects += 1;
console.log('Total objects', totalObjects);
};
};
function animate() {
requestAnimationFrame( animate );
if (mesh != null) {
for(m in all_meshes) {
mesh = all_meshes[m];
q = new THREE.Quaternion( 0, Math.sin(Math.PI/2),0, Math.cos(Math.PI/2) );
mesh.quaternion.slerp( q, 0.01 );
}
}
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>Arcball
Trackball
Controls
Natural Feeling
Spins twice as fast
Completely path independent
Arcball
Trackball
Natural Feeling
Spins twice as fast
Completely path independent
Arcball
Trackball
Quiz today!
submit your music