PROJECTS
Three.js
THREE.JS
CORE ELEMENTS
IN-DEPTHThe scene
The scene is a container object that encapsulates the other objects
and elements that we wish to show.Camera
Three.js has a few different camera classes, including a
Perspective camera, which we will use for 3D and an Orthographic
camera, used for rendering 2D scenes or UI elements.Renderer
The Renderer handles the display of the 3D scene using WebGL. It
targets an HTML <canvas> element to draw into. Typically you will
call the renderer to render each frame.Materials
Three.js comes with several materials, such as Normal, Basic,
Lambert, Phong and Shader. Materials are used to texture the
faces of an object’s geometry. Attributes include things such as
textures maps, colour and opacity.Geometry
Geometry defines the vertices of an object to draw it. Faces
created by these vertices are also defined, which can be filled by
a material. It can be defined manually through code or as pre-
defined primitives such as planes or spheres. It can also be loaded
from external files exported from 3D modelling software.Mesh
A mesh is the combination of a geometry and a material. This
mesh object is what we would typically think of as a physical object
because it now has enough information to be seen.easier) and run the computeFaceNormals() function,
which will recalculate the normals of the faces to
make sure light once more reflects off the mesh
faces correctly.STEP 8: MERGING GEOMETRY
Another technique you can use for customising your
geometry is to combine multiple geometries into
one. Try updating your code to look like the following
code, where you created your custom geometry in the
previous step.var geometry = new THREE.BoxGeometry( 1,1,1 );
geometry.vertices[0].y-=.5;
geometry.vertices[2].y+=.5;
geometry.vertices[4].x+=.5;
var sphereGeometry = new THREE.
SphereGeometry(.7,3,10);
var material = new THREE.MeshStandardMaterial( { color:
0xccccff } );
var ball = new THREE.Mesh(sphereGeometry, material);
geometry.merge(ball.geometry, ball.matrix);
geometry.normalize();
geometry.computeFaceNormals();We have created a new geometry, material and mesh.
Then we used the merge function on our original
geometry to combine them into one. We pass in
the geometry of our new shape and the matrix. If
you check out the result, you’ll see your custom
geometry merged with this sphere-based shape into
something new!
Try combining and manipulating the vertices
of some common shapes like cylinders, cubes and
spheres to create some quick custom shapes.STEP 9: CREATING GEOMETRY
Using built geometry and merging it with others is
great for a lot of situations. However, you may find
yourself in need of your own custom geometry that
is completely new. If it’s sufficiently complex, I’d
recommend using a 3D modelling tool like Blender
but if it’s not too complex and you can plot it out,
we’ll show you a very easy and quick way to create
new objects.
Let’s begin by making a simple two-sided triangle
as our first shape. Update your code to create your
mesh to the following:var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(0,0,0) );
geometry.vertices.push( new THREE.Vector3(0,100,0) );
geometry.vertices.push( new THREE.Vector3(0,100,100) ) ;
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 2, 1, 0 ) );