3D Model: THREE.js Scene in Angular

Published in

Geek Culture

4 min readApr 19, 2022

Three.js is a JavaScript library used to create and display animated 3D computer graphics on a web browser, compatible with the HTML5 canvas element, WebGL, and SVG.

Previous Tutorial: Hello █████ Cube: THREE.js Scene in Angular | by Anurag Srivastava | Geek Culture | Medium

In the previous tutorial, we learnt the fundamentals of Three.js and integrated the Three.js scene in Angular. We will render a 3D Model in this tutorial.

The Model

First, we need to find a suitable 3D model. There are lots of free models available on the internet. We will use a GLTF format due to its small file size and efficiency. three.js supports FBX and obj files as well. Here, is a free model Super Tactical Droid — Clone Wars — Download Free 3D model by Eddie Roach (@eddie.roach) [617367b] (sketchfab.com)

This work is based on “Super Tactical Droid — Clone Wars” (https://sketchfab.com/3d-models/super-tactical-droid-clone-wars-617367b06c9d438d81c6a883df9c4014) by Eddie Roach (https://sketchfab.com/eddie.roach) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) — Super Tactical Droid — Clone Wars (Eddie Roach https://sketchfab.com/eddie.roach)

Put the downloaded files of the model in your assets folder (You must give appropriate credit, to the owner).

We already learnt how to set up a three.js project in angular in the previous tutorial, so please go through the last tutorial, as I will not be discussing it here.

Let us first create an angular component which would consist of an HTML file where we are going to render the 3D model, a Typescript file (.ts) where we would import Three.js functionality and a CSS or SCSS style file. Type in the below command to create a ModelComponent.

ng generate component cube

Open up the HTML file and add a canvas into our empty scene. We can add the canvas in whatever size we need it in the HTML template.

With this small step out of the way, we can switch our attention to the Typescript file, where the actual work still has to be done to get our 3D scene set.

Programming the Three.js Scene

Now to Integrate Three.js with Angular and load 3D model, you must import the Three.js library and additional modules which we will be discussing, to the component in which you are going to render the 3D object, i.e model.component.ts.

GLTF: glTF (GL Transmission Format) is an open format specification for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf) or binary (.glb) format. External files store textures (.jpg, .png) and additional binary data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and/or cameras.

GLTFLoader: It is a three.js module which reads the GLTF file and imports it into our scene.

OrbitControls: Orbit controls allow the camera to orbit around a target.

CSS2DRendered: CSS2DRenderer is a simplified version of CSS3DRenderer. The only transformation that is supported is translation. The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of CSS2DObject and added to the scene graph.

Get the reference of the canvas we added in the HTML file using

@ViewChild(‘canvas’) private canvasRef: ElementRef;

Let us create the scene now, the scene is where we will add different elements that we want to work with like camera, 3D model, etc. Create a function as shown below:

Let us create the controls now. The controls will help us rotate the model. Create a function as shown below:

Finally, call the createScene(), startRenderingLoop() and createControls() function in ngAfterViewInit() and start the project using ng serve in the terminal.