3d Graphics with three.js (Part 1) ~ MMP 310

hey class in this video we'll be talking about 3d graphics and using a new library the 3.js library we'll go over creating a simple scene using some basics of 3d rendering and go over the basic syntax and installing the library so to get started i'm gonna create a new project and then we'll take a look at the 3js library so i'm going to make sure i'm on my mmp310 repository i'm going to click show in finder i'm just going to make a new project here so this is project 3 and i'm going to do this as 3-1 so if i make more versions of it that'll be easy and i'm not going to add anything here so we'll be adding some stuff from scratch based on the 3.js website some tutorials that they have there so i'm going to open up 310 in sublime text so i have that ready to go and then let's take a look at the 3gs library so i'm going to open up a chrome window and just go to 3 js.org and so there's a lot of similarities and differences between 3js and p5 which we used in our earlier projects in the class there's also some things that are similar with the quiz project that we did for the second project so it'll be a good chance to kind of triangulate or see three different versions of using javascript for a project in each case we can kind of think of the logic of our program as being separate from the renderer both 3js and p5 use the canvas as a renderer as opposed to the regular html document and our quiz project just uses html and css as what we can call the renderer so we'll talk about that a little bit more uh in 3js we actually have a object called the renderer so i'll talk about that a little bit more once we get to that and we'll talk about some of the differences between 3d rendering versus 2d rendering but let's first just look at the 3.js website so it's a really nice website it's similar to the p5 website in that it contains documentation and examples on the front page there's a whole bunch of examples of projects that people have done using 3js let's look at a couple of these just to get a sense of the different things that are possible so i'm just going to choose a couple this looks kind of interesting so this is a 3d interactive experience that goes along with an opera production so you can see the lighting that they're using some of the 3d objects there's also this sort of interactive a little light that we can move around so a lot of particles happening experience kind of goes along with the music so there's a lot going on in the scene but still being rendered in the browser in real time and ultimately it's actually using quite simple uh elements it's just combining them in a complex way so let's look at one more scene there's a lot of lighting here we probably won't talk too much about lighting in this video but we'll get into it in a later video so that was cool let's take a look at another example this is the one that i think i showed in class previously and this is a website it's sort of a portfolio website using 3gs is kind of an interface so it's got this these different physics and animations with this car and even some audio you can hear the car it's making sound but then we can kind of see some projects that the developers worked on and we can actually interact with them so it's kind of behaving like a normal website but it's just being rendered in 3d so if i go in here and hit enter it opens up a project that the developer did so that's a fun way to make like an interactive portfolio that's kind of like a little game there's more game like examples this one is a sort of frogger style game called crossy road oh so using some pretty basic shapes and stuff but also it uses physics and interaction let's take a look at a couple more so this is an interactive animation actually i'm not sure that oh it is interactive so i have to put these pieces together on this sort of like robot character again it's using pretty simple shapes and geometry um but it's combining them to a nice effect it's got a nice animation um and so it's also real time rendering to make it interactive it has to be rendered in real time so now i can click this little switch nice little animation actually can't really change the camera at all so it's a fixed camera yeah so most of this is just a narrative animation with some interactive components and it's in korean so i actually don't know what it's about but it's a cute character it's a nice animation so it's really using a lot of simple shapes and stuff which is nice so let's look at one more example this is one that i always like this is just kind of a goofy um dance party website with a few different uh characters and so it's interactive so i can change how much they're dancing and various aspects so in some ways this is kind of like a demo of how this works oh and i can move the character around as well it's pretty fun you can change the background color as well so that's pretty fun um so just a few different examples of things that we could render in 3d using 3.js let's look at a couple more things on their website so they have a really good documentation where it has everything that you need to use anything that the library does we're actually going to start with this tutorial when we first start creating our project but you can search anything in here so if you want to learn how to make a box for example you can just type in box and it'll show you box geometry and some of them have interactive examples and then some code so it's very useful especially with 3d it's kind of hard to get started so there's a lot that it will help you do we can look up materials you can look up effects effect composer and look up different examples so the documentation is really easy to use there's also a lot of examples which you can scroll through and see how different stuff looks and try different things and then you can also search stuff in here so like if i wanted to do an animation i can type an animation and then we'll see everything that's just limited to animation so there's a lot of useful stuff in the docs and the examples there's one more thing here which is the editor which is a relatively new tool it's a little bit like the p5 editor web editor it's a good way for us to look at how a 3d environment works so let's talk a little bit about the differences in 3d so obviously we're only just adding an extra dimension here but it adds a lot of complexity for various reasons so let's talk about some of those we won't look at everything in the video today but we'll cover them over the next couple videos so when we're working with 2d and specifically when we're working in p5 we're using a canvas and we have two dimensions we have the x-axis which goes this way and we have the y-axis that goes this way and so when we describe where something is in space we give it an x-y value so however far it is from the left side of the canvas and however far from the top of the canvas is so if we want to draw an ellipse we would make a point and then we draw the ellipse if we wanted to draw a rectangle we'd say this is the origin of the rectangle then we draw a rectangle same thing with like images or other shapes and things like that when we're looking at a 2d image we can create things like perspective by making things larger or smaller but typically especially with the projects we've been doing in class we haven't really thought a lot about like depth or if something is far away and we also don't think a lot about the fact that there's a perspective on the image we kind of think of it as just a flat image and the relationship between the viewer and the image is implied by the fact that it's a 2d surface so when we're looking at a computer which the browser is on you know we just have a 2d surface and typically the person who is looking at it is right here and they're just looking directly at it so it's kind of implied that we're just looking at a flat surface when we talk about rendering in 3d there's a sort of illusion of depth that's created by the renderer and so even though we are still just looking at a 2d surface we have to behave as though we're looking at a 3d surface and that changes a lot in terms of how we consider how to render shapes and colors and objects on the screen so obviously with 3js we no longer have this x y concept we have we still have the x axis and the y axis so we can think of like x going horizontal and y going vertical in three j s y is going to be probably what you're used to in math which is the cartesian coordinate system where y is positive as it goes up as opposed to in p5 where y is positive going down so x is positive going to the right and then z uh is at this new axis that's actually coming directly towards us and so z is positive coming basically out of the screen so if we imagine you know here's our computer that's a pretty bad computer drawing but just imagine this is our computer and here's us here's our eyeball and we're looking like that so now z is basically like coming towards us obviously it's not really moving towards us in space because the computer is still a flat surface but the z dimension is the illusion of depth so z is positive as it comes forward towards us and negative as it goes away from us so that's kind of the main difference with the 3d objects is if i want to put something in space in 3d not only do i have to position it you know it's let's say it's 10 on x and 10 on y it might also be like 10 on z and so it becomes a lot harder to tell where things are and we'll go through a few examples of that unless you can change your perspective so when we're working in 3d we're going to have to change our perspective and so the way that we think about that is what's called the camera and so with 3d we no longer have this implied perspective of of the 2d we have a perspective that can change and so if we have here's our our space we now have our camera and so our camera is like this whole other thing where it has directionality and position so if we have like a cube right here if our camera is looking directly at that cube it's just going to look like a square okay if our camera is up here and it's looking down at the cube then we're going to be able to see the top of the cube like that as well as some of the front of the cube if it's looking up at the cube we'll see the opposite of that and then uh if we're you know moving to the right or the left then that's when you start to see like the edge of the cube like this um if we move the camera you know over to the right or over to the left so the angle and the position of the camera matter as well if the camera is very close to the cube it's going to get much bigger so if we move the camera like up to here it's going to be much larger if we move the camera way back here then the cube gets smaller okay so in programming we're just kind of trying to recreate the way physics and you know perspective works in real life we also now have to consider more of the geometry we're no longer working with just a flat plane so you know with a plane we just have basically x and y or a circle you know we have the radius of the circle and it goes around with 3d shapes now we have an extra dimension which actually adds a lot to it right we have to a cube we actually have six different sides there's the front the back it's back here here's the top there's a bottom there's a left and there's a right with a sphere it kind of looks like a circle because it's even it has a radius so it's even on all sides but it can still change depending on our perspective on the sphere and then of course with other geometries you know things get more complicated so with a rectangle you know we really only have to think about one two three four different points with a cube we have to think about one two three four five six seven eight different points that make up that cube with a rectangle we only have one plane right it's right here with a cube we have six planes that we have to worry about and with a rectangle we only have one two three four edges with a cube we have one two three four 5 6 7 8 in the back and then 9 10 11 and 12 edges so with 3d geometries we really have a lot much higher level of complexity we never really think about like vertexes and edges and faces when it comes to a regular 2d rectangle but with a cube we now have all this extra data that we have to consider the last bit that makes 3d complicated which we won't get into too much in this video is lighting so if we have a sphere if there's no lighting at all then the sphere will just be dark it won't be visible if we have lighting then we'll have a certain color if we have lighting coming from a direction then we'll have you know more light over here and less light uh sort of at the back of the cube and if we have a light that's a different color then we'll we'll add the color of the light to the color of the object there's a lot more things to think about when it comes to 3d rendering and we're recreating that stuff in code so 3js just kind of like does its best to recreate how things look in reality but it adds a lot of complexity so there's a lot of things to cover and one of the things that i've found working with 3js it's a very good implementation of 3d rendering but there's a lot of cases where you might forg something might disappear and you don't really know why so there's a lot of things to look out for so today we're just going to make a simple scene we're going to do it in code but first i want to show the editor and later on i'll actually show you if you make something in the editor you can actually export it and load it into your own scene so you can either make stuff using code or you could actually make stuff using the editor and then add it to your own scene if you prefer to work that way so let's just go over stuff in the editor as a way to kind of look at the properties of of a 3d renderer you can see immediately that i can actually change the perspective of my scene i'm clicking on the the left button on the mouse and just moving it left and right to rotate around the y axis if i go up and down i'm rotating it along either the x or if i rotate around the z axis and you can actually see the axis down here and the nice thing about this little widget in the bottom right is that you can see the positive versus negative directions so with the y label that's the positive and then the green dot at the bottom is negative same with the x and the z so right now we can see that um z is pointing towards us x is pointing to the right and y is pointing up which is the default so we also have like a scene view over here which right now it just has our main scene and our camera the camera is kind of where we're looking from um and we can add new cameras but there's just kind of a default camera stuck in here the scene is how uh 3js sort of organizes the objects that it needs to render so everything has to be part of a scene for that scene to be rendered and so if you look at the widget as i'm moving the scene around you can kind of see what our current orientation is so then if we click on the scene you can see there's a few things there's a position a rotation in the scale so you can edit those things for any of the objects there's also a geometry and a material so let's actually add an object to our scene so if we go to add and we add a box it's going to add a little box to the middle of the scene i can also zoom in and out on the scene using the mouse wheel if you don't have a mouse wheel you can use whatever your the scrolling gesture is uh on your device and you can see that with our box there's we can see kind of the different faces of the cube right now it's default is black it's wireframe so we can see the geometry but that's not always the case and there's this these little arrows poking out of it that highlight when we hover over them that are object manipulators so right now it's set to the position which is this like little arrow icon up here so i can move the position and if you look at the position values over here as i do that you can see that they're updating so we can actually edit the position here if i say it's like five it'll disappear but it's really just over here so you do have to be careful with the camera perspective there and so you can see those values changing as i move the box around we can also change to rotation so we can rotate on the different axes and you can see the rotation happening here as well and the nice thing is this is kind of interactive so i can move these up and down and then finally we have the scale so we can scale the whole thing or we can scale each individual dimension so that's a box so we have the geometry we can actually change the geometry as well which is different than the scale the basic geometry is then multiplied by the scale you can also change the material so there's a lot of different properties for the material we won't go over them in too much depth um today just because we are going to kind of skip over that because it gets a lot more complicated so we'll do another video for that you will notice that if i change the color nothing really happens because there's no lighting in the scene so with color in a 3d environment it usually has to reflect light but we can either change the type of material so for example if i use a mesh basic material now it doesn't care about lighting if it's just a basic material so i can set it to whatever color i like if i stick with the default lambert material i can actually change the emissive color which makes it a sort of a light so it'll actually cast light out of it but i'll probably just stick with basic materials for today so let's look at a few of the other things we can add to the scene before we move into our code so if we go to add that's the box we also have a circle which is actually just a 2d object so if we turn it around it's invisible on the other side so that's another thing about 3d objects is they only actually render on one side i think you might be able to set yeah so in the material you can actually set it to be double-sided so then you can see it on both sides but the default is going to be front so you only see it on the front and so with a circle with that geometry we can actually increase the number of segments in the circle to give it more detail so if we have very few segments it's going to eventually just be like a triangle and if we add lots and lots of segments then we get more a smoother circle and then of course we just have the radius to make it bigger or smaller the dodecahedron is a 12 sided object we can increase the level of detail there as well to get closer to like a sphere object icosahedron is another way of creating basically a sphere and again if we increase the detail we eventually get towards more of a sphere like object but it's basically just a sphere same thing with the octahedron so these are just kind of like different geometries that have a radius then we also have the sphere itself which has a radius how big it is and then the number of segments and the height segments so we can add more details there and in a 3d scene the more detail you add the harder it is or the longer it takes to render the scene obviously it's not having any issues here it's not slowing down because we don't have that much geometry but you do have to be careful i just started a new scene to clean that up a little bit so here's our taurus it's basically like a donut it doesn't look like one right now because we don't have a lot of segments but if we add more segments you'll see it starts to look more like a doughnut um you can also change the radius which is the inside and the width of the tube which is obviously the width of the the sort of doughnut part we can also use a cylinder which is like a circle with some depth so there's a height to the cylinder and then there's the size of the radius on the top and the bottom so we can make a cone if we make the bottom very small and then we can also change the number of segments to make more detail as well so those are some of our basic shapes there's also some lighting and different things in there that we're going to kind of skip for now but the editor is very useful i'm going to go into the code for a while but we'll come back to this later so i'm just going to leave i'm going to go to new here and hit ok so let's actually build out our scene in our own code i'm going to go back to the 3js website and go to the documentation and go to getting started so i'm just going to go over how to set up the scene and they have some good examples that we can just use and i'll talk about what everything is doing i'm not going to cover every single aspect of this part but we'll cover the things that we need to get our project started so it's nice that they actually have some html for us to create our html site so i'm going to copy and paste this html and then paste that into sublime make this a little bit bigger and save as so i'm going to save this as my project 3-1 this is going to be index.html and you can see that uh 3js wants us to write our javascript directly into the html page typically that's not what i like to do so instead of doing that i'm just going to delete this and add a little source here and so we'll call this scene.js because we're just going to be building a really simple scene today going over some basics so this is scene.js and we'll make that javascript file in a second and then of course we need this javascript this 3.js library so they have a link to the library here you can see it's 3js.org build slash 3.js there's also 3.min.js so if you want to download that version of the library feel free to do that i'm going to save this and just make sure i'm in my project 3-1 folder and save as 3.min.js and then they actually suggest having a js folder because we are going to have to add at least one more javascript file so i'm going to make a js folder there and save the 3.min.js there's really it doesn't make a big difference which one you use the 3.min.js obviously is going to have a lower file size so since we'll be uploading it to github eventually that'll just make that a tiny bit faster now we can see that i have the 3.min.js here i'm going to add in min.js they also have their css written directly into the html you can see that basically they did what we did in one of our p5 examples which is to take out the margin for the body and to change the canvas display to be blocked so for a 3js project even though there's no canvas here the library is actually going to create a canvas just like p5 does on the html document which is going to be used to render our 3d scene so let's open this up i'm going to start the sublime server and go to localhost 8080 and i'm just going to type this in so this is project 3-1 and so we don't see anything yet because we haven't added any code yet so let's go back to our creating a scene and so they basically give us the the main things that we need to create our scene so the first thing that we need is the scene itself so i'm going to copy this over and i'm going to create my new file and save as so this one is just going to be in my main folder i'm going to call this scene.js and so i'm going to paste this in here so let's talk about what this means constant scene gets new 3 dot c okay so some of this probably looks familiar some of it probably looks different constant we learned in our last project is a constant variable so we're not going to reassign the scene to anything so we don't need to use var or let here we can just use const scene is the variable name that we're going to use for the scene we're assigning it the three dot scene is an object so we're using new to instantiate a new object so we talked about that when we were talking about classes and then the reason three in capital letters is appended here is because that's a convention of the library everything in 3d in 3js is part of this gigantic three object so if we go to the console and type in all caps three you can see there's a ton of different properties and methods here and everything that we can do in 3js is inside of this three object the reason they do that is to avoid having like a million functions and properties that are part of the global scope p5 avoids this by limiting the number of functions and properties that are globally defined but it does represent two different programming philosophies in javascript we want generally to keep things out of the global scope so that we don't have multiple variables defined in the same way so one of the things that you probably have noticed with p5 is if you're trying to make like a color and you want to name it red you're going to run into an issue because there's already a function called red 3js avoids that by putting all of their methods and properties inside of the three objects so things like you know p5.ellipse or things like the ellipse the rectangle the background all that stuff in p5 is now in 3js it's going to be three dot ellipse or three dot you know whatever um so everything is inside of this big three object it makes it a little bit longer to write so we have to type the big large three every time and they actually have updated it to work slightly differently but we're going to use this because it's more familiar to us and then everything always comes so everything always starts with three and then dot and then whatever the object or class name is so this is our scene um scene is basically just a way of organizing like what we actually want to render and we'll see how that works when we get down to the render so we start with a scene that's one of the main things we need then we have a camera so remember we always have to have a camera because we have to know where we are standing and where we're looking inside of the scene in order to know what we actually how we actually see stuff so i'm just going to copy and paste here this is a very standard uh perspective camera perspective just means that it represents 3d in like a perspective based way as opposed to orthographic so orthographic will just so like a flat scene where nothing has a different size depending on how far away is from the camera in perspective something that's farther away from the camera is going to be smaller and something that's closer to the camera is going to be larger so that's how we see in real life and the perspective camera tries to recreate that the orthographic camera is useful for doing things like blueprints or architectural design because we can see how we see the actual absolute height and and size of things and some games are also built in orthographic view like that frogger style game that we looked at a moment ago was in orthographic view so then finally we have the render and the render is just kind of like a fancy word for the thing that draws like if you think about drawing usually you say you like render maybe more in like a more technical setting like an architecture or something like you do a rendering of a building or rendering of a tree a renderer is just something that draws something the webgl render is something that draws something in 3d and so this is essentially like what our draw function is doing in p5 but we have a little bit more direct access to the render we have to do a little bit more to set it up and then we have a bit more control over it and so i'm going to copy the render that's our webgl render and then we can set the size so render dot set size we're just setting how big it is basically the canvas so we're using window.inner width which is just like a dom thing to get the width of the browser and window.inner height to get the height of the browser so it's going to fill the whole browser and then we're actually going to append the dom element which is the canvas of the renderer to the document so in p5 it does this for us in our quiz function we in our quiz project we did all that ourselves using append child so we're familiar with that in 3js they don't do that for us we have to do it ourselves so now we have our render if we go over to elements you can see basically inside the body 3gs has added a canvas and you can see that the width and the height match the width and the height of the canvas so if i reload this the width gets bigger and you know the height stays the same because i just made it a little bit wider so you can also see that the renderer has a black background that's kind of the default here if we change this the background of the canvas you won't be able to actually see that so if i say for example like the background of the canvas is blue it's still going to be black one thing that we could do to change that is we can set transparent to true so for example um if i add some options here and i say transparent or maybe it's alpha let me look this up render webgl renderer let's see so in the documentation you'll see um the constructor which is like the main object that's sort of like our scene class or our game object class and then there's some properties so alpha okay so it's actually called alpha whether or not the canvas contains alpha so we can say alpha is true load this again and now if i say the canvas background is blue then we'll actually see that background so we can use that for today later on there's other ways to change the background of the scene using 3js with like material or something like that but that means we have to render it so that takes up processor time if we just set the canvas color then it'll do it in css and we can even set it as a gradient like if i wanted to do maybe like a linear gradient for the background maybe from like blue to light blue that might look kind of nice so we can use that as a background to start and having a background with some different color going on in it will actually be kind of helpful so let's add that to our css we can always take it out later but it'll help us kind of distinguish the geometry a bit because we're not going to be using lighting quite yet so just a couple things to watch out for so one thing you might be wondering about as well is that why did i put these like spaces between the first argument and the last argument this is a convention of 3js you can see that they use this in the code that they added and they also want you to use it um as you're writing your code this is really just like a preference and as far as style it makes it a little bit easier to read things and it follows the convention where we put a space after a comma so i'll try to use that as i'm doing it it is just kind of like the preferences of the people who created 3js and so all of the examples use that and if you're a little bit finicky like i am that means that you'll want to write your code to match it so that you don't have kind of mismatching code in different places but it doesn't actually change the functionality okay so that's a lot to cover but we're actually getting quite close to creating a scene so we've got our renderer and so now we're going to add our first object here okay so with any 3d object we have basically two components we have the geometry and the material you can think of the geometry as just like the points of the object like the cube if you're thinking about a more complex object like a person it's just like the thing it's just like the 3d um sort of space that a volume takes up that a thing takes up the material is more like the surface of the geometry or the object so you can think of a material as kind of like a t-shirt it has like a basic color and then it also has some properties of how it interacts with light like some t-shirts don't reflect light other t-shirts like uh maybe like a running t-shirt or something like that or more reflective but we won't worry that about that too much today we're just going to think of the material as a color so it's just like the thing that is on the surface of the geometry and when we put those together what we call it in 3gs is a mesh so mesh is just a combination of those things and then so let's make some geometry real quick this will just be our example so we have constant geometry and so again we have to use the new keyword because we're creating these new objects so to make a box we use three dot box geometry and then with the box geometry there's a bunch of parameters you can see they didn't fill in any of those parameters so you don't have to fill in the parameters if you just want like a default box so let's leave that alone for now but there are more parameters so if we click on this i guess i can't click directly on that let's look up box geometry so if we look at box geometry you can see there's a few parameters here and then you can see there's a whole bunch more parameters right here so we'll go over those a little bit later so let's go back to where we were okay so we have our geometry which is basically just the six faces that make up a cube and then we have a material so we have constant material is new 3 dot and we're just going to use a mesh basic material here there's a lot of different types of materials this basic material essentially means that we don't uh need to worry about lighting we can just give it a color so i'm gonna give it a color again i'm adding these sort of options here so if some for some things you can add arguments like uh just one two three like that in a lot of more complex things we add arguments inside of these curly brackets because some of the arguments have defaults and so we can just add just the arguments that we want so for here we're just going to add a color another thing that's a little bit weird about 3js is that they use actual hex values for the colors rather than strings that represent hex values like they do in in p5 and css so it's the exact same thing as the hex value that we're used to with css except now there it's an actual hex value and we know that because it's not in quotation marks it's just a number but it's a different representation of a number than 1 2 3 or you know 0.5 or whatever but it still matches our hex values so for example if i go to html color codes and i just choose a color here let's choose a nice well we have a blue background so let's choose something that'll go against that so let's get a purple color here and so if i just copy this hash here or hex value it's going to work the same way i just have to put 0 x in front of it so this is a 0 and this is an x lowercase x and then there's our typical hash value so we'll see that in a moment when we load our scene finally we have our mesh so it is a bit complicated because there's three parts but we are working in 3d so finally we have our box which is a new mesh so we say new three dot mesh and that has the geometry as the first argument and the material as the second argument and you might be thinking can i just put this directly right here do i have to assign it to a variable you can put this directly in right here it just makes the lines very long and then you also wouldn't be able to like reuse this geometry which might be useful and so then finally we just add the box to our scene so we say scene dot add and then we add our box so we're not going to see anything quite yet i'm going to skip this line for now so we still don't have the box because we're not actually rendering our scene yet so let's render our scene so for our to render the scene we can actually just say render.render so let's do that first and then we'll talk about what's called the animation loop so i'm just going to copy this first i'm going to say render.render and so the renderer is the thing that draws the scene render is just the method that is going to do that the scene is the collection of objects that we want to draw and the camera is the you know perspective from which we're looking at them when i render the scene we're not going to see anything and that's because of this line right here so i just want to go over this because this is something that you'll run into a lot as you first start to work with 3d you're saying i made this box i added as a scene i added material i did everything i was supposed to do why don't i see anything well right now here if if we look at what the scene looks like here's our box okay and the box position is in the origin which is 0 0 0 right x y and z and here's our camera okay also at zero zero x y and z and so the camera is actually inside of the box and with meshes there's no material on the inside it's only on the outside for light to bounce off of so the camera is basically looking out the back of the box so how do we fix that we move the camera so that's what that other scene was i'm going to put this up here next to our camera i'm going to say camera dot position dot set okay so we set the position of the camera the default position is 0 0 0 for any object in the scene and what we want to do is if our box is right here let's say this is y and this is z and our camera is right here what we want to do is we want to pull the camera back so that's in the positive direction so we're gonna say camera.set position x y z let's say z is five there's our box okay now if we move x the camera on x because it's a perspective camera we start to see a different position of the box so we can see that perspective so let's move our camera back a little bit we can also move the camera up a little bit on y now we don't see the box there's a really nice way to fix that we we can say camera dot look at box dot position okay so since the box is in the middle of the scene now we're going to look down a little bit okay so in this case we've just rendered one image basically so nothing's going to change like we can't do animation we can't move around and that's sort of like if you just drew something in p5 in the setup function and then never called the draw function so the next part and the last part of this kind of tutorial that we're going to look at is called the animate loop or the animate function so basically we're going to call animate which is going to call this function and then it's going to request an animation frame and then it's going to call itself again and this is actually exactly how the p5 draw function works except we don't have to build it it's done by p5 library itself essentially what this is saying is to draw a scene and then draw the scene as soon as you're ready to draw it again request animation frame is a global uh javascript function that basically tells the browser to draw on the canvas but wait uh the the canvas has the way that javascript works it's a bit complicated but basically there's like a specific point at which it is set up to draw a new canvas that's kind of optimized for drawing and when we say request animation frame instead of just saying draw this as soon as you can we're saying draw this the next time you want to render an animation frame so that's going to make our animation run a bit more smoothly to do that we're just going to create a new function called animate and we're going to render the scene and then we're gonna ask to animate again and so it's basically a function that's constantly calling itself so it's gonna be running as fast as the browser can run and then we just call animate to get it started okay so now it's actually animating but we can't see anything so let's add some animation and they give a very simple example which is we're just going to rotate this cube on the x-axis first so let's copy this in here so anything that you want to animate should go in the animate function it's basically like the draw function for p5 but in 3js so let's take our box let's take the rotation on x and let's just increment it a tiny little bit each frame so it's going to start moving so you can see it's moving it's animating towards us this is a little bit tricky to get used to the x-axis goes like this way and so if you rotate around the x-axis that's kind of why it looks like it's rotating towards us so then we can also say box dot rotation dot y plus equals 0.1 and so now we're rotating in two directions it's actually quite fast so let's make this even slower okay so that's a little bit easier and we don't we can tell it's a box because we can see the edges of it but because we haven't added lighting or anything like that it looks very strange like it's very distorted in some cases it looks quite weird so that's what we'll be doing in a later video for now we're just going to be focusing on the basic different geometries the perspective and the positioning in the scene so we'll just add one more thing before we start drawing our scene so with our current scene here the camera is kind of like stuck in one place like we can't move back and forth we can't move left and right and when we're building a scene that can be tricky because we're going to want to move around to change the perspective so we can see the 3d geometry so with 3js there's a bunch of different ways to control the scene if we go to examples and go to controls we can see a few of these so there's the orbit control where you move around sort of a center position you can move up and down and you can move left and right zoom in and zoom out it's the same as what is default in the 3js editor so that's what we'll use there's other controls for example what's called pointer lock controls is sort of like um what you would use maybe in a first person video game where you're moving around and these are scripts that other people have already written because they're very common so it's nice that we don't have to write these for ourselves there's also track bar controls where we kind of move around in space a little more quickly and there's also fly controls where we're kind of flying around the screen so we can move in and move out of a scene and we can kind of use the mouse to go one way or the other so those are a few basic controls and one of the things that will be good to look at as far as using our orbit controls is how to actually add something like this to the scene usually in the examples there's a little icon with the two brackets here and if you open that up you'll be able to see how to get orbit controls this is done using the module system which is the new system that 3js uses we're not going to be using that system at least not when we're first learning how to do it so if you see something that says script type module and some syntax like this just ignore that one but keep in mind what is needed because we can get the non module version of the orbit controls from the github another place that you'll see scripts is if we were actually looking at the documentation and i went to controls and went to orbit controls usually somewhere at the bottom there'll be a link and so we can see the source comes from examples slash jsm slash orbit controls and so you can see right here where it says jsm that's the model that is the module version we don't want that so what we can do there's a couple ways to do this one is i can just go back to examples and click on js instead go to controls and then find the orbit controls if you get linked to a module version you can also just change the link up here from jsm to js and that should bring us to the orbit controls so that is one sort of tricky thing about developing with 3js is that they've adopted this new module based version which is a new javascript thing that wasn't previously available and it is a useful way to develop but it requires a little bit more explanation so since we're just going into this library for a couple weeks i'm not going to spend a lot of time working on that so let's go to examples and the the github is organized in a way that is a little confusing because there's like a ton of files in here but basically it's all the examples that you see inside of this examples inside of the examples page here so they're all just in this one examples folder and then these are all just files to host them and then the javascript is all in here so since we're looking for orbit controls that's under the first we go into javascript and then we go into controls here and then click on orbit controls and then we want to download this so i'm just going to click on raw and then do command s to save as and we can put this also in the javascript folder so just make sure we're in project 3-1 and go in js and save as as usual when we're adding javascript to a new project we have to go back to index.html and add a new script file so i'm just going to copy this script and paste it and then this one is called orbit controls you'll notice that the uh file name uses capital o and capital c for orbit controls because it is um an object that is getting added so it's a little bit like adding our class syntax so now that we've got the orbit controls we need to add them so let's look at the example in the documentation for how that's done so i'm going to type in orbit controls click on orbit controls and so we can see where it adds the controls here so it just creates a new orbit controls object it really does a lot of work for us which is really nice there's a can it takes the camera as the first argument and then the canvas which is render dot dom element that refers to the canvas as the second element and then if we want to update the controls we use controls.update so i'm going to copy this and i'll paste it uh it doesn't really matter where this goes um although it does reference the dom element so that needs to exist so let's put it under our renderer so this won't work unless we actually call the update function so oh and i got an orbit controls is not defined so let's just double check that i spelled this correctly oh actually you know what i did wrong is that i forgot to add so this is the module syntax so that's something that you might actually run into if you're using some of the examples is when you're using the module syntax you don't have to put three dot in front of everything but when you're using just the regular javascript stuff you have to do this so inside of my animate function so i'm not going to have this animation anymore i'm just going to replace this with controls.update so this will update the controls every frame along with my animation so now if i move right and left with the right mouse button you can see i'm rotating the scene and because the box is in the middle of the scene it looks like i'm just rotating the box but i'm actually rotating the entire scene if i go up and down i'm rotating up and down if i use the right mouse button i can move the camera left and right and i can move the camera up and down and then if i use the scroll wheel again i can zoom in and zoom out so it's just like our controls in the editor

Channel: Owen Roberts - BMCC

Views: 3,600

Rating: 5 out of 5

Keywords:

Id: DBniLRo53gE

Length: 51min 0sec (3060 seconds)

Published: Mon Nov 09 2020