React Three Fiber & Three.js - Lights Explained

[@damonkey01]

This video should be on the official documentation. Haven't found a better explanation than this.

[@SheriffKoder9]

Very well explained thanks a lot ! now i can use this tool to debug my lights

[@drgregoryhouse1470]

Nice content, but i think you should crank up your voice volume a bit and lower the music so you're more understandable

[@threeveloper]

Thanks for the tip, hopefully my newer videos have better audio quality 😄

[@BTjacker]

Very useful videos! Thx for your work❤

[@trungtrung2248]

Thank you, it's so helpful for me

[@threeveloper]

Great to hear that 🙌

[@trungtrung2248]

@@threeveloper can you make video about content: how to import 3d animation model like a character is kicking

[@threeveloper]

Yes, will add it to the list! But have some other videos planned as well 😉

[@xavierdoesntmatter]

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.

[@threeveloper]

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

[@xavierdoesntmatter]

@@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.

[@szulerinio]

What's the useControls hook?

[@threeveloper]

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 ✌️

[@threeveloper]

Check out my video about leva if you want to know more about it! 😉 kzbin.info/www/bejne/fILCdHyJZ759rqM

[@Luvnitsawhney]

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.

[@threeveloper]

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? :)

[@timetosleep8055]

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.

[@threeveloper]

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

[@ninjarogue]

i can't really follow much of what you are saying.. not sure if it;s the background music or what

[@threeveloper]

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! 😉

[@ninjarogue]

@@threeveloper all good thank you!

[@mykimbui6940]

Hi, which GUI are you using ? Thank you !

[@threeveloper]

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! 😉 kzbin.info/www/bejne/fILCdHyJZ759rqM

[@mykimbui6940]

@@threeveloper Thank you, that's very helpful :D

[@mykimbui6940]

Do you need to declare the DirectionalLightHelper somewhere ?

[@threeveloper]

@@mykimbui6940 That should be imported from 'three' 👍

[@ahmedsyed671]

Can you do a video about camera and how to animate them ? thx

[@threeveloper]

Hey Ahmed! I already created a video about camera's 😉 You might find that one useful: kzbin.info/www/bejne/f6TVXpt_q8qIgZI

[@BrosifMcJoseph]

aye no music next time bro, video would be way more clear... or drop volume a whole lot

[@threeveloper]

Thanks for the feedback ✌️ In my later videos the music should be less loud 😉

[@ics7778]

yor are very fast forwarding most of your points are very hard to understand

[@threeveloper]

Thanks for the feedback, I'll slow down future videos 👍

[@gabrielecicconetti562]

it doesnt work it keeps printing a warning three.module.js?d45b:20883 THREE.WebGLShadowMap: has no shadow and no light is casted

[@threeveloper]

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! 👍