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


hello and welcome to red stapler channel
in this tutorial we are going to show you how to put a 3d model on your
website with 360 degrees viewer in just a few minutes ready let’s check it out in
this tutorial we are going to use three.js one of the most popular 3d
JavaScript library first of all we need to find a suitable 3d model there are
lots of free models available on the Internetใ three.js recommended to use 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 now once we downloaded the model I will put all files and folders in a web directory next let’s work on a
JavaScript first include the latest version of three.js to your page next
create a scene, set the background color and camera. You can find more details
about three.js Basics in our previous tutorial at the link below then I’ll add a soft white ambient light
to illuminate our model and finally we will set up a WebGL renderer using
current viewport aspect ratio and add the output canvas to our page the basic setup is completed next we’ll
start loading our model we use gltf loader class then use load
method to load our model file then add our model to the scene and render it
when the load is completed in a callback function what we currently see is the inside of
the car we all need to move the camera outside as well as scale down the car
size 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 will get
our car model inside the callback function and use scale.set I’m going
to reduce the car size by half now you will see that the car is miscolored this
because our only light source, the ambient light, is a light that
illuminates all objects in the scene equally from all directions so it
doesn’t cast any shadow or reflection we can fix this by adding other types of
light let’s start with adding directional light from above I’m going
to set the cast shadow property to true and add it to the scene then I’m going
to also add 4 point lights and place them around a car point light is similar
to the light bulb in real world and automatically cast shadow almost finish next we are going to add a
360 degrees viewer that let users rotate the camera we will use three.js orbitControl plug-in first get the orbitControls.js from github and include it
to your page then create a control object from our camera and add change
event listener to track the mouse control now instead of one time
rendering we will need to create an animation loop to update the scene when
users rotate the camera basically it’s the same as our previous tutorial just
create a function to render the scene and call the request animation frame to
start a recursive loop and that’s it! you can find a code of
this tutorial in the description box below of you guys enjoyed this tutorial
and don’t forget to Like and subscribe to stay tuned for more thanks for
watching and see you next time bye

55 thoughts on “Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial

  1. Folks if you dont want to download the files and want to embed them to your html code:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>

    and the Car:
    <div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/b2303a552b444e5b8637fdf5169b41cb/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

    <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
    <a href="https://sketchfab.com/3d-models/1972-datsun-240k-gt-non-commercial-use-only-b2303a552b444e5b8637fdf5169b41cb?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">1972 Datsun 240k GT (NON COMMERCIAL USE ONLY)</a>
    by <a href="https://sketchfab.com/karolmiklas?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Karol Miklas</a>
    on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
    </p>
    </div>

  2. getting error => Error: THREE.GLTFLoader: Failed to load buffer "scene.bin".

    Any suggestion what can I do (and I have already included scene.bin in the project directory)

  3. didnt worked got a 404 error on Request URL: http://localhost/car/scene.gltf in iis server (worked in wamp)

  4. I tried loading different gltf models and these errors resulted while attempting to rotate the model. (page remained blank and did not load the model)

    Any suggestions on where to start? Used the exact same file and only changed the .gltf filename to load. (moved to a new directory to ensure not loading scene.bin or textures/* from mismatched models.

    three.min.js:335 Uncaught TypeError: Cannot read property 'call' of undefined

    at THREE.OrbitControls.dispatchEvent (three.min.js:335)

    at THREE.OrbitControls.update (OrbitControls.js:230)

    at handleMouseMoveRotate (OrbitControls.js:493)

    at HTMLDocument.onMouseMove (OrbitControls.js:901)

    https://sketchfab.com/3d-models/mario-bee-b284e42ca73541f39ee27daa373a8614

    https://sketchfab.com/3d-models/shiba-inu-dog-80419f7e64e24afe97e0931b6aeee612

    any ideas?

  5. man the only thing i didnt done is the three.min.js file thatis the only thingi need to dobut i dont know where the file is please notice and help me

  6. I have this errors when i try to load the page. in the step before scale the car.
    GLTFLoader.js:9 Uncaught ReferenceError: THREE is not defined
    at GLTFLoader.js:9
    and
    Uncaught ReferenceError: THREE is not defined
    at init ((index):15)
    at (index):33

  7. i have a question in the model scene, can i add buttons and markers in the model from visual studio?
    i need do a model but with tooltips in diferents ubications similar to google maps. what do you recomend me for my proyect? i tried incrust the model but i dont know how put the markers and tooltips in the model

  8. Hello, I followed tutorial, but at the end I have error on addEventListener
    "THREE.OrbitControls: The second parameter "domElement" is now mandatory.
    Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at new THREE.OrbitControls (OrbitControls.js:1130)
    at init (index.html:25)
    at index.html:64 "

    Then I downloaded the source code but the same error it showed

  9. i have the next error: TypeError: scope.domElement is undefined.
    only happens when i put
    controls = new THREE.OrbitControls(camera)

    any idea

  10. Hi thx for the tutorial. I did it the same like you and used python3 local server, but the website is just white and it says: scope.domElement is undefined in OrbitControl.js. Do u know why i get the error?

Leave a Reply

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