Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js.
The Renderer
The first thing we need to do is create a renderer. Because Three.js supports multiple renderers we need to specify WebGLRenderer. Using WebGL, we need to have a canvas element in the DOM. There are multiple ways to do this. One is by accessing the renderer.domElement, then appending it to the document. The other is by passing the canvas element already in your DOM into the renderer as the canvas parameter.
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);The renderer is also where you set some key properties of your Three.js scene. This is where we can set the clear/background color, the size of our renderer, and the pixel aspect ratio for higher density displays.
var renderer = new THREE.WebGLRenderer({canvas: myCanvasElement});
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
In order to draw into our renderer we need two objects it uses to draw. A camera and a scene. The renderer will then draw the provided scene view from the perspective of the provided camera.
The Camera
The camera defines the properties which result in the viewport into our scene, like position, field of view, and perspective. There are different types of cameras, PerspectiveCamera defines a traditional camera with perspective. This is in contrast to the OrthographicCamera, which creates an isometric rendering without perspective. The PerspectiveCamera takes several parameters. The first is the field of view, from the bottom to the top of the viewable area in degrees. The second parameter is the aspect ratio, the camera’s viewable width divided by the viewable height. The next two parameters are the near and far, which specify the closest and furthest point at which items are clipped, or out of the camera’s view.
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
The Scene
The scene is the root container of all the objects rendered by Three.js. Objects and lights must be added into the scene to be rendered.
var scene = new THREE.Scene();
The Object
Next we need to add something to our scene. We’re going to keep it simple and add a basic cube mesh. A mesh consists of geometry and a material. To create a cube’s geometry we need to use BoxGeometry which takes the three dimensions of the box as the first three parameters. For the material we will use MeshBasicMaterial which draws an un-shaded single color. Then we combine these into a Mesh set it’s position and add it to our scene.
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
Back To The Renderer
In order to actually draw our scene we need to call render on the renderer and pass in the scene and camera object.
renderer.render(scene, camera);This will draw the scene once, in order to continue drawing and updating elements in your scene you can call render in a loop or within a requestAnimationFrame request to synchronize it with the browser’s paint loop.
Click here to download the demo.
Note: these examples were created using Three.js v79. Three.js is known to update frequently and sometimes cause breaking changes to the API so it may be worth checking the version you are using.