How to add 3D model with 360 degrees view on website with JavaScript and Three.js in 5 minutes!
Source Code: https://redstapler.co/add-3d-model-to-website-threejs/
Three.js Crash Course: https://youtu.be/uzkedMF-l4Q
GLTFLoader.js: https://git.io/fjRPL
OrbitControl.js: https://git.io/fjRPt
Car Model: https://skfb.ly/6HpEG
=== Follow us on ===
Facebook: https://www.facebook.com/theRedStapler
Website: http://redstapler.co/
Twitter: https://twitter.com/redStapler_twit
#3DModel #ThreejsTutorial #WebDesign

source

44 Comments

  1. Thanks to your tutorial, but I have encountered some problems.
    I downloaded the same glft file as you and put it under the same folder as index.html like you did. And I also used 'npm install three' to update three, and then copied and pasted the files in it to the index.html consent folder, but after running the code at 2:57 in your video I only get a blank canvas, and no 3D model is shown.

  2. I don't know any software, I do 3D modeling in Blender and I want to export my models as you did, while doing this, I don't want to copyright or advertise someone else's page. How can I get my 3d models out for free and put them on my page?

  3. I got stuck in the getting GLTF Loader part. Your link destination doesn't exist anymore. I'm a noob trying to figure things out still. I'm practicing a lot of html and css but javascript I didn't even touched yet.

  4. Hello, I have a problem with code. I follow the code step by step but I can't view anything in website. Does anyone know how to fix it? Thanks for help.

  5. – For domElment Error :
    (ctrl+f "domElem" on comments and I found our hero : Masoud Bashiri, go like his comment pls)

    "Anyone having trouble with this tutorial, just do the following steps:

    move these tree lines to the top of the init function:

    renderer = new THREE.WebGLRenderer({antialias:true});

    renderer.setSize(window.innerWidth,window.innerHeight);

    document.body.appendChild(renderer.domElement);

    and change the instantiation of the controls object from:

    controls = new THREE.OrbitControls(camera)

    to:

    controls = new THREE.OrbitControls(camera,renderer.domElement);

    you need to pass domElement."

    – For CORS Error :
    (Searched for a while but found this : https://discourse.threejs.org/t/http-request-blocked-by-cors-policy/7954/2 that refer to threejs doc : https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally)

    So just enter theses two commands :
    npm install http-server -g

    http-server . -p 8000

    Hope it will help ! 🙌

  6. Hey man! Great job! I have a question: Once I have my the model uploaded, how can I add a button that activates an animation when clicked it, like opening the doors for example. Thanks!

  7. Excellent tutorial. Do you know how to put this 3d model in a responsive HTML document in order to make a website that can be viewed in every mobil device?

  8. BRAZIL. olá cara, eu fiz o codigo igual seu. baixei a parte GLTFLoader,js. Eu não entendi como voce chama o arquivo 3d para seu codigo. minha tela ficou preta.

Leave A Reply

Please enter your comment!
Please enter your name here