Тёмный

Getting Started with Three.js: A Beginner's Tutorial 

Robot Bobby
Подписаться 4,7 тыс.
Просмотров 9 тыс.
50% 1

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/

Опубликовано:

 

14 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 58   
@eLearningTechie
@eLearningTechie 5 месяцев назад
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.
@robotbobby9
@robotbobby9 5 месяцев назад
So glad to hear that this worked for you! Your feedback really helps, Thank you!
@aaloo_ka_paratha
@aaloo_ka_paratha 7 месяцев назад
Waiting for more to come.
@robotbobby9
@robotbobby9 7 месяцев назад
New content uploaded every Wednesday!
@migueltice
@migueltice 7 месяцев назад
This is super cool Boby, good job :D
@robotbobby9
@robotbobby9 7 месяцев назад
Hey, thanks @migueltice!
@rhynowurhynowu
@rhynowurhynowu 3 месяца назад
Very good example for beginner and Thank you! Looking forward for more !
@robotbobby9
@robotbobby9 3 месяца назад
More to come!
@beastlybruh3825
@beastlybruh3825 5 месяцев назад
Amazing tutorial. I felt really connected with what you taught. Keep up the great work !!
@robotbobby9
@robotbobby9 5 месяцев назад
So glad to hear!
@mayhemavenir
@mayhemavenir 3 месяца назад
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?
@robotbobby9
@robotbobby9 3 месяца назад
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
@prashanthg7123
@prashanthg7123 4 месяца назад
Thanks for explaining so well! You are a good teacher.
@robotbobby9
@robotbobby9 4 месяца назад
Thank you @prashanthg7123
@RameshBSahoo
@RameshBSahoo 6 месяцев назад
Outstanding is the only word i have for now. Thank you sir!!
@robotbobby9
@robotbobby9 6 месяцев назад
Most welcome!
@CarlaAnneQ
@CarlaAnneQ 4 месяца назад
Thank you! Looking forward for more
@robotbobby9
@robotbobby9 4 месяца назад
More coming every week!
@DevKaiUnreal
@DevKaiUnreal 6 месяцев назад
Good pacing, good content selection. Great Tutorial. I also liked that you addressed the z-fighting. Thank you!
@robotbobby9
@robotbobby9 6 месяцев назад
Thank you @DevKaiUnreal !
@HuynhLuong227
@HuynhLuong227 7 месяцев назад
wow, that's great tutorial, thanks for sharing
@robotbobby9
@robotbobby9 7 месяцев назад
You are welcome!
@HuynhLuong227
@HuynhLuong227 7 месяцев назад
@@robotbobby9waiting next video🎉🎉🎉
@online.python.dersim
@online.python.dersim 2 месяца назад
Great video for beginners thank you for your time
@robotbobby9
@robotbobby9 2 месяца назад
Glad to hear you enjoyed it. Cheers!
@tenukaperera3853
@tenukaperera3853 3 месяца назад
thank you so much ur explanation is so clear
@robotbobby9
@robotbobby9 3 месяца назад
You’re welcome!
@tenukaperera3853
@tenukaperera3853 3 месяца назад
@@robotbobby9 is there a way to run without a server?
@robotbobby9
@robotbobby9 3 месяца назад
If there is, I don’t know it.
@tammielisa
@tammielisa 5 месяцев назад
Looks really cool 👏😎
@robotbobby9
@robotbobby9 5 месяцев назад
Thank you!
@guchfun
@guchfun 3 месяца назад
You had me at Three.js!
@robotbobby9
@robotbobby9 3 месяца назад
😁
@code-AtoZ
@code-AtoZ Месяц назад
Sir can we add some particles on the layer of globe and make interaction with mouse
@robotbobby9
@robotbobby9 Месяц назад
Like in the Vertex Earth video? Yes! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tBSzJstOGnM.html
@hitmeup4918
@hitmeup4918 7 месяцев назад
very helpful video appreciate your effort
@robotbobby9
@robotbobby9 7 месяцев назад
Glad it was helpful!
@HaskaSu
@HaskaSu 7 месяцев назад
awesome!
@robotbobby9
@robotbobby9 7 месяцев назад
Thank you! Cheers!
@razern420
@razern420 29 дней назад
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?
@robotbobby9
@robotbobby9 28 дней назад
Sure, what format do you export (for Three.js / web)?
@kogi04
@kogi04 4 месяца назад
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.
@robotbobby9
@robotbobby9 4 месяца назад
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!
@kogi04
@kogi04 4 месяца назад
@@robotbobby9Thanks for the quick response 🙏
@ikermadariagamoreno6255
@ikermadariagamoreno6255 5 месяцев назад
Awesome video, could you explain how could i add a .gltf to my website? thank you
@robotbobby9
@robotbobby9 5 месяцев назад
This video walks through loading a model: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Cxd2gYRrz4c.html Replace the *OBJLoader* with a *GLTFLoader* and you'll be loading models!
@ikermadariagamoreno6255
@ikermadariagamoreno6255 5 месяцев назад
Thank you
@baxtables
@baxtables 4 месяца назад
Should I just get started or learn some prerequisite before diving in
@robotbobby9
@robotbobby9 4 месяца назад
Hey @baxtables start here: threejs.org/manual/#en/fundamentals
@JoeMayk3D
@JoeMayk3D 5 месяцев назад
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!
@robotbobby9
@robotbobby9 5 месяцев назад
Not sure, maybe start here: elementor.com/help/custom-code-pro/ ?
@KartikaySrivastav
@KartikaySrivastav 5 месяцев назад
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.
@robotbobby9
@robotbobby9 5 месяцев назад
Open up the console to get more information about the error (maybe there was a typo?)
@irfanghyann
@irfanghyann 6 месяцев назад
how can i add this sphere hover and also want to add onclick event
@robotbobby9
@robotbobby9 6 месяцев назад
Check out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tgwS1xxzc9s.html
@Izelirfan
@Izelirfan 6 месяцев назад
Also how can add onclick event in globe
Далее
My Workspace Setup
9:03
Просмотров 420
Three.js Tips and Techniques
26:11
Просмотров 1,1 тыс.
Three.js Beginner Tutorial: Animating Stuff
17:24
Three.js personal portfolios are amazing...
13:05
Просмотров 450 тыс.
Database migrations in PHP
21:41
Просмотров 39
Create the Earth with THREE.js
20:27
Просмотров 33 тыс.
An introduction to Shader Art Coding
22:40
Просмотров 990 тыс.
Getting Started With Three.js
19:35
Просмотров 291 тыс.
I Remade YouTube From Scratch Using Just Bash
17:51
Просмотров 47 тыс.
Three.js Optimization - Best Practices and Techniques
17:47