add-3d-model-website
Javascript

Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial

In this tutorial, we’re going to show you how to put a 3D model on your website with 360 degrees viewer using Three.js and JavaScript in just a few minutes.

The Model

First of all, we’ll need to find a suitable 3D model. There are lots of free models available on the internet. However, Three.js recommended to use a model with glTF format due to small file size and efficiency. So I’m going to download the one that already in glTF format. But if you already have a model in other formats, three.js is also support FBX and obj file as well.

Here is the free Datson car model from Sketchfab

add-3d-model-website-2

Once model was downloaded, put all files (and folders if any) in the web directory.

add-3d-model-website-3

Basic Setup

Let’s work on the JavaScript. First include the latest version of Three.js to your page.

<script src="three.min.js"></script>

Next create a scene, camera and renderer. I’m going to place the camera in front of the car and rotate them by 45 degrees. Then, to scale down the car, we’ll get our car model inside the callback function and use scale.set. I’m going to reduce the size by half.

scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);

camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;

renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

The basic setup is completed. Next, we’ll add the lighting and load our model.

The Lighting

Then I’ll add a soft white ambient light to illuminate the scene globally.

Then add directional light from above. I’m going to set the castShadow property to true then add it to the scene. I’m going to also add 4 point lights and place them around the car. Point light is similar to the light bulb in the real world and It automatically cast shadow.

hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);

directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);

light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);

light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);

light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);

light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);

Loading Model

We’ll use GLTFLoader class. Then use load method to load our model file. Also the model is too big for our scene so let’s scale down the car by 50%

let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
  car = gltf.scene.children[0];
  car.scale.set(0.5,0.5,0.5);
  scene.add(gltf.scene);
  animate();
});

add-3d-model-website-1

360 Degrees Viewer

We’ll use three.js OrbitControl plugin to add a 360 degrees viewer that let the users rotate the camera. Get the OrbitControls.js from github and include it to the page.

<script src="OrbitControls.js"></script>

Then create the control object from our camera and add change event listener to track the mouse control.

let controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);

We’ll need to create an animation loop to update the scene when users rotate the camera.

function animate() {
  renderer.render(scene,camera);
  requestAnimationFrame(animate);
}

Check the final result in the video below

And that’s it. You can get the full source code below. Hope you guys enjoy. Don’t forget to like our Facebook and subscribe our Youtube Channel to stay connected. See you next time Bye!

Source Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <script src="three.min.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.position.set(0,1,0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        light = new THREE.PointLight(0xc4c4c4,10);
        light.position.set(0,300,500);
        scene.add(light);
        light2 = new THREE.PointLight(0xc4c4c4,10);
        light2.position.set(500,100,0);
        scene.add(light2);
        light3 = new THREE.PointLight(0xc4c4c4,10);
        light3.position.set(0,100,-500);
        scene.add(light3);
        light4 = new THREE.PointLight(0xc4c4c4,10);
        light4.position.set(-500,300,500);
        scene.add(light4);

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load('scene.gltf', function(gltf){
          car = gltf.scene.children[0];
          car.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

CSS

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
Written By

6 comments

  1. I followed all the steps and watched the YouTube video but it still shows an error and does not run. Is there perhaps something wrong with the code that is provided?

    What could I be missing?

    1. same problem, followed step by step. I got a blank page and this in my console:
      TypeError: undefined is not an object (evaluating ‘scope.domElement.addEventListener’)

      safari – chrome – firefox on a Mac high Sierra

      1. Are you guys running a local server? because that’s the error I had then I downloaded python and everything worked.

  2. The libraries is still being developed. There are some problems in this old codes.
    Here are some tips:
    1. You should use libraries from examples/jm folder (Not From examples/jsm). That is because of different import ways for libraries.
    2. controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addeventlistener(‘change’,renderer);
    These two lines of code should be under all “renderer” codes. And three.js team updates the OrbitControls library and they add one more variable in that constructor.
    The whole structure of code I believe is that set scene/set camera/loader GLTF/set renderer/set controls
    3. Please always check three.js latest released and their examples on their website. You can find all example codes in github (https://github.com/mrdoob/three.js).

Leave a Reply

Your email address will not be published. Required fields are marked *

error: