We will discuss how to use Three.js to build a basic 3D world and create some 3D interactive elements.

1.WebGL Basics

We can use some middleware to help us create complex 3D scenes, such as Three.js, we’ll be using objects with specific methods defined by the Three.js API. You can go to its official website for more information: https://threejs.org.

Three.js has optimized WebGL to generate 3D scenes. WebGL is a 3D graphics context based on OpenGL, if you are very interested in WebGL, you can also visit [https: //webglfundamentals.org](https://webglfundamentals .org/) for more information.

Of course, we also need to understand some basic knowledge, understand what is geometry/model, how to use materials, how to add texture and create mapping, how to create lighting, as well as triangles and normals.

Mr. Doob has made great contributions to the development of WebGL. He is also the author of Three.js. You can visit his website to learn about his work-https://mrdoob.com/.

2.Models

• In many cases, specifically where common forms of representation are being used (human characters for example), models are prepared outside of the rendering engine, then imported.

• In these cases, models are often groups of meshes, rather than one mesh. They may also have animations associated with them.

• In modern openGL, any element can be treated as an openGL NODE. Nodes can have parents, and children.

• Transforms affecting parents also affect children.

• You can have lots of children - e.g. lots of body parts.

• So you can think of models as groups of nodes organised in a hierarchy.

• A model can also have all the features we are discussion today, baked in to the model for when you load it in the engine.

• These features include parameters that say how they will react to lighting such as materials, normals), bump maps, and textures etc.

• They will also have specific information about how the model can be deformed.

• The entire package is a Resource.

• We’re going to be using basic geometry with Three.js

• But there’s nothing stopping you from using models if you want.

• You can create, load, save and export models using Blender, which is a really fantastic piece of software:

• https://www.blender.org/

3.Three.js

We need to create some standard objects, to help us build a 3D scene:

var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
// We need to create a scene and add things to it.   
var scene = new THREE.Scene();
// Now we are goint to create some built in geometry 
// It's a box.    
var geometry = new THREE.BoxGeometry(200, 200, 200);
// We are going to want to texture the box.
// To do this we need a texture loader object to load the texture 
var myTextureLoader = new THREE.TextureLoader();
// Then we can load the texture into a variable
var myTexture = myTextureLoader.load('sgpic10.jpg');
// Now we need to create a material
// This defines how the surface of the object reflects light
// We're using Phong. There are lots of other types.      
var material = new THREE.MeshPhongMaterial({map: myTexture});
// We can now create a mesh using the geomentry and the material
var mesh = new THREE.Mesh(geometry, material);
// If we want to see stuff, we will need a light.
// The argument is the colour of the light in hexadecimal.      
var light = new THREE.DirectionalLight("rgb(255,255,255)");
// Now we can create our renderer. Thiis renders the scene. 
      
// There are lots of different kinds of renderers. 
// They also have a lot of parameters!!
var renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

4.Lighting

Three.js is based on WebGL, and can have lots of lights. OpenGL is limited to only 8, but you can create as many as you like using shaders :-) You can create and position various lights to illuminate a scene. You can also adjust the ‘material’ properties of a 3D shape, to change how the object reacts to light.

These lights have various parameters, but basically they throw simulated light rays onto the scene. You can control how they do this very precisely.

There are 3 main lighting approaches in WebGL:

• Ambient Light - the average emission from all sources in the scene.
• Diffuse Light - directional light cast by a light source.
• Specular Light - directional light that reflects off an object.
• Ambient Light - this is flat shaded.
• Diffuse Light - this makes it possible to create the illusion of depth when combined with ambient light.
• Specular Light - this is the ‘shininess’ of the reflected light - can result in a highlight on an object, and infers something about the material being used.

There is also emissive light - which is related to the colour of the object you are lighting. In Three.js, there are lots of lighting options.

5.Normals

A Normal is a vector perpendicular to the surface either from the surface centre, the vertex, or the object centre. Normals tell the renderer which direction the object or surface is facing. If the vertex Normal is pointing away from the viewer, you might not see the surface…

We can invert normals very easily in Three.js, do this be specifying which side is the surface; we can do this when we set the material properties.

Material.side = THREE.BackSide, or Material.side = THREE.DoubleSide

The Vertex normal is the unit vector of the vertex position - the origin, this is because the unit vector of the vertex contains the direction that the vertex is going.

6.Bump Maps, Textures and Environments

Bump maps are pretty great, they give the effect of altering the geometry by simply adjusting the direction of the normal. This makes the light reflect differently, just as if the geometry was a different shape.

Texture mapping is the most powerful method of creating coloured surfaces. A texture needs to be uploaded to the graphics card. Once there, you can bind it to the scene, draw with it, then unbind it, you can then bind a second texture in the same draw loop if you wish. This allows you to generate multi-textured scenes, you can also load textures very easily and apply them to meshes.

When making 3D scenes, we use lights to generate more realistic looking environments. In the example we’ve seen, there’s an object lit with a texture, but we don’t have a sky. The easiest method for generating a sky is to do the following:

• Create a cube;
• Invert the normals so that they point inwards, not outwards (sometimes you don’t need to do this).
• Make the cube very large, so that it fills the screen in all directions.
• texture map it with some sky.

This object is called a skybox, they are super efficient, and you should use them.

Three.js dynamic geometry examples with triangle rendering.