Getting Started

Description

In this exercise, we set up a scene with a Box Geometry. You will learn how to set up the renderer and link to the HTML canvas tag. In addition, you will learn how to set up a scene, camera and basic geometry.

Tutorial

The first thing we get started with is setting up our renderer, scene and camera in our “start” function. This is the initializing function in our class.

// Class for the experiment
class GettingStarted {
  
  //Starting the composition ( only called once at the start ) ///////////////////////////////////////
  start(){
    
    // RENDERER //////////////////////////////////////////////////
    //Setting 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 /////////////////////////////////////////////////
    //Creating an empty scene
    this.scene = new THREE.Scene();

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

    // Setting Camera positon
    this.camera.position.set( 0, 0, 10 );
    this.scene.add(this.camera);

Now that our scene is set up, a good practice is to next add the lights before adding any objects.

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