Getting Started with Three.js: A Beginner's Tutorial
Вставка
- Опубліковано 23 січ 2025
- Have you ever wondered how to make 3D graphics on the web?
Today we'll cover the basics of Three.js, It helps if you have a basic understanding of javascript.
Download the starting code on Github: github.com/bob...
Explore using different primitive shapes, a sphere, a donut, a knot, a teapot.
threejs.org/ma...
Try different lights, directional, point and or spot lights.
threejs.org/ma...
Play with animating the position, rotation, scale and color of the mesh
threejs.org/ma...
Create a jsfiddle and share your creations
jsfiddle.net/
I ended up here after getting hopelessly lost in the sauce of some of the other 'beginner' tutorials out there. So many tutorial creators don't seem to realise how much background knowledge they're taking for granted! Really appreciate the clarity of what you're presenting and the fact that you explain why you're taking the steps you're taking. Thank you.
So glad to hear that this worked for you! Your feedback really helps, Thank you!
This is super cool Boby, good job :D
Hey, thanks @migueltice!
Amazing tutorial. I felt really connected with what you taught. Keep up the great work !!
So glad to hear!
Very good example for beginner and Thank you! Looking forward for more !
More to come!
This tutorial is simply great. Simple and great. loved it
Thank you! More to come!
Thanks for explaining so well! You are a good teacher.
Thank you @prashanthg7123
Good pacing, good content selection. Great Tutorial. I also liked that you addressed the z-fighting. Thank you!
Thank you @DevKaiUnreal !
Outstanding is the only word i have for now. Thank you sir!!
Most welcome!
Thank you! Looking forward for more
More coming every week!
Waiting for more to come.
New content uploaded every Wednesday!
Sir 6:39 after writing the code till here, you screen turned black but my hasn't. What could be the possible error? Please help.
Open up the console to get more information about the error (maybe there was a typo?)
Sir can we add some particles on the layer of globe and make interaction with mouse
Like in the Vertex Earth video? Yes!
ua-cam.com/video/tBSzJstOGnM/v-deo.html
You had me at Three.js!
😁
bobby what library can i install to start, when i type like you i cannot get any suggestion, and also my code isnt working like yours, i am also in visual studio..please help
This video looks like a good tutorial on code completion with Three.js:
ua-cam.com/video/MC-3xxi9hoA/v-deo.html
Looks really cool 👏😎
Thank you!
I followed everything step by step and reviewed to ensure everything is correct but at the end it shows nothing in the browser. totally blank white.
in tutorial and after you define the scene and camera and renderer you have the black scene appears and after you add geo you have the mesh in the scene but for me it's still white blank.
I checked the chrome Console which shows this error
TypeError: Failed to resolve module specifier "THREE". Relative references must start with either "/", "./", or "../".
I don't know what that means but I check the HTML and Java file against tutorial and every line is identical.
I tried it on two different computer and still the same, do you know how to fix this ??
Sorry to hear you're having difficulty, Does your "index.js" look like this?
github.com/bobbyroe/getting-started-with-threejs/blob/completed/index.js
wow, that's great tutorial, thanks for sharing
You are welcome!
@@robotbobby9waiting next video🎉🎉🎉
Thanks for the video.
How do you get the autocomplete running for Three.js?
I'm typing the const renderer = new THREE.Web... and it won't give me any suggestions.
Here's the directions I've used to add *intellisense* with typings for Three.js:
shrekshao.github.io/2016/06/20/vscode-01/
I hope this helps!
@@robotbobby9Thanks for the quick response 🙏
Hey Bobby, thank you for this perfectly simple and understandable introduction into three.js 🙂
I only know a little bit about JS in general but it was enough to understand most of whats happening here - and its fun!
I got one question of comprehension: You set the top and bottom lights and with the orbit controls we can move the object. But shouldnt e.g. the orange light stay on the ground? Why does it move with the orb?
Hi @mayhemmavinir - that's great and thank you!
Re: Orbit Controls, it's difficult to tell with only a single Icosahedron in a black scene, but the controls move the *camera* round (not the object) - hope that makes sense
Great video for beginners thank you for your time
Glad to hear you enjoyed it. Cheers!
how can i add this sphere hover and also want to add onclick event
Check out ua-cam.com/video/tgwS1xxzc9s/v-deo.html
Also how can add onclick event in globe
amazing! very new to this however - Do you know what I could search for to find out how to add this to my wordpress/elementor pro website? thanks in advance!
Not sure, maybe start here: elementor.com/help/custom-code-pro/ ?
Awesome video, could you explain how could i add a .gltf to my website? thank you
This video walks through loading a model:
ua-cam.com/video/Cxd2gYRrz4c/v-deo.html
Replace the *OBJLoader* with a *GLTFLoader* and you'll be loading models!
Thank you
Should I just get started or learn some prerequisite before diving in
Hey @baxtables start here: threejs.org/manual/#en/fundamentals
thank you so much ur explanation is so clear
You’re welcome!
@@robotbobby9 is there a way to run without a server?
If there is, I don’t know it.
awesome!
Thank you! Cheers!
seems like a good tutorial, but cant seem get any response from the code. Not able to install npm scripts aswell for some reason.
What part is giving you difficulty, exactly? You won't need to install any npm packages for this project.
@@robotbobby9I'm a big knucklehead. It's working now! was missing the word "new" on line 12 :facepalm: ❤ (Tip for the next person: make sure to check ur code 10 times, if not 50 times before u proceed)
Well this is cool but its better to just make a 3d model in blender and import it using the relative path of threejs am i right?
Sure, what format do you export (for Three.js / web)?
very helpful video appreciate your effort
Glad it was helpful!
right now im struggling to make a web flask that works with javascript, three.js python css and with the following user-flow.
User enters page → Zoom effect with text is displayed → User clicks or scrolls to continue → Light turns on and 3D bust appears → Rotating boxes around bust → User can interact by clicking on boxes to see more information about artists and periods.
but i don't know why i can't get the 3d animation run T_T
i did this animation " Rotating boxes around bust → User can interact by clicking on boxes to see more information about artists and periods." with full CSS and HTML simple.
But now that i want to use a 3d bust and make it more complicate, I can get it run.
i know 0 about JavaScript, i come from a python background, maybe i shouldn't use flask and python but some JavaScript framework right?
im planning to Netflix all your content, sir. =) Thanks for sharing.
I hope you can sort it out - I'm not familiar with Flask / Python. For Web 3D I recommend Three.js always.
what is jsm
Try this guide:
discourse.threejs.org/t/three-js-autocomplete-with-vs-code/1636