2. Getting Started

Overview

In this exercise, we will set up a scene with a rotating box. You will learn how to set up a renderer and link the canvas element. In addition, you will learn how to set up a scene, camera and basic geometry.

Getting Started Codepen: https://codepen.io/xrclub/full/Yzewggp

Getting Started Tutorial

Let’s get started by setting up the renderer, scene and camera inside the ‘constructor’ method. This is the initialising function for the class.

Here are the instructions:

1. initialize renderer, scene and camera
2. add lighting
3. add time variable
4. create start() method
5. create update() method

Step 1: initialize renderer, scene and camera

The GettingStarted class constructor gets called each time a new instance of the class is created.

RENDERER: Creates a new WebGL renderer that draws the 3D scene to an HTML canvas element with the id bg. Set the pixel ratio to the device pixel ratio and size to the window’s inner width and height.

SCENE: Creates a new empty scene where all the 3D objects will be placed. The scene contains all objects (like the sphere), lights, and cameras that are needed to render the final image.

CAMERA: Sets up a perspective camera with a field of view of 45 degrees, an aspect ratio of the window’s width divided by its height, and near and far clipping planes at 1 and 1000 respectively. The camera’s position is then set to (0,0,10).

// Class for the experiment
class GettingStarted {
  constructor(){
    // RENDERER //////////////////////////////////////////////////
    // Set up the renderer
    this.renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    // SCENE /////////////////////////////////////////////////
    // Create an empty scene
    this.scene = new THREE.Scene();

    // CAMERA ////////////////////////////////////////////////
    // Create camera
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

    // Position camera
    this.camera.position.set( 0, 0, 10 );
  }

Step 2: add ambient and directional lights

Staying within the constructor() method, after the line that sets the camera position, add in the lighting for the scene.

LIGHTS: Add an AmbientLightProbe for ambient lighting and a DirectionalLight for directional lighting.

// LIGHTS 
/////////////////////////////////////////////////
// Set up ambient light 
const ambientLight = new THREE.AmbientLightProbe(0xffffff, 0.5);
this.scene.add(ambientLight);
    
// Set up directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(1,0,0);
  this.scene.add(directionalLight);

Step 3: add time variable

Continue within the constructor() method.

ANIMATION TIME: Add a time variable for storing the animation time.

// Initialize the time variable for animation purposes
this.time = 0;

Step 4: create start() method

The start() method sets up the 3D composition.

SET UP: Create BoxGeometry and MeshStandardMaterial for the cube.

CUBE CREATION: Use Mesh() to combine the geometry and material to form an object.

ROTATION: Tilt the cube slightly along the X-axis for a better viewing angle.

ADD TO SCENE: Lastly, add the cube to the scene.

 //Starting the composition ( only called once at the start ) ///////////////////////////////////////
start(){
    // BUILDING THE COMPOSITION //////////////////////////////////////////////
    // Create a cube geometry and a material
    const cubeGeometry = new THREE.BoxGeometry( 2, 2, 2 );
    const cubeMaterial = new THREE.MeshStandardMaterial( {
        color: 0xffffff
    } );
    // Create a cube object mesh
    this.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    // Tilt the cube slightly for better viewing
    this.cube.rotateX(0.3);
    // Remember to add the cube object to the scene
    this.scene.add( this.cube );
  }

Step 5: create update() method

The update() method updates the composition for every frame.

ROTATE CUBE: Rotate the cube around the Y-axis according to the time elapsed since the last frame (dt). Do this continuously by adding dt to the cube’s rotation about its y-axis.

RENDER: Renders the scene from the perspective of the camera.
Note: The dt parameter passed to the update() function represents the time elapsed since the last call to update(), in seconds. This should be close to 0.016 if the rendering is at 60 frames per second (FPS). This is used to ensure smooth animation regardless of the actual FPS.

 // Updating the composition ( called every frame, 60fps) put animation / interaction here 
 // dt - time elapsed since last call to update function, in seconds. Should be close to 0.016 if the rendering is at 60FPS
  //////////////////////////////////////////
  update(dt){
    // Increment cube rotation by dt for continuous rotation
    this.cube.rotation.y += dt;
    // Render the scene to the screen ( draw it to the screen )
    this.renderer.render(this.scene, this.camera);
  }

Result

See the Pen Getting Started by XR Club (@xrclub) on CodePen.