Hire the author: Manish K

A post by Learning Dollars software engineer Manish K.

The blog basically tries to explain how to load 3D models or objects as web content (over the browser). We will discuss various 3D model extensions as well as learn to implement what is known as Level of Detail (LOD) on various 3D models. This is going to be an exciting new adventure on the Three.js island. So lets get started with it….

The github repo can be found here: https://github.com/learningdollars/madguy02-threejslod

So, What the heck is Three.js? Why do we use it?

Three.js is a cross browser javascript library that helps to get 3D computer graphic content on web browsers. The core of this library is WebGL, and three.js is basically written on top of it. Three.js has extended the WebGL renderer to javascript, making it possible to render complex 3D content over the browser. Please visit Threejs.org for further understanding and beholding the true power of Three.

Woah!! It’s powerful, isn’t it? 🙂

Setting up Three.js in local environment…ummm How do i do that?

Well … It’s pretty simple. All you have to do is:

  • Go to threejs.org and click on download (available at the left vertical navigation bar.
  • You will have a .zip file, unzip it and store it in a particular location.

Hurray!! you have three.js on your computer.

What’s next .. ?

Now lets dive into programming with JS and behold the true power of Three.js.

Steps to create a Three.js project to load a 3D object model:

  • Create a folder in anywhere on your system and name it accordingly (whatever you want)
  • Within that directory, create a JS folder, all the js code goes in here.
  • Go to the three.js folder, (downloaded earlier).
  • Go to /src/loaders directory and copy everything and place it in your project folder inside JS folder. (we are doing this because we might need loaders while developing further complex environments)
  • Now go to the threejs-master/build directory to copy the three.js file itself (you can use the minified version as well, personally I prefer the minified version of it) and place it in the JS folder within your project directory.
  • Your directory should look something like this:
  • project-structure
  • Now within the same project directory create another folder models (please refer to the image above). Models contain all the 3D content that we are going to load on the web browser.
  • Download any JSON 3D object model. For instance: json_3D_model (you can use this or whatever you feel like)

Let’s create a scene and load the JSON 3D model:

  • First create an loaderApp.js file within the JS folder. (it will hold the logic that renders a scene within the browser)
  • Add the initial piece of code:  init-code

Note: the very first line actually creates a scene. The camera here is a perspective camera (there are a variety of camera types to choose from, you can know more about perspective camera from here. renderer is going to render the scene, and finally I am adding that renderer to body element as a child.

  • orbit-controls

Note: In the above piece of code, there is a variable called controls that has an OrbitControls object. OrbitalControls provides flexibility to the camera, to orbit around a target. Hence we pass two arguments which includes the camera and the domElement of the renderer .

  • cam-position

Note: The above piece is nothing but initial camera positions at x, y and z planes. This will come into effect when the scene initially renders on the web browser

  • loaders.png

Notes: The above piece of code defines two loaders (loader, loaders variables). Here two variables (loader, loaders) are loading two different types of loading mechanisms. One being ObjectLoader and the other being OBJLoader. The ObjectLoader will help in loading 3D JSON object model. Whereas the THREE.OBJLoader will help in loading .obj files (which will be demonstrated later in the blog)

  • callback.png

Notes: Here in the above piece of code, we are using the loader to load the model from /models folder and then adding it to the scene. This is a callback, because it will only trigger once we have the object loaded to the scene.

  • loop.png

Notes: This is a mandatory piece of code where we are putting everything within a loop, to run altogether. This is what finally sets up the scene

  • Create an index.html page where we call the libraries to be rendered.
  • html.png

And now, we are done loading a 3D JSON object model.

Loading .obj 3D object model:

  • In order to load an obj model, we will require MTL Loader as well as OBJLoader. The reason being these kinds of obj models have both mtl and obj files.
  • mtl.png

Notes: The above piece of code will load an obj model in browser. For this we will have to grab the mtl file from the models/<downloadedmodel> and preload it. Then once preloaded we will then load the obj file and add it to the scene. The position of the 3D object model on x and y axes are defined within the scene by using the callback object which is added to the scene using scene.add(object). The object’s position in x and y axes are defined by object.position.y and object.position.x . The light here describes the type of light and the color as well as the position of the light source

Phew!! we have done a lot of programming… you may take a break for a while 🙂 . Next up is Level of Detail implementation.

What is Level Of Detail (LOD)?

Level of Detail mechanism refers to the viewers perspective. Lets say, you have a large and complex 3D model that you wanted to load in a scene. You can actually make the perspective at different levels (near, at a medium distance, far away). The object will appear different to the viewer at different distances.

Implementing LOD in Three.js:

  • Create the same project structure as mentioned above (in the blog)
  • You will need LOD.js in order to implement LOD functionality.
  • Go to threejs-master and navigate to /src/objects and copy the LOD.js  file
  • Place LOD.js within the JS folder in your project directory.
  • Set up for LOD is done.

This piece of code implements LOD:

lod

Note: Here in the above piece of code. we are actually using a mesh geometry (cube in this case). Added a level to the cube (the number 70 is the distance upto which the cube shall appear. Then there is the loader which will load the actual JSON model and place it at a level (nearer in this case (20)), finally adding it to the scene.

Before bidding goodbye: The paths for 3D models depends on OS used, please review the path carefully before loading the 3D object

To know more about three.js implementations please go through the documentation . 

Here is the github repository for the implementations discussed in the blog.

Happy Coding !!

 

Hire the author: Manish K