Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Meet with me
in November
10 minutes
Robot = function(x, y, z) {
// create head, neck, and torso
var fromhelper = HELPER.cylinderSkeletonMesh( 3, 5, 'blue');
var geometry = fromhelper[0];
var material = fromhelper[1];
var bones = fromhelper[2];
var mesh = new THREE.SkinnedMesh( geometry, material );
var skeleton = new THREE.Skeleton( bones );
mesh.add( bones[0] );
mesh.bind( skeleton );
this.root = bones[ 0 ]; // invisible anchor point
this.root.position.set( x, y, z );
this.head = bones[ 1 ];
this.neck = bones[ 2 ];
this.neck.position.y = -10;
this.torso = bones[ 3 ];
this.torso.position.y = -30;
this.body_mesh = mesh;
// end of head, neck, torso
// start of left arm
var fromhelper = HELPER.cylinderSkeletonMesh( 3, 5, 'blue');
var geometry = fromhelper[0];
var material = fromhelper[1];
var bones = fromhelper[2];
var mesh = new THREE.SkinnedMesh( geometry, material );
var skeleton = new THREE.Skeleton( bones );
mesh.add( bones[0] );
mesh.bind( skeleton );
this.neck.add( bones[ 0 ] ); // invisible anchor point
this.left_upperarm = bones[ 1 ];
this.left_upperarm.position.x = 5;
this.left_upperarm.position.y = -5;
this.left_lowerarm = bones[ 2 ];
this.left_lowerarm.position.x = 5;
this.left_lowerarm.position.y = -15;
this.left_hand = bones[ 3 ];
this.left_hand.position.x = 5;
this.left_hand.position.y = -5;
this.leftarm_mesh = mesh;
//end of left arm
// TODO right arm, left leg, right leg
this.movement = null;
};
Robot.prototype.show = function(scene) {
scene.add(this.body_mesh);
scene.add(this.leftarm_mesh);
// TODO add other body part meshes
};
Robot.prototype.raise_left_arm = function() {
this.movement = 'raise left arm';
};
Robot.prototype.lower_left_arm = function() {
this.movement = 'lower left arm';
};
Robot.prototype.kick = function() {
this.movement = 'kick';
};
Robot.prototype.dance = function() {
this.movement = 'dance';
};
Robot.prototype.onAnimate = function() {
if (this.movement == 'raise left arm') {
var T = Math.PI;
this.left_upperarm.quaternion.slerp( new THREE.Quaternion(Math.sin(-T/2), // w
0, // x
0, // y
Math.cos(-T/2)), // z
0.1 );
} else if (this.movement == 'lower left arm') {
this.left_upperarm.quaternion.slerp( new THREE.Quaternion(0, 0, 0, 1),
0.1 );
} else if (this.movement == 'kick') {
// check if slerp reached almost the end
if (this.right_upperleg.quaternion.w < 0.72) {
// signal that the kick is done and the leg should move back
this.movement = 'kick done';
} else {
var T = -Math.PI/2;
this.right_upperleg.quaternion.slerp( new THREE.Quaternion( Math.sin( T / 2 ), // x
0, // y
0, // z
Math.cos( T / 2 ) ), // w
0.1 );
}
} else if (this.movement == 'kick done') {
// reset leg back to identity
this.right_upperleg.quaternion.slerp( new THREE.Quaternion(0,0,0,1), 0.1 );
} else if (this.movement == 'dance') {
if (typeof dancer === 'undefined') {
dancer = setInterval(function() {
//
// some random translation
//
var shakehead = 3*Math.random();
if (Math.random() < .5) {
shakehead *= -1;
}
var shakeneck = 3*Math.random();
if (Math.random() < .5) {
shakeneck *= -1;
}
var shaketorso = 3*Math.random();
if (Math.random() < .5) {
shaketorso *= -1;
}
this.head.position.x += shakehead;
this.neck.position.x += shakeneck;
this.torso.position.x += shaketorso;
//
// use actions
//
if (Math.random() < .3) {
this.raise_left_arm();
}
if (Math.random() < .3) {
this.lower_left_arm();
}
if (Math.random() < .3) {
this.kick();
}
if (Math.random() < .3) {
this.movement = 'kick done';
}
}.bind(this), 500);
}
}
};
Assignment 7
Due 11/11
usually between 0 and 1 for x,y,z
usually point away from the outside of a surface
Normals
used for Material
used for Lighting
used for Shading
Normals
V1
V2
V3
V4
V6
V5
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
Vertex
/ Vertices
Face
Face
N1 (x, y, z)
N2 (x, y, z)
Face
Normals
V1
V2
V3
V4
V6
V5
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
Vertex
/ Vertices
Face
Face
N1 (x, y, z)
N2 (x, y, z)
Vertex
N3 (x, y, z)
N6 (x, y, z)
N5 (x, y, z)
N4 (x, y, z)
No Shading
Normals
used for Material
used for Lighting
No Normals
Face Normals
Vertex Normals
V1
V2
V3
Bump Map
Normals
Pixel
var geometry = new THREE.BoxBufferGeometry( 20, 20, 20);
var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
var mesh = new THREE.Mesh( geometry, material);
Mesh File Formats
GLTF
.gltf
.glb
STL
OBJ
PLY
Collada
.dae
.stl
.ply
.obj
And more:
Stereo Lithography (STL)
solid SOMENAME
facet normal 1 0 0
outer loop
vertex 0 0 1
vertex 1 0 0
vertex 0 1 0
endloop
endfacet
facet normal 1 0 0
outer loop
vertex 0 0 1
vertex 1 1 0
vertex 1 1 1
endloop
endfacet
...
endsolid
Face 1
Face 2
Stanford Polygon File (PLY)
ply
format ascii 1.0
comment i love cs460
element vertex 4
property float x
property float y
property float z
element face 3
property list uchar int vertex_index
end_header
0 0 0
0 0 1
0 1 1
0 1 0
3 0 1 2
3 1 2 3
3 1 2 4
Vertices
Faces
Header
Wavefront Object (OBJ)
Vertices
Faces
v -0.5 -0.5 0.5
v 0.5 -0.5 0.5
v -0.5 0.5 0.5
v 0.5 0.5 0.5
v -0.5 0.5 -0.5
v 0.5 0.5 -0.5
v -0.5 -0.5 -0.5
v 0.5 -0.5 -0.5
f 1 2 4
f 1 4 3
f 3 4 6
f 3 6 5
f 5 6 8
f 5 8 7
f 7 8 2
f 7 2 1
f 2 8 6
f 2 6 4
f 7 1 3
f 7 3 8
f 7 3 5
Let's make an OBJ file
What about Three.js?
By Daniel Haehn
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.