Light & Grid Helper

[00:00:00]
>> Okay, so far we have this, a couple little things came up just in the last few minutes. So one of the things is let's say we have this light and it's in our scene, but we can't really see where the light is placed, and so we wanted to move this light around.

[00:00:15]
We're gonna just have to like kinda start messing with these numbers, it starts to get a bit confusing. You're like trying to reason about where it is, well, there's a thing called point light helper, in three.js, that we can use just like this. We're gonna do scene.addnew THREE.PointLightHelper, we're gonna pass in the light.

[00:00:36]
And, what that's gonna do, is wherever the light is in the scene, it's gonna draw this huge sort of, shape this wireframe shape. And actually it's a little bit huge right now because it's default size of one, so let's make it a bit smaller by saying 0.1. That's the second argument there is the size of this little helper.

[00:00:56]
And so, if we've got that now we're gonna see a little white diamond wherever the point light is placed. So now we can actually start to position the light just as we want and we can see where it is, and we can just get a bit more exact with that.

[00:01:11]
So there's a lot of these concepts in Three.js called helpers, these helpers are usually these wireframe things that just show us where things are, and it's really helpful for debugging. But then for the actual production, you might wanna just turn those off by commenting that out, Question?
>> Is there a similar helper for the plane or the axis lines?

[00:01:35]
>> Yeah, so there is, good question. So let's say we're confused about how to orient ourselves here, we can say scene.add(new THREE.GridHelper). And the first argument here is the size of the grid, so if we just use 1, it would be almost the same size as the sphere something, so we're gonna use maybe 5.

[00:01:55]
And then the second argument is the divisions, the number of divisions in our grid, we can leave it as the default, or we can make it more divided if we want to sort of see that a bit better. And then the third and fourth arguments have to do with the color of the grid, so if you're working with a scene that has a gray background, you might actually wanna change the color of the grid.

[00:02:15]
And so, if we actually look now, we're seeing our world a little bit better with this grid, there's also another let me just check the docs here, cuz there should be also another helper that has to do more with the axes. So it's called AxesHelper, so again, just maybe keep the docs open, you might wanna pop this open whenever you're lost I'm always forgetting things with the docs cuz there are so many features here.

[00:02:43]
But if you just copy that, we can pop that in this as well and see how that looks. Yeah, question?
>> How do I restart my server?
>> Good question, so let's say something is wrong here, maybe it's no longer working, what you can do is you can open the terminal and hit Ctrl+C, and that will quit the the server.

[00:03:09]
So that'll stop serving and if you reload, you're gonna get like a blank page for this kind of thing. And then we're gonna wanna restart our server by just running canvas-sketch in the same folder that we were running before, with the filename that we've been editing, so it's called sketch.js.

[00:03:23]
And you no longer need to add dash dash new or dash dash template or anything cuz those are only necessary when scaffolding out the file. But now that it's there, we can just run this command, and it will open back up. Yeah, so one thing I might not have mentioned, but when we ran all these scaffolding things, it ended up creating this sort of structure of file like a package.lok, package.json.

[00:03:48]
And also a node modules folder which is gonna bring in and include things like Three.js or Canvas Sketch.