Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- How to add 3D model with 360 degrees view on website with JavaScript and Three.js in 5 minutes!
Source Code: redstapler.co/add-3d-model-to...
Three.js Crash Course: • Three.js Tutorial | Pa...
GLTFLoader.js: git.io/fjRPL
OrbitControl.js: git.io/fjRPt
Car Model: skfb.ly/6HpEG
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#3DModel #ThreejsTutorial #WebDesign - วิทยาศาสตร์และเทคโนโลยี
![[ TUTORIAL ] ModelViewer Tutorial - Threejs](http://i.ytimg.com/vi/45-mJdjE9O4/mqdefault.jpg)
![ชวนน้องลงทุ่ง - เงาะน้อยเพชรบ้านแพง X น้องมายด์ [ Music Video ] Official Saman Music](http://i.ytimg.com/vi/Bq7Hw9culjE/mqdefault.jpg)
Thanks, sir. Now I'm in love with this piece of technology and willing to learn everything it offers!
One of favourite web development channel. Thank u so much.
Ooooohhhhh thank you so much. I needed this. 😊
great tutorial!!!!! hope more to come!!!
God-sent tutorial!!! made mine work!
Thnks red stapler.!!love from India
thanks a lot! This video helped me so much!
very helpful! thanks!
Great man !
You deserve more buddy
Sir, you are really great...
What an amazing project is this... really amazing.. +!
very help full, thanks ,
You are awesome! Thank you for lesson, from Moscow :)
Man deadass used "Happy Birthday" as background music, what a legend xD
Happy birthday !
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!
In blender or other 3D software you can often place lights as well, will these show up? Or do you always need to add the lights yourself?
Great video super tutorial
like it, long time no see make about threejs....
I dude enjoy it!
like your three js series.
Awesome 🤗
Thanks!!
best takes is to update this link on this project for easy accessibility. Keep the good work.
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
Thx for work
Thank you sir.
One more question, how to do dynamic 3d model? I mean, input on website few parameters and output 3d model,
something like online product configurator
is it possible?
Looking down for more threejs tutorials.
Thank you, I try for doing the same code but there is no result ou output ... the same for example pikachu ...??
Thanks for the video! Did anyone noticed that the song playing is happy birthday to you?
I love the Christmas piano music in the background
I know Im asking randomly but does anybody know a method to get back into an Instagram account..?
I was dumb forgot the account password. I appreciate any assistance you can give me!
@Arthur Jimmy instablaster =)
@Dalton Will I really appreciate your reply. I found the site on google and Im in the hacking process atm.
Seems to take quite some time so I will reply here later with my results.
@Dalton Will it did the trick and I now got access to my account again. I'm so happy:D
Thank you so much, you really help me out :D
@Arthur Jimmy no problem :D
Will it be possible to have the models have areas that when they pass the mause are activated or change color or add a link to another model?
ありがとう❤
good job ^^
One question. Is it possible to call the "car object" from outside the load function? Here you set a scale inside of it. would it be possible to do soemthing like this:
loader.load(...,function(gltf){
car=gltf.scene.children[0]
});
car.scale.set(...)
What would I need to do to make this possible? I need this because I want to rotate the object depending on where my mouse is, so it can follow it
How to replace GLTFloader with OBJloader ? Please guide with the code for the same webpage
I had some issues since Im using parcel, when loading the .gltf file, before I needed to use "parcel-plugin-static-files-copy" in order to serve static files. Following issue came when I didn't add /textures folder and .bin file. Finally OrbitControls needs now the renderer as a second argument and there's no need anymore to add the event listener. Thanks for this tutorial
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?
Hi, thank you! Great tutorial. I have a question, any of you guys know how to add text on a 3d model in threejs? I would really appreciate if someone helps me with that.
Threejs is sensational.
Very gooood !!!!
Can we do selection on a specific portion in the 3D model, is that possible via three.js? Eg: I select the eye, nose, ears and like that?
amazing
I am getting error in OrbitControl.js file. and the error is "Uncaught TypeError : Cannot read type property 'addEventListener' of Undefined". Please suggest what to do?
can we upload a 3D model and add different functions to different parts of the model?
Is it possible to add Text that has a raycast line at a certain point of the 3d model? And the text uses a billboard effect to always face the camera?
How can I add the 3D on WP? Can you share some tutorials to it?
link demo please? and if i made new product (ex: horse) then i must have a horse gltf 3D?
searching for a wordpress solution thanks for the demo!!
the solution would be not to use inferior software like word press cause it sucks so much
Thank for your videos. I have a question.
I have a obj and hdri background. I can not keep obj when rotate background. Can you help me resolve my issue?
I copied your code exactly, but I got an error saying
' Cannot read property Itemstart of undefined '
Hi Sir, Great Work
Which version of three js u use?
Bro, you took my development skills to the next level, thank you ♥️
i got blank screen, do you mind to share the source code?
@@doniwirawan7191 sorry brother, I no longer develop websites and no longer have the source code.
Okay, because of you are the top commenters i hope anybody else will read this, please share your source code link, i wanna look at them🙏
@@promise4599 I'm so curious, why did you stop developing?
@@darkerthansuede2439 Became a day trader :)
Ok I have an issue, I'm at 2:56 and my programm give the error: "TypeError: this.textureLoader.setRequestHeader is not a function
at new GLTFParser (GLTFLoader.js:1762)
at GLTFLoader.parse (GLTFLoader.js:209)
at Object.onLoad (GLTFLoader.js:95)
at XMLHttpRequest. (three.min.js:742)"
even copying the full code I have this problem, what can I do?
maybe stupid question but is the .glb ok ? When I export from blender, the file has a .glb extension
awesome! you could integrate an example of these into a real site!Saludos desde Colombia! :)
Great stuff, is there a way to add customization option to the model? i.e, have colors change and stuff while the model is being panned/rotated around?
hi did you find ??
Nice Brother
Run the code but I get this message, THREE.WebGLRenderer: OES_texture_float_linear extension not supported. help!
Uncaught SyntaxError: The requested module './GLTFLoader.js' does not provide an export named 'default'
hi sir! follow you tutorial but occur issue THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera. if i connect three.js file and TypeError: "node.applyMatrix4 is not a function" if i coonect cdn file. What do you think it could be ?
did u jst played happy bday to u background music in three.js tutorial video ? xD
Hey Red Stapler!
Thanks to your tutorial, I was able to get this running. I really appreciate that and I hope your sub count goes up even more!
One question though, how would you modify the background so that it's completely transparent? I would like to manipulate the background using CSS.
I am probably too late, since it has been 3 months since this question has been asked, but I'll answer as there may be other people who have the same question.
To set the canvas's background to transparent, you simply need to add the line "alpha: true" (without quotation marks) to the object passed as parameter to WebGLRenderer. This property controls wether the canvas's background is to display alpha transparency or not. Default value is false, so that would result in a black background (or whatever is the color you chose for your Scene)
@@harthgornaltrask5957 Hey there! Thanks for replying. I figured it out myself. It had something to do with the body element in Javascript but I think i used your solution too when i was trying to solve it myself 3 months ago. I'll link my github.
github.com/sabeet/earthPort
@@harthgornaltrask5957 Can I Know where to add this?
@@pratikgk9384 You put it inside the WebGLRenderer constructor, like this:
const renderer = new WebGLRenderer({
alpha: true
})
@@sabeetspongiinchowdhury3965 I tried to download your repo contents. I can only see black screen. Is there any way to correct this problem? Even the same problem occurs when I tried out this tutorial.
Any help would be appreciated
I got my car to render but it is very tiny on init() and is very far back using the camera using the default source code. Any Idea why this is happening?
could you make a whole series about three js ?
From beginner to advanced. I would definitely be watching them all!
Here for ya bra:
th-cam.com/video/ABV1mK1CGOY/w-d-xo.html
but its very basic
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.
It is a nice example, but I have a question. What kind of browser are you using? I am using Chrome, but I can't use the GLTFLoader to load the glb model from my local filesystem on my computer. The XMLHttpRequest is blocked by 'CORS policy'. It returned the error: from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
i am very late and i have the same problem have you solved that?
having a issue not able to view the GLTF in the web any suggestion
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.
I get this error :
Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at new THREE.OrbitControls (OrbitControls.js:1100)
at init (VM112 threejs.html:27)
at VM112 threejs.html:69
THREE.OrbitControls @ OrbitControls.js:1100
init @ VM112 threejs.html:27
(anonymous) @ VM112 threejs.html:69
is it possible to do this in react file structures? All in one js file?
so json file is no longer supported as an exporting option from blender?
Orbit Controls gives an error while adding addEventListener to controls. Can someone help?
" Uncaught TypeError: Cannot read property 'addEventListener' of undefined at new THREE.OrbitControls "
How could I possibly add labels for doors and engines and such?
Hello I'm now having little problem to ask you my model can't loadup i think i have problem with textures can you help me how to solve this problem ?
Can you make tutorial how to setup for fbx format?is it same?
the github links are not working, can someone teach me another way?
Why the background music is a jazz version of happy birthday? 😂
these are not being read :
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'; please help
Did you publish it using a live server?
All works great up untill I swap out renderer.render(scene,camera); for the animate function. any help? Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'render')
at animate
Uncaught TypeError: Cannot read property 'addEventListener' of undefined at new THREE.OrbitControls
How to fix it?
can some of the parts of the model be clickable?
can we rotate object with gsap scroll-trigger. can you please make video on it?
I have problem loading importing the files. Any idea how I can fix the issue?
Hi and thanks for the tutorial. I get an error and I was wondering if you can help me fix it. The object doesn't load and in the console it's written: TypeError: THREE.OBJLoader is not a constructor (I used OBJLoader as I didn't have a GLTF, it should be supported anyways) I don't understand why it doesn't work. Thanks in advance!
Go to your code and put the block o code “renderer = new THREE.WebGL ... (renderer.domElement);” after the block of code about “camera” and before “controls”. Explanation of the error: the renderer object is used before itself is declared. Go to the browser console and you can notice that.
can you kindly tell me where I can get GLTFLoader.js
fbx 3D object have been open thats gr8, how to add this on web browser, can u help me?
the github link doesn't work anymore, help
Where did you get the "three.min.js"?
If we want want to add own image how we insert animation on it?
how can i put such model into div instead of body please?
How to add control to this car? I mean i want to steer it with arrows or WASD
how your vs codd can auto complete method and function name of three. js
when i use this code i get a unexpected token error on the first line of the code, not sure why? can anyone help?
same here
how can i load the three.main.js file in angular?
from where i have to download three min js file ??
you can provide any link ??
cant get it working on both computer and hosted
where did you link the car
file texture and all
This isn't working anymore as Three.js changes frequently, can you please upload an updated video please?
exactly....m completely new to this...and I was ripping my hairs off...I did exactly as this tutorial....and now all it shows is a grey colored screen...dats it
@@pradiptasarkarekagga1970 bro I was doing my final year project on it, one thing I learnt about three.js is no video will help you, go ask your problems in forums of three.js and read the docs and find your desired syntax or problem in docs.
@@iamfpsk8648 I also see this video for my project😂😅
@@tharaniv6267 don't go for it, read docs.