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);
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
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);
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.
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();
});
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
)
{
...
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