three.js
WebGL renderer
The renderer handles drawing the 3D scene using WebGL. It
targets an HTML <canvas> element to draw into. You will call
the renderer to render each frame of your scene.The scene
You can have more than one scene in a project. A scene contains
the elements you wish to show, such as lights, meshes and
particles. The renderer is supplied with a scene and camera to use
to render an image.The camera
Three.js has different camera types, including a perspective
camera and an orthographic camera, used for rendering 2D scenes
or UI elements. You’ll most often use the perspective camera when
it comes to 3D.Geometry
Geometry can be defined manually or with built-in primitives such
as planes or spheres. It can also be loaded from external 3D model
files. Geometry defines the vertices or ‘points’ of an object. Faces
created by connecting these vertices are also defined.Materials
Materials are used to texture the faces of an object’s geometry.
Attributes include things such as textures maps, colour and
opacity. Materials can be made of images, colours, shaders, videos
and more!Mesh
A mesh is the combination of geometry and materials. The mesh
object is what we would typically think of as a physical 3D object
because it has enough information to be seen.A QUICK THREE.JS
PRIMER
IN-DEPTHdefine the pixel ratio and size so it adapts to the
screen space.
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight
);
document.body.appendChild( renderer.domElement );
STEP 11: ORBIT CONTROLS
To make navigating the scene easy, enabling mouse
interaction or touch on mobile, simply add the
following code:
controls = new THREE.OrbitControls( camera, renderer.
domElement );
controls.target.set( 0, 0, 0 );
controls.update();
STEP 12: ADD SOME LIGHT
To create a 3D look you really need some type of
directional lighting. This creates the cast shadows
of objects, which gives a sense of shape and depth.
You can use classic three-point lighting (key light,
fill light, rim/hair light). To create key and fill lights
you can use directional lights. You can also use an
ambient light, to add light without direction if the
scene is too dark. For now, let’s just add a single
dramatic spot light. You can set the position, colour
and intensity of lights in three.js. You can add a spot
light using the following code:
light = new THREE.SpotLight( 0xccddff,.5 );
light.position.set(0,400,-500);
scene.add( light );
STEP 13: CREATE A SIMPLE PLANE
To see the scene and test it’s all working so far, try
adding a simple Plane object. Create the material and
a plane geometry. Use something like this normal
material, which requires no real lighting or loaded
texture to be visible. Combine these into a mesh and
add to the scene.
var mat = new THREE.MeshNormalMaterial();
mat.side = THREE.DoubleSide;
var mesh = new THREE.Mesh( new THREE.
PlaneBufferGeometry( 960, 540 ), mat);
scene.add( mesh );
STEP 14: GET A REFERENCE TO THE
VIDEO
To use the video you’ll need to get a reference to it
by using the following code. You could also add the
video element via JavaScript if you wanted and start