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

Leave a Reply

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