3D Model: THREE.js Scene in Angular

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

3d Model: THREE.js Scene in Angular

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)

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).

Downloaded Model Files

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.

adding canvas in model.component.html

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.

importing modules

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;

canvas reference

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:

creating the scene

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

create controls

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

Final working demo

Download the source code, run the project and go to localhost:4200/model to view the demo.

You are ready to load your 3d model in a Three.js project using Angular. Have fun programming !!!

GITHUB Link for this project :- srivastavaanurag79/angular-three: In this tutorial, we will go through a simple example. We’ll render a 3D Cube, and we’ll learn the fundamentals of Three.js and integrate the Three.js scene in Angular. (github.com)

References:
Three.js Tutorial — How to Render 3D Objects in the Browser (freecodecamp.org)

Loading 3D models — three.js docs (threejs.org)

Add 3D Model to WebSite in 5 Minutes — Three.js Tutorial — Red Stapler

SketchFab (Super Tactical Droid — Clone Wars — Download Free 3D model by Eddie Roach (@eddie.roach))