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
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.
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?
But the stapler is white?!
like it, long time no see make about threejs….
Hey gtlf loader not working
This code is not working, could you help me please
Where can I find the GLTFLoader.js??????????????????????????????????????????????
Sir do have the three.min.js file
Hey the link you have given are not working now. Can you please reshare them as I am using on my project. URGENT!
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.
can you kindly tell me where I can get GLTFLoader.js
It's possible to use STL on this ?
and im back again….
hope i can do this now..
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.
amazing
1 year later im back
did everything according to the tutorial, but I can't see the 3d model on the website((((
I have problem loading importing the files. Any idea how I can fix the issue?
No me ayudo mucho la verdad, la instructora rubiela dijo que no le parece correcta tu forma
i have been triying to do exactly what you are doing in the video but i am unable top see the 3D model in the browser.
Thankyou for the tutorial, i want to ask you a question how to lock the rotation just for horisontal axis?
ThreeJS series for Hindi Audience – https://youtu.be/hlHr7Z_d87A
How can we do the above in elementor for WP? Care to guide in the right direction if its possible
– 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 ! 🙌
Pls do u have a video on how to add it to react?
I didnt work, im guessing its related to the three.main.js file missing… please some help
not working on my pc please help
May you please send the Three.min.js file link
Anyone getting errors on line 28 through 30 when trying to load their own model?
плохой туториал, библиотеки не рабочие! Гневный отзыв!
what is three.min.js file bro. where i can get that file
Did you publish it using a live server?
I have copy past same code. and all js ifle but still not working on my system.
Add 3D models or AR 3d Models to your E-Commerce, business and blog website with just one plugin- AR model Viewer (WordPress plugin)
I dude enjoy it!
very helpful! thanks!
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!
sesat
where i can find "three.min.js"
so json file is no longer supported as an exporting option from blender?
Hi Sir, Great Work
Which version of three js u use?
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?
everything is now one push of a button.
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.