React Three Fiber & Three.js - Lights Explained
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2022
- Hi there 🙋♂️
In this video you'll learn how to implement all the available lights in three.js using react three fiber! This will get you started and allow you to use the lights in your own scene. There is, however, much more to tell about lights, so stay tuned for that or check out the original three.js documentation already! 🎉
--
This channel is meant to help you start developing 3D websites. The videos are meant to be short and educational. Make sure to subscribe in case you want to learn more about developing 3D websites!
---
🔗 LINKS MENTIONED IN THE VIDEO
3️⃣ Starting code: github.com/sjoerdvanBommel/th...
3️⃣ Final code of this video: github.com/sjoerdvanBommel/th...
---
🔗 OTHER VIDEOS
3️⃣ React Three Fiber & Three.js - Materials Explained 🔮: • React Three Fiber & Th...
3️⃣ Learn to debug your UI real time using LEVA: • Learn to debug your UI...
3️⃣ React Three Fiber & Three.js - Textures Explained: • React Three Fiber & Th...
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: / threeveloper
3️⃣ Twitter: / threeveloper
3️⃣ LinkedIn: / sjoerd-van-bommel-8a23...
3️⃣ Discord: Threeveloper#6584
---
⏲ TIMESTAMPS
0:19 Introduction
2:05 AmbientLight Explained
2:41 HemisphereLight Explained
3:03 DirectionalLight Explained
4:26 PointLight Explained
4:50 SpotLight Explained
6:28 RectAreaLight Explained
---
Music by Coma-Media: shorturl.at/tyCEF
❌ DON'T CLICK HERE
shorturl.at/mqtCR
Got you there ;)
#threejs #webgl #reactthreefiber #3d #webdevelopment #frontend #javascript
Very useful videos! Thx for your work❤
Very well explained thanks a lot ! now i can use this tool to debug my lights
Nice content, but i think you should crank up your voice volume a bit and lower the music so you're more understandable
Thanks for the tip, hopefully my newer videos have better audio quality 😄
Thank you, it's so helpful for me
Great to hear that 🙌
@@threeveloper can you make video about content: how to import 3d animation model like a character is kicking
Yes, will add it to the list! But have some other videos planned as well 😉
One thing that brought me to your video that was missed sadly is the fact that when you import models from blender that have metallic surfaces that they do not get lighting effects from most lights. I know Hemisphere, Ambient and Directional do not light them up, need to try the point light now i guess.
Thanks for pointing that out! :) You might want to check the type of the material that gets generated from the metallic surface in blender, so based on that you can know what lights reflect on it
@@threeveloper I finally solved my issue by using drei. The Environment option to add lights seems to always affect metallic surfaces from blender. I was trying to do an ambient lighting effect and this was the only route I could figure out that was lighting from all directions that would work on metallic. I'm not sure how performant it is though.
Hey great video, I wanted to know if I can add three rect lights in a scene and then change the X and Y axis of the lights ?
So basically I want to light a product in a virtual setting and have 3 rect lights one on the top, one on the right and one on the left. and then change the X and Y locations of the lights and not the light emitting source area. Would love some help.
Hey Luvnit! Nice that you're reaching out. I'm not fully understanding the difference you mean between the "lights" and the "light emitting source area". But you can move lights by setting a ref to the rect light and changing its position in a useEffect. Or do you mean something else? :)
Hey, How would I add a helper for a shadow camera? In vanilla threejs it's very easy:
const spotLightShadowHelper = new THREE.CameraHelper(spotlight.shadow.camera);
scene.add(spotLightShadowHelper );
But I don't know how to do this in R3F, tried using same method as addding helpers for lights. (Baking shadows would be better, but still would like to know how to do this xD. Maybe this could be a video on its own.
That indeed sounds like a video idea 😄 But until then: more people ran into this issue. You should give this custom hook that I linked below a try, which accepts a ref to a light :) Let me know if that worked out for you!
stackoverflow.com/a/69424854
Can you do a video about camera and how to animate them ? thx
Hey Ahmed! I already created a video about camera's 😉 You might find that one useful: th-cam.com/video/Isr-hIveUK0/w-d-xo.html
What's the useControls hook?
That's a hook I'm using that's offered by the package "leva". It created this little GUI where you can live update some properties ✌️
Check out my video about leva if you want to know more about it! 😉 th-cam.com/video/FQ_CIS2YJxA/w-d-xo.html
Hi, which GUI are you using ? Thank you !
What GUI do you mean exactly? Are you talking about the debug panel? That's from a npm package called "leva". I created a seperate video about this, you should check it out! 😉 th-cam.com/video/FQ_CIS2YJxA/w-d-xo.html
@@threeveloper Thank you, that's very helpful :D
Do you need to declare the DirectionalLightHelper somewhere ?
@@mykimbui6940 That should be imported from 'three' 👍
i can't really follow much of what you are saying.. not sure if it;s the background music or what
I'm sorry for the sound quality of this video. I was travelling but wanted to create some content from abroad. For this reason, I added english subtitles to the video. Hopefully that will help you out! 😉
@@threeveloper all good thank you!
aye no music next time bro, video would be way more clear... or drop volume a whole lot
Thanks for the feedback ✌️ In my later videos the music should be less loud 😉
yor are very fast forwarding most of your points are very hard to understand
Thanks for the feedback, I'll slow down future videos 👍
it doesnt work it keeps printing a warning three.module.js?d45b:20883 THREE.WebGLShadowMap: has no shadow and no light is casted
Hi Gabriele, based on this it's hard for me to answer your question. If you need further help, feel free to reach out to me on my instagram which is linked to in my profile! 👍