This document provides an overview of creating 3D graphics using the Three.js library. It describes the basic structure of a Three.js application including creating a scene, camera, and renderer. It also explains how to add objects like a cube to the scene, animate the cube by incrementally changing its rotation, and customize properties like color, size and rotation speed. The goal is to introduce the fundamentals needed to get started with Three.js and create simple animated 3D graphics in a web application.

1. COMP340: COMPUTER GRAPHICS
TOPIC 4: THREE.JS BASICS
J M Githeko

2. LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Describe the architecture of a three.js application.
2. Create a simple animated graphic in three.js
3. Implement interaction with a graphic object in three.js

3. INTRODUCTION
• Three.js is an API for creating interactive 3D web graphics.
• It is built on top of WebGL which is itself OpenGL on top of
Javascript.
• It is much easier to create graphics with three.js than WebGL
• You need to have some Javascript basics to understand
three.js code.
• You can catch up on Javascript using the W3schools
Javascript tutorial.

4. STRUCTURE OF THREE.JS

5. THREE.JS
SCENE GRAPH

6. SCENE GRAPH (CONT'D)
• It contains essentially:
• a scene and
• a camera with a renderer.
• A renderer draws the whole scene from the point of view of
the camera.
• The scene contains graphic objects that you define and add.

7. Essential Features
• There are API calls to:
• create a scene,
• declare a renderer and
• define the camera parameters
• The camera parameters specify the viewing frustum by indicating the
field of view, the aspect ratio and the near and far frustum faces.
• In addition to defining the scene-graph, you can define animation and
create interactivity to be able to manipulate the graphics objects with
your pointing device or other input device.

8. Three.js Camera Parameter
• Vertical FOV – Field
of View
• Distance to Near and
Far frustum faces
• Aspect Ration (x/y)

9. BASIC REQUIREMENTS

10. Requirements
• A three.js application is a web application which runs on a
web server. You need to set up a web server to run the
examples in this topic.

11. Requirements (cont'd)
To display anything with three.js, we need three things:
• Scene: The scene is the root of scene-graph which is a tree data structure
that contains all the elements of your 3D graphics. It is initially empty. You
add graphics elements to it and connect them together to create the
scene-graph.
• Camera: This has been explained in section 5.1
• Renderer: A Renderer renders (draws) the portion of the 3D scene that is
inside the frustum of the camera as a 2D image to a canvas. The camera
defines the frustum parameters: field of view, aspect ratio, near and far
faces.
• Once these basics are set up, you can add objects and define their
behaviour.

12. MECHANICS OF CREATING A THREE.JS APP
• Create HTML container
• To create a scene, use the following function:
const scene = new THREE.Scene();
• To create a perspective camera:
const camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 1000 );
Parameters are:
• FOV
• Aspect Ratio
• Near Face
• Far Face

13. Cont'd
• To create a renderer:
const renderer = new THREE.WebGLRenderer();
• Set size of renderer window:
renderer.setSize(window.innerWidth, window.innerHeight);
• To display the rendered object, you need to add the renderer to the
HTML <canvas> element with the following call:
document.body.appendChild(renderer.domElement);

14. DRAW A CUBE

15. • In three.js, drawing objects is done with geometry function.
• Adding colour is done with material functions.
• You combine the geometry and the material in a mesh.
• Three.js uses triangular meshes to create objects.

16. CUBE (CONT'D)
To create the cube, you use the following three calls:
const geometry = new THREE.BoxGeometry();//CREATES
CUBE
const material = new THREE.MeshBasicMaterial( {
color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
• Default size (1,1,1)
• Default origin is (0,0.0)

17. • To move camera so it is not inside the cube:
camera.position.z = 5; //z should not be zero

18. ANIMATE THE CUBE

19. Animate (cont'd)
• To animate the cube, you create a function to carry out the
animation.
• Within this function (in this example, it is called animate()) call
the Javascript requestAnimationFrame() function which
refreshes the object every time the browser refreshes the screen
(usually 60 Hz).
So you will create the following:
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

20. Cont'd
• This will display the cube but no change will occur from frame
to frame, so the cube will appear stationary. To cause the cube
to rotate, you need to indicate the incremental change in
position for each new frame.
Do the following:
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01; //x rotation increment
cube.rotation.y += 0.01; //y rotation increment
renderer.render( scene, camera );
};
animate();

21. Cont'd
• rotation.x indicates the amount of angular
rotation around the x axis (0.01 radians) per
refresh cycle.
• Similarly rotation.y and rotation.z will rotate
around the y and z axes in radians.

22. Customise Colour, Size, Speed
• The following statement will create a cube twice the default
size:
• const geometry = new THREE.BoxGeometry(2,2,2);
• The following statement will produce a purple cube
(red/blue):
• const material = new THREE.MeshBasicMaterial( { color:
0xff00ff } );
• Issuing the following rotation parameters will include
rotation around the z-axis:
• cube.rotation.x += 0.01;
• cube.rotation.y += 0.01;
• cube.rotation.z += 0.01;

23. The End
•Questions?
• Next session:
•INTERACTIONS