
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.