Three.js Lighting Tutorial (JavaScript) | Light Types Explained!
Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
In this project we're looking at Three.js light types and 3d lighting in JavaScript, exploring the different lighting setups. The goal is to build out a full understanding of the light setups and types, such as ambient, hemisphere, rect, directional, point, and spot lights. We'll walk through them one by one, going through how they work, how to set them up in code, and some standard uses in big games.
This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js lighting capabilities.
The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.
In the video, we cover:
* Three.js's Lighting Types, including examples of usage for each of the major types of lights.
* AmbientLight, HemisphereLight, RectLight, DirectionalLight, PointLight, SpotLight
* Common usage of each one in games.
* How to instantiate and use each in JavaScript.
Пікірлер: 35
If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt
Thank you for the tutorial!!!
Amazing video! Liked!
Fantastic video!
@simondev758
3 жыл бұрын
ty!
Great video. The RectAreaLight is a great addition. A good video would be on shadows as I have often seen questions on stack with people having trouble with shadows.
@simondev758
3 жыл бұрын
You read my mind! I'm already putting together the shadow one, figured lights and shadows were deep enough even as beginner tutorials to warrant separate vids.
@kmdaykin
3 жыл бұрын
Yes, shadows are great. If you want to hear your graphics card howl at you like a trapped animal.
Great video @SimonDev! In case of an archviz indoor scene, will the walls block ambient lights? Since you mentioned area lights for windows in an indoor scene, how would the overall ambient lights work to illuminate an interior with a few portals to allow the light to come in?
@simondev758
3 жыл бұрын
At that point, you're very much in "figure out something" territory. Unless you're using some full global illumination solution, this is kinda where you make distinctions between indoors and outdoors, changing the ambient levels accordingly, that sort of thing.
Hi Simon...Great video...I would like to know how to create the control panel you used to change the parameters of different lights, it would help the settings of the lights in the scene...it 's so hard to try just by numbers and code lines...
@simondev758
3 жыл бұрын
Thx! I used something called dat.GUI, a lot of the three js examples were already using it so I just kinda picked it up as I went through the source. You can find it here: github.com/dataarts/dat.gui Here's a little tutorial on it: observablehq.com/@bumbeishvili/three-js-dat-gui-controls
🤙
How can i make the bloom?
Hi, i have a problem with lights. I declared them and added them to the scene but they don't work. I tryed all of them , is that a color problem or what?
@plainprinceprogramming
13 күн бұрын
Im not sure either but it might be a problem with rtx gpus or if your gpu doesnt support something
Thanks a lot
how is the environment texture added here the background mountains
@simondev758
2 жыл бұрын
Skybox
can I use a video to light up the scene?Such as TV screen in this tutorial.I d like to use a video onto this TV screen as a light source, what should I do?
@diogoribeiro477
Жыл бұрын
You would probably need to have some code to get the average, mode or something similar from a frame of the video and then change the color of the RectAreaLight to that value. How often you update the color would depend of the performance cost. That's my guess at how to do it, but I'm a beginner at Three Js.
You may have heard this before, but you should do voiceover work. (Assuming you would want to do such a thing.)
@simondev758
Жыл бұрын
I haven't heard that, but I'd totally be open to it. If you know anybody who wants a totally monotone dude, send them my way.
@JohnSandersTV
Жыл бұрын
@@simondev758 Unfortunately I've only ever been a client of voiceover folks, but your voice does something Stellan Skarsgard-ish that just sounds perfect for certain applications.
People Use Unity And Unreal Engine 4 Ultra Legends Use Javascript
@simondev758
3 жыл бұрын
😀
Make video about Babylon
@simondev758
3 жыл бұрын
I can take a look at Babylon at some point. Is there a reason you want Babylon? And what are you looking for, beginner?
@6thgermanwehrmacht798
3 жыл бұрын
@@simondev758 Well I am beginner of javascript game development
@simondev758
3 жыл бұрын
Hmm I've already got quite a bit of beginner JavaScript tutorials, have you checked those out in the meantime?
@6thgermanwehrmacht798
3 жыл бұрын
@@simondev758 I found this channel today I will check
@simondev758
3 жыл бұрын
Awesome, let me know if you have any other suggestions. I definitely try to keep them in mind when deciding future content.
Where is the code in github byddy?
@simondev758
Жыл бұрын
This one is just instructional, don't think there's accompanying source worth looking at.
you rock