Coding a ThreeJS Isometric Cube

[00:00:01]
>> Mathew DesLauriers: So I just wanted to get us started which a simple scene. Just like a cube type scene, just to explain some of the basics and then we're gonna start to go from there. Just like we did in the first part of this workshop, we're gonna start small and we're gonna iterate and try and iteratively improve our outputs.

[00:00:22]
>> Mathew DesLauriers: So I'm just gonna go back to my desktop in my terminal, and I'll go back to my folder where I saved my sketches so far. So I'll just show that, so we have our sketch from the morning, I'm gonna keep that. I don't wanna lose our sketch in the morning, or in the first part of the workshop.

[00:00:41]
So I'm gonna create a new sketch and let's call it Web GL, you can call it whatever you like but I'm gonna call mine Web GL. And so, when I'm in my folder here in the terminal, again we just do canvas-sketch. And we can call our file whatever we want, and then in this case I'm calling it webgl.js, JavaScript file.

[00:01:04]
And then we do new --new, and then other thing we're gonna do here is instead of starting with a 2D art work or 2D sketch, we're gonna start with a new three.js sketch. So, we do --template = 3, just like that, and what this will do is it's gonna scaffold out a three.js sort of template.

[00:01:30]
That is, instead of just using 2D, it's actually using three.js, and it will install that, and it'll start running. And if we copy this link, or if we just open local host in the browser, so you can localhost 9966, just make sure that the link that's here is the same port number, 9966.

[00:01:52]
If you have it open in another terminal it might be 9967 just be mindful of that. And also, one thing I didn't mention earlier on today is that, if you're making an experience that you wanna test on desktop and on mobile, you just need to copy this link, this local IP address.

[00:02:10]
As long as your mobile is on the same wireless as your desktop, you can view the same scene, in the same sort of setup, on your mobile device. And so here we go, I've opened it up and now I'm just gonna open my terminal, or sorry my code editor.

[00:02:29]
I'm just gonna open this file that we just created.
>> Mathew DesLauriers: So I'll give you a second to just open that, and you'll see on the browser it's now working with a full screen artwork, or scene I guess you could say. It's not really an artwork yet, and you can click and drag to move around the scene.

[00:02:54]
And so I'll just walk you through what's going on in this actual code example. This is what's given to us by a basic three.js template, and it's maybe more than we need or maybe not enough, it depends on what you're trying to build with three.js. And this is of course just one way of working with three.js, but this is the way that hopefully we're gonna be working today.

[00:03:17]
It will allow us to do some interesting stuff, so again we start with Canvas Sketch. We require that, the next thing we're doing is we're requiring three.js which is the library. And we don't need to install this because when we ran our terminal command, and we used Canvas Sketch with template 3, you'll notice it actual was installing this dependency.

[00:03:39]
So it installed it for us automatically in this case, but it did install it using the same technique of using NPM Install, basically. So it will appear in your package JSON and in your Node modules. And we're using this thing here, global.THREE = require('three');. And the reason we're doing that is because some of three.js's code just assumes that three.js, the variable, the three variable, exists on the window scope.

[00:04:06]
So we're just getting it on the global or the window scope, we're just assigning it as soon as we require it, that's kind of just a weird, annoying, hacky thing. But it's because this three.js library was created long before things like WebPack, or things like modules, and things like Node.js modularity.

[00:04:25]
And we're trying to sort of fit that into our way of creating very modular and individual pieces of code, so that's just something you cut and paste. Then after you require three, you can require any of its examples, so one thing I didn't bring up, is if you go to three.js.org/examples.

[00:04:46]
You'll actually see a whole ton of code examples, all of them are just using plain HTML and Canvas, so they're not even using Canvas Sketch, you don't need Canvas Sketch. But you can see there's just a bit more boilerplate, things like copy-pasting script tags, or something like that.

[00:05:02]
But generally, the code is gonna be very similar, there's gonna be a lot of similarities, so it's not that different. So there's lots of examples here, definitely worth spending some time just to browse through them cuz they're really cool. And all the code is open source, so I'm going back to this code here.

[00:05:24]
>> Mathew DesLauriers: So then we have our setting, it's kinda like the morning except this is the settings for our sketch instead of setting a dimension. Earlier we were setting dimensions with height, we don't need to do that if we don't want to. If you don't specify it then the Canvas just gonna be resized to this size of the browser.

[00:05:43]
Here we say animate = true, which basically just means start canvas sketch shop with a render loop. It's gonna be 60 frames per second so it's going to be just kind of what we need for three.js stuff. And then here these two lines just make sure that when we're setting up our canvas sketch we make sure that we ask for a Web GL context.

[00:06:05]
Rather than a 2D context which is what we had in the morning, and this line is just one that I tend to include a lot is to specify antialiusing when we create our web GL canvas. And that just means it's gonna give us a nice soft edge, and if we didn't have that true, if we had left that out.

[00:06:26]
You might notice a bit of a jagged edge on the end of the cube, it's very hard to see on the screen but if you save this as an image or a video, that's where it start to become more noticeable. So just in general, you wanna use this antialius true as a context flag when you're creating your web GL context.

[00:06:46]
It will make it a bit slower to render but it's not usually a big deal. And then we go into our actual sketch function, just like this morning we have a bunch of stuff inside our sketch function, and then we're returning something. And I'll just walk you through quickly what's going on, just so we're on he same page.

[00:07:03]
So we have a render, this is the three.js thing that sort of puts everything together and makes an image out of it. We have this clear color which is the background color, you can try tweaking this. You can set it to another color, and then you have this second parameter which is the alpha.

[00:07:21]
And if you set it to zero it means the background is gonna be transparent. You can even test this by clicking your canvas and exporting it, Cmd + S, looking in your downloads folder, and it should be a transparent image. So that's one way of getting a transparent background, but we're gonna keep it as black for now, and then we have a camera.

[00:07:43]
Just like we were saying earlier, this is using a perspective camera. So it's trying to sort of simulate this real way of looking at things that we are familiar with. The first argument here for the camera is the field of view, which is in degrees. And if you tweak that value, you're gonna see that the camera's going to start looking a little different.

[00:08:02]
It's gonna basically pull the field of view in or out, and so I like to use it just leave it at 45 more some time and then you can tweak it later if you want. These are the arguments, we won't get to end of them, this is aspect ratio which we're gonna change later on when the canvass resizes.

[00:08:21]
And then this is the near and far values and this is basically just saying how far away can we see a scene. So if you've ever played a video game where there's mountains in the very far distance, and the mountains just disappear because they're too far away. That's the far plane and if you're in a big open world and you're making a video game in a big open world you might need a really big number.

[00:08:44]
To say that there's mountains that are hundreds of meters away from me. Or you might need a really small number if your game is entirely within the small room or something like that, you don't need a thousand meters away from you. But we don't really need to think too, too much about that today, that's a bit more of an advanced topic, all right.

[00:09:02]
And then we're setting the, we're gonna chat a bit more about positioning in a second, but this is just so you know what's going on. We're setting the position of the camera to some xyz, so whenever we're talking about position, or rotation, or a scale in three.js, it's always in three dimensions.

[00:09:19]
It's xyz instead of just x and y, and we'll talk in a second about what that means, but for now just bear with me. So we set the position, you can try just tweaking these numbers, and you'll see maybe that it's gonna move around the scene. So, if you were to set this to 00, -4, now we're kind of on the same eye level as this cube.

[00:09:41]
And if we were to set it to 000, we're not gonna see anything, cuz we're sort of colliding with the cube, so. We wanna set it to some value like 22 or 444 or something like that play around with it, see what works. This one just says make our camera look at the center of the world, and then we have a controller setup.

[00:09:59]
This is what's giving us our Mouse interaction, we have our scene which remember is sort of everything all together. And we create a scene and then we add objects into our scene, and so we start with the mesh. And remember that this mesh that we're adding into our scene is a combination of geometry and material.

[00:10:22]
So it's a combination of one box geometry and one MeshPhysicalMaterial, or this is actually the same as MeshStandardMaterial, it's basically the same thing for our purposes. Basically just a material that is reacting to light, and so it's changing depending on where the lights are in this scene. We'll get into this sort of stuff a little later, but then you'll see some lights are being added to the scene.

[00:10:48]
We can come back to this later on, but for now you can just take a look at it. Maybe tweak some numbers if you want to get a sense of what's going on. And then here, instead of returning your render function, which is what we had before, and with the 2D stuff.

[00:11:03]
Now we want to have a bit more control over the actual sketch. So we wanna have a something triggered every time the browsers resized, so this is why we're returning an object instead of just a function. So our object has a resize function, here's where every time this browsers resized, this method will be called by Canvas Sketch.

[00:11:26]
And in this method we just set up our camera positioning and camera sort of aspect ratio, and we set up our size of the renderer. And then this is our actual render function, just like we had earlier in the workshop. You can tweak this stuff here, and you can get a sense of what's going on.

[00:11:47]
You'll see that every time we render, we're setting the rotation of the cube to time times this number here. And so time is a property that's in seconds, starting at zero, going up to however many seconds you're looking at this for. And if we were just to set the rotation to y, sorry, the rotation to time, you're gonna end up with a spinning cube.

[00:12:10]
If you multiply it by some big number, it's gonna spin much faster, and if you multiply it by a low number, it'll spin much slower.
>> Mathew DesLauriers: And then you have controls update, render, you're rendering. And lastly, we're just disposing of the scene whenever it's done with it, so that's kinda the template, it's a lot of stuff all in one file.

[00:12:35]
But we're gonna try and whittle it down and we're gonna try and do something a bit more interesting than just a cube.