Capabilities of Three.js: Color, Lighting, and Composition

[00:00:00]
>> Mathew DesLauriers: Okay, now we can start to play with these values a bit more. We can start to try and create something that looks a bit more interesting. So the first thing I'm gonna do is just do the same thing we're doing with position and set the scale to three random values.

[00:00:17]
Just copy pasting.
>> Mathew DesLauriers: And then I'm going to increase the number of meshes,
>> Mathew DesLauriers: To something larger. I'm just going to play with these values a bit. Increase the size. So multiply scale, remember, is another of way of saying, I want to multiply the x, y, z by the same value.

[00:00:43]
>> Mathew DesLauriers: And then the other thing that maybe we can do from this morning, we can just do it again, is to try and add some random colors to this. So one way to do that is again to bring in the random color palettes. So we'll just do that now.

[00:01:00]
At the very top of our file require nice color palettes and this is not the only way to produce random color palettes. Another thing we can do is that's really powerful is to take HSL and produce random variations of HSL and that's maybe something to do as an exercise later.

[00:01:21]
Later on, but for now we'll just use a random color palette module again. So we require it up here and then somewhere before our four loop let's just select a single a palette. So we do random.pick. Palettes and then again we're gonna select a single color from that single palette.

[00:01:42]
So random.pick(palette).
>> Mathew DesLauriers: And we can start to see things are coming together a little bit more.
>> Mathew DesLauriers: And every time we reload, we're starting to get some more interesting. Results. And some of them are actually pretty nice.
>> Mathew DesLauriers: We can use some of the same tricks we did this morning, we can use Gaussian randoms.

[00:02:10]
So maybe instead of always using a range that produces a uniform randomness, we can use Gaussian randomness. We can also do some other stuff like that, we can. Set the rotation maybe of the mesh, which we'll get into a bit. But the next thing I wanna do is add a bit of lighting.

[00:02:29]
Just so that we have some of the basics covered, and then we can work our way through them.
>> Mathew DesLauriers: So after we've done our four loop, lets add a light. And our light is gonna be a directional light. And the constructor, just remember at any point if you're stuck with these methods or these classes, three.js has a really extensive documentation.

[00:02:56]
So if you go back to the GitHub repo, you go to three.js and check out the docs, they have docs on all these things so we can find directional light. And it gives us what the arguments are for the constructor, and it also gives us little examples
>> Mathew DesLauriers: And so the way it works is you pass in a color.

[00:03:23]
Let's just use red. I like to use red as a test, just so I can actually see it. Sometimes if you use white, it doesn't look that different. And then the second value is the intensity of the light. And then before we see anything we actually have to add it to our scene because right now it's not even in our scene.

[00:03:39]
So once it's in our scene this light will get used but remember what I was saying earlier about materials is that this particular material we're using is not gonna respect the lighting that we're using in our scene. So we actually have to go up and change this MeshBasic(Material) to be MeshStandard(Material).

[00:04:04]
>> Mathew DesLauriers: And everything is gonna be very red and that's because our light is very red. So you can go back to being white and if it all works you should have something like this.
>> Mathew DesLauriers: You're starting to get something that it's a bit closer to this maybe monument valley type of artwork.

[00:04:27]
>> Mathew DesLauriers: One thing we can also try and do is place the light in a different position. So the way this works is you do light.position. And you set the xyz, I'm gonna set it to maybe be 0, 4, 0, which means that the light is directly above the center of the world.

[00:04:44]
So it's perfectly above the center of the world that it doesn't produce any shadows on the sides of the cubes. And if I was to make it maybe directly to the right or left, or forward or backward of the world using 0, 0 and then some number. We're gonna see that it's only lighting up a single side of the cube.

[00:05:02]
And I think that's kind of interesting for the image that we're trying to create. But you might also wanna place it in a way that lights up all the different sides of the cube or most of the sides of the cube.
>> Mathew DesLauriers: And then if you've gotten this far one last thing we'll do is just add what's called an ambient light.

[00:05:21]
So an ambient light and I'll show you by setting these values to be 0, 0, 4, so that we have a very harsh light coming from one part of the scene. And the directional light is just like, it's a light that comes from one part, and just sort of acts a bit like the sun, it's just like blasts light all over your scene kind of thing, and you'll notice that this part that isn't lit by a light is black.

[00:05:50]
And so one thing we can do with an ambient light, is we can set this color, instead of being black, to be a different color. So you can scene.add{new THREE.AmbientLight, and you can set that color to whatever you want. And what that's gonna do is when three.js sees part of your mesh that isn't very well lit by the lights, it's gonna use a bit of this blue, or a bit of whatever color you want.

[00:06:19]
So quite often I just use like a really low, really dark color. So if you use HSL, you can produce a really dark grey like 10% light or at 20% light. And then that's just gonna be so that it's not perfectly black but it's a little bit grey.

[00:06:36]
And that's a really subtle change. Sometimes you can use a bit of a purpley color and it looks pretty cool.
>> Mathew DesLauriers: So so far we have sorta introduced some new stuff here, and we're still trying to wrap your heads around how all of this positioning stuff works, and that's okay.

[00:06:59]
But maybe by now you'll have some cubes being rendered in different colors, and the next logical step is to see how do we actually introduce animation and how do we bring this into a bit more life.