3D Images In JavaScript — Three.JS
I’m sure many of you have seen websites that are displaying 3D images. Even farther, people created games with it like the ones from here: https://freefrontend.com/three-js-games/. What surprised me was that these applications are build entirely through JavaScript code! To be more precise, it used a JavaScript library called Three.JS that enables features that adds and manipulate 3D objects and images. Today, I will show the basic of how this library works.
Before you begin, make sure you have Node.js installed in your machine by typing this into your console:
node -v
This command will basically show you the current version of Node.js that you’re using. If you don’t get any results like the image, it is most likely means that you don’t have Node.js installed. You can download Node.js from the official site: https://nodejs.org/en/. If you do have Node.js installed onto your computer, let’s proceed!
There are two ways to use Three.JS library, either installing Three.JS library or create a new file with this code inside: https://threejs.org/build/three.js, then import from the file. For this example, I will just use second option. Here’s my file structure looks like:
Then, I’m going to write all my JavaScript code into my index.html file.
Line 14 is connecting my index.html file and my three.js file that I created. According to the document, we must first set up a scene and camera. The simple version from the documentation looks like this:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
The first line instantiates a new object called “scene” using the function that is built inside of Three.JS library. In terms of art, we are setting up a canvas for drawing 3D images. Then, we need to create a perspective to set the position that our monitor is looking from. The first argument from the second line represents field-of-view or FOV and it’s value is in degrees. It’s basically means how much degree of field can a user see and I’m sure many of you who plays FPS games knows what this is. Second argument represents aspect ratio. Lastly, the last two values represents how near and far away from an object to the camera. If the object is lower or higher then near and far value, it’s not going to render on your screen. Three.JS seems to use WebGL renderer to display objects and the last three lines are to set up renderer with it’s size and append it to the html body.
So far, we have created a place to show an object and how to display the object but, we haven’t created any objects yet. There are many objects that you can create with Three.JS but, I will just try to create a sphere.
var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
Three JS has various geometry shapes that you can try out. In my case, I used sphere geometry. SphereGeometry follows this format so I will skip the explanation:
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
MeshBasicMaterial gives properties to the object like it’s color. It is like adding CSS to an HTML file.
Lastly, I put them all together to create a sphere using Mesh function. Then, I added some movement to my object:
camera.position.z = 10;
function animate() {
requestAnimationFrame( animate );
sphere.rotation.x += 0.01;
renderer.render( scene, camera );
}
animate();
I’m rotating my sphere through x-axis and rendering it constantly. At the end, it becomes like this:
Three JS is simple enough for beginners and I’m looking forward to apply this into my future projects!
