1. BEGIN THREE.JS
Yi-Fan Liao
Special thanks to 3D modelers @shrimp & @yushen

2. http://mrdoob.github.com/three.js/

3. DEMO LINK
http://begeeben.github.io/begin-threejs/

4. SOURCE CODE
https://github.com/begeeben/begin-threejs

5. A SIMPLE EXAMPLE

6. RENDERER
var
renderer
=
new
THREE.WebGLRenderer();
renderer.setSize(
window.innerWidth,
window.innerHeight
);
document.body.appendChild(
renderer.domElement
);

7. SCENE
var
scene
=
new
THREE.Scene();

8. CAMERA
//
new
THREE.PerspectiveCamera(fov,
aspect,
near,
far)
var
camera
=
new
THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight,
0.1,
1000);
camera.position.set(0,
0,
5);

9. PERSPECTIVE
CAMERA
鏡頭與焦距與視⾓角
fov
far
near
aspect = width/height

10. OBJECT
var
geometry
=
new
THREE.CubeGeometry(1,1,1);
var
material
=
new
THREE.MeshBasicMaterial({
color:
0x199509
});
var
mesh
=
new
THREE.Mesh(geometry,
material);
scene.add(mesh);

11. RENDER()
function
render()
{
requestAnimationFrame(render);
mesh.rotation.x
+=
0.01;
mesh.rotation.y
+=
0.01;
renderer.render(scene,
camera);
}
render();
requestAnimationFrame for Smart Animating
Better JavaScript animations with requestAnimationFrame

12. CAMERAS
Cameras on OpenGL ES 2.x – The ModelViewProjection Matrix

13. ADD TEXTURE

14. TEXTURE
MAP
var
geometry
=
new
THREE.CubeGeometry(1,1,1);
//
Load
image
and
create
texture.
var
imgUrl
=
'images/jumper.jpg';
var
map
=
THREE.ImageUtils.loadTexture(imgUrl);
//
For
shiny
surfaces.
var
material
=
new
THREE.MeshPhongMaterial({
map:
map
});
var
mesh
=
new
THREE.Mesh(geometry,
material);
scene.add(mesh);

15. LIGHT
//
Directional
light
affects
objects
using
MeshLambertMaterial
or
MeshPhongMaterial.
var
light
=
new
THREE.DirectionalLight(
0xffffff,
1
);
light.position.set(
0,
0,
1
);
scene.add(light);

16. LIGHTS

17. MATERIALS
Lights and Materials inThree.js
http://threejs.org/examples/webgl_materials.html
MeshBasicMaterial
MeshLambertMaterial
MeshPhongMaterial

18. LOAD A 3D MODEL

19. 3D
MODEL
//
Load
ufo
image.
var
ufoMap
=
THREE.ImageUtils.loadTexture(
'models/ufo/textures/ufo.png');
var
ufoMaterial
=
new
THREE.MeshPhongMaterial({map:ufoMap});
//
Load
ufo
3D
JSON
model.
var
ufo;
var
loader
=
new
THREE.JSONLoader();
loader.load('models/ufo/ufo.js',
function(geometry)
{
ufo
=
new
THREE.Mesh(geometry,
ufoMaterial);
scene.add(ufo);
});

20. LOADER
ColladaLoader
for
Collada(.dae):
An
XML-­‐based
schema
to
make
it
easy
to
transport
3D
assets
be-­‐tween
applications.
JSONLoader
for
JSON
Model
Format:
More
concise
and
loading
is
faster
than
using
COLLADA
because
browsers
can
load
it
directly
into
JavaScript
data
structures.
BinaryLoader
for
Binary
Model
Format:
The
binary
equivalent
to
text-­‐based
JSON
format
but
smaller
in
size.
UTF8Loader
for
UTF-­‐8
Encoded
Format:
An
even
more
economical
data
format.
SceneLoader
for
JSON
Scene
Format:
The
format
able
to
store
multiple
models
or
an
entire
scene,
including
lights,
camera...
etc.

21. MODEL CONVERSION
EXPORTERS
Blender
3DS
MAX
Maya
CONVERTERS
To
JSON
format
ctm
Autodesk
Maya
.fbx
Wavefront
.obj
To
utf8
format
utf8

22. ANIMATE A 3D MODEL

23. MORPH
EXAMPLE
//
Load
3D
model.
var
loadCounter
=
2;
function
checkLoadingComplete()
{
loadCounter
-­‐=
1;
if(loadCounter
===
0)
scene.add(boyMesh);
};
//
Textures.
//
How
the
image
is
applied
to
the
object.
var
mapping
=
new
THREE.UVMapping();
var
boyMap
=
THREE.ImageUtils.loadTexture(
'models/boy/textures/boy.png',
mapping,
checkLoadingComplete());

24. MORPH
EXAMPLE
//
Body.
var
boyMesh;
var
loader
=
new
THREE.JSONLoader();
loader.load('models/boy/boy.js',
function(geometry)
{
geometry.computeMorphNormals();
var
materialBoy
=
new
THREE.MeshPhongMaterial({
color:
0xffffff,
specular:
0x111111,
shininess:
50,
map:
boyMap,
morphTargets:
true,
morphNormals:
true,
wrapAround:
true
});
boyMesh
=
new
THREE.MorphAnimMesh(geometry,
materialBoy);
boyMesh.castShadow
=
true;
boyMesh.receiveShadow
=
true;
//
Parse
animations
in
the
model
file.
boyMesh.parseAnimations();
boyMesh.playAnimation(
geometry.firstAnimation,
30
);
checkLoadingComplete();
});

25. ANIMATIONS

26. MORPH
Morph animation example on three.js website

27. SKELETAL
ANIMATION
Skinned animation example on three.js website

28. BUILD A 3D MENU

29. TEXT
<script
src="fonts/optimer_regular.typeface.js"></script>
var
textGeometry
=
new
THREE.TextGeometry(
text,
{
...

30. MOUSE
EVENT
var
projector
=
new
THREE.Projector();
var
mouse
=
new
THREE.Vector2();
mouse.x
=
(
event.clientX
/
container.clientWidth
)
*
2
-­‐
1;
mouse.y
=
-­‐
(
event.clientY
/
container.clientHeight
)
*
2
+
1;
//
Unproject
the
screen
space
mouse
point
to
3D
world
space.
var
vector
=
new
THREE.Vector3(
mouse.x,
mouse.y,
0.5
);
//
Cast
a
ray
from
the
camera
according
to
the
vector.
var
raycaster
=
projector.pickingRay(
vector.clone(),
camera
);
//
Get
objects
that
intersects
the
ray.
var
intersects
=
raycaster.intersectObjects(
items,
true
);
if
(
intersects.length
>
0
)
{
...

31. BLEND 3D CONTENT IN HTML

32. SAMPLE SLOT GAME

33. RESOURCES
WebGL:
Up
and
Running
Tools
https://github.com/sole/tween.js
three.js
boilerplate
THREECONVERT
OSX
BATCH
EXPORTER
UTILITY
FOR
THREE.JS
MD2
to
JSON
Converter
Show
Cases
Verold
STUDIO
Simple
facial
rigging
utilizing
morph
targets
WebGL
-­‐
Three.js
+
impactJS
Tutorials
Building
the
Game:
Part
3
-­‐
Skinning
&
Animation
Verification
of
using
multiple
textures
with
three.js
cubes

34. ABOUT
廖一帆
Front End Engineer
begeeben@gmail.com
github.com/begeeben
Yi-Fan Liao
begeeben.wordpress.com/
www.facebook.com/yifan.liao