Lighting & Material Texture

[00:00:00]
>> So the next concept would be to introduce lighting, and so we'll go back to our demo here, Because let's say right now the world two evenly lit, everything just looks like it's being lit up perfectly and we wanna add some sort of drama. So as we go from here to this image from here, everything is lit perfectly to somewhat more realistic, of a look, and so we'll just add that in.

[00:00:27]
And the way we're gonna do that is with lights, so we're gonna create a light, it doesn't really matter where we create the light somewhere before we return render and everything. So we're gonna say const light = new THREE.PointLight, we're gonna start with a Pointlight, there's different types of lights.

[00:00:45]
There's like spotlights, there's directional lights, hemisphere lights, but for now we're just going to be working with PointLights, it's the simplest one to work with, and it's kind of like a bulb. You can think of it like a little light bulb shooting light off in all directions, and it's just something that we placed in space and then it shoots light around it, sort fo equally from all directions.

[00:01:06]
So the first argument is the color, so we can say white as the color, and then the second argument is the intensity which is just gonna be 1 which is like a default intensity. Higher numbers would be really bright, lower numbers would be really dim just like a light bulb.

[00:01:19]
Then we're gonna add this light to the scene, I'll say scene.add(light). So remember, I mentioned earlier that MeshBasicMaterial, has nothing to do, with lighting, it's always gonna be the same color in the same output regardless of whether there's lights in the scene or not. And so, what we really need to do is we need to change this MeshBasicMaterial into a different material type that accepts lighting.

[00:01:46]
So we're gonna say MeshStandardMaterial, and standard is just their way of saying it's their good quality like typical material that you wanna use in your sketches, in your 3D virtual worlds that have to do with lights. And so now if we look, it's got this kind of cool eclipse thing going on, it's like the poster for Gravity or something.

[00:02:10]
But we want to make it so that it's actually lit, and the problem right now is that the light is in the same position as the sphere in the center, and so it's just hidden inside of this sphere. So we're gonna push the light out by placing it somewhere in space so we're gonna say light.position.set, maybe we'll make it 333 or any number you want really just some position in the world.

[00:02:44]
And then the other thing that we might notice if we compare this to our demo here, is that this looks like what we sort of expect, it's nice and smooth. But in this demo that we've got, everything's kind of shiny, it's like we're looking at a metallic globe.

[00:02:59]
And so to fix that, we're going to change the material properties, we're gonna say instead of MeshStandardMaterial with map, we're gonna say roughness is equal to 1. So roughness, if we're talking about different properties of let's say a ball that has some material on it. If it's a perfectly mirrored reflective ball, it's gonna be zero in terms of roughness, it's not at all rough.

[00:03:23]
The surface of this ball is gonna be perfectly smooth, and the metalness is gonna be one 100%. So the metalness is another value we can use, and so for a mirror, it would be one. But for what we want, we want it to be perfectly rough and not very metal at all.

[00:03:39]
We wanna turn off the metal on this, so we get rid of this sort of glaring effect in this sort of glossy effect. Then we're gonna turn up the roughness so that it's just a lot smoother on the surface, and we're gonna do the same thing for the other material, just copy paste those.

[00:03:58]
And then you can either increase the intensity of the point light, or you can reposition it, to be a little bit closer, and that will also increase the intensity. So maybe I′ll just increase the intensity a little bit, And yeah, now all of a sudden we have the scene, it's a little bit closer to what we want.

[00:04:29]
And again at any point we can just hit Cmd+S and export PNG, we should get a PNG.