Want to keep learning?

This content is taken from the Pompeu Fabra University Barcelona's online course, 3D Graphics for Web Developers. Join the course to learn more.

Skip to 0 minutes and 18 seconds Hello everyone and welcome to the lesson in which we’re finally going to write some code. The API we’re using to make our 3D applications is three.js. It’s almost certainly the most popular API for creating web-based 3D applications, and it basically is a high-level API over the WebGL API, which is the lower-level OpenGL equivalent, which allows direct access to the graphics hardware, which enables us to create all these fantastic 3D programs. You can download three.js from the website, threejs.org, or the GitHub site, and I’ve already done that and I’ve placed it in the js directory, so here in my <head> I’m just going to very quickly source that in the js directory and it’s “three.min.js”.

Skip to 1 minute and 15 seconds Ok, so now I’m gonna delete the Hello World that I had there and just before my final <body> tag, I’m going to create an empty script area, and this is where I’m gonna start to write some code. Now then, pretty much every single 3D application, whether it’s a retracing application used in the cinema or a game engine or a little 3D application here in the web needs to have three or four things that exist in order to draw the 3D graphics onto the screen.

Skip to 1 minute and 55 seconds The first thing you need to have is some sort of description of the scene, so the objects in the scene itself; you need to have some sort of camera which tells you where the location of the point of view is; and you need to have something that converts the scene and the camera links in together and draws the pixel on the screen. And we’re gonna call that the renderer, and the renderer is the thing that really draws the actual colour on the screen, right? And then, you might be familiar with, in the web, the ways animation usually in modern browsers is used to request animation frame API.

Skip to 2 minutes and 35 seconds So what I’m gonna do is, I’m gonna create a function here called render, and what “render” does is that, at the end of “render”, I’m just gonna call the browser that we “requestAnimationFrame”, which is part of the window and the API, and I’m gonna pass the code back to “render”. And so what this does now is that every time the web browser wants to redraw the frame, it will call this function render before, just before it finishes and goes to the next frame, so we’re always always always gonna execute this function around about 70 frames per second.

Skip to 3 minutes and 14 seconds And then we’re gonna create a function here called “init”, which is just a setup function if you’d like, and here we’re gonna initialise everything, and at the very end of “init” we’re gonna call “render”. So, we’re gonna call “init” to start off with, and at the end of “init”, everything inside “init” is gonna be executed once, and then we’re gonna call “render”, and render will be executed, usually at 60 frames per second cause that is the cap that most browsers put on for animation, like at lower than 60 frames per second will come down if we start sort of moving some hefty 3D graphics on the screen, but for the time being it’s capped at 60 frames per second, cause we’re gonna have a very simple scene to start off with.

Skip to 3 minutes and 56 seconds I’m gonna initialise the application by calling “init”, first at the end, so that’s our very basic setup. And we’ve created three variables up here, so now we need to actually create them and initialise them, I’m gonna do that in “init”. The scene is a very simple one, we just type in “scene = new THREE.scene”. I’m gonna be adding objects to this scene, as in when we go programming, but for now we’ll leave it like that. And then we need to create the camera and then create the renderer. That requires a little bit more code. So what I’m gonna do, I’m gonna create two new functions up here, “function createRenderer”,

Skip to 4 minutes and 36 seconds and here we can just initialise the setup, so “renderer = new THREE.WebGLRenderer”. three.js does support other renderers, but the most powerful one for our purposes is the Web.GL renderer, and we’re just gonna set the background colour to be nice and black.

Skip to 5 minutes and 0 seconds You can pass any colour you want. We’re gonna pass the HEX code for black, and with full transparency, or rather no transparency should I say. And we’re just gonna set the size of our renderer to the size of the window. You could, later on if you wanted to, add some code which detected window being resized, so you automatically change the size of the rendered screen. What it’s basically doing is creating a screen, if you like, into which we’re gonna paint the pixels of our projected 3D graphics. And we’re setting the size of that screen to the size of the window that we have here of our browser. Then we have another function down here called “createCamera”,

Skip to 5 minutes and 55 seconds and what we’re gonna do here is just set up the basic properties of the camera you want to create. So “new = THREE.PerspectiveCamera”. You can have an autographic camera, but the perspective camera makes a more realistic projection onto our screen. And we’re gonna set a field of view of 45 degrees, we’re gonna set the aspect ratio to be the width divided by the height,

Skip to 6 minutes and 28 seconds and we’re gonna set what are called the far and near clip planes. Let’s not really worry about what these numbers mean right now, but it basically means that we’re gonna draw everything that’s between 0.1 of a unit and a 1000 units away from the camera, and anything that lies outside of that window is gonna draw. Don’t worry about these numbers for the time being, we’re just gonna leave them as they are and then we come back to them later. Then we need to set the camera’s position, so we’re gonna say “camera.position.x = 15”, we’re just gonna set some up between numbers here which I’ve chosen because they fit very nicely with the following examples. “16” and finally “camera.position.z = 13”.

Skip to 7 minutes and 14 seconds And the last thing is due is just say in which direction the camera should be pointing. You know, obviously the camera has a position and it has an orientation. So we’re gonna say “camera.lookAt”. There’s a nice function in three.js called “lookAt”, and we’re gonna ask it to point to the “scene.Position”. The “scene.Position” is basically the centre of the scene object we should’ve created here above. And by default that’s gonna be 0 0 0, so it’s in the middle of our 3D world.

Skip to 7 minutes and 42 seconds Now we need to call these functions, down here in ”init”, so down here we’re gonna go “createRenderer”, and we’re gonna go “createCamera”, and we’re gonna set the scene, and we need to add one more line of code here actually, we need to actually render the scene, so in the render loop, what this loop is doing here is that we’re calling, recalling the loop every 60 frames per second, but we need to actually tell the renderer to draw the scene to the screen with the camera that we created, so we’re gonna say “renderer.render(scene, camera)”. And the final thing we need to do is just append the renderer to the dom.

Skip to 8 minutes and 30 seconds So here in “init”, we’re only gonna do it once, we just add append rather.

Skip to 8 minutes and 41 seconds The renderer has a property called “domElement”,

Skip to 8 minutes and 48 seconds and now if we go here and refresh we see a black screen, which is good news cause it means that our renderer is drawing a black screen to the browser. And that’s the end of this lesson, I hope you followed it and I’ll see you on the next one.

Implementing a basic 3D scene

In this video, Alun explains how you can use Three.js to write your code. Three.js is an Application Programming Interface (API) that allows you to create 3D graphics in a web browser. It uses WebGL and runs in all web browsers supported by WebGL.

We start with three basic variables:

  • scene
  • camera
  • renderer

Alun explains how to use these variables in several functions. These set up the basic conditions you need to start coding 3D graphics.

If you do this correctly, you will end with a black screen… but not to worry! In the next step, you will learn how to add 3D objects and light.

Remember you can download Three.js and the source code for this step in the zip file located in Step 3.1.

If you would like to explore more information about Three.js, we hope the following links will be useful.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Get a taste of this course

Find out what this course is like by previewing some of the course steps before you join: