 as always this is part of a series of videos there should be an annotation on the screen to the full playlist I recommend watching previous videos otherwise you might be a little lost and we are going to be building on the video from last week I'm putting on a new video every Friday on the topic of html5 and 3d elements and so be sure to watch the previous videos and this is the video or this is the script from last week we created a cube in our scene and we set trackball controllers for our camera so right now you can see I'm rotating this it looks like I'm rotating the cube but actually we're rotating the camera around the cube I am left clicking to do that I can scroll with my mouse wheel to zoom in and out I can also center click and zoom in and out by dragging after center clicking or I can right click and I can drag to pan today we're going to change it up a little bit and we're going to basically create multiple of the same cube and we're going to actually build on this tutorial as the weeks come on show different ways to get different results so I am going to go into our script which will be up on my website there should be a link in the video description to all the scripts in this series of videos and just to review real quick from our script from last week we've been using in all our tutorials the 3.min.js from the 3.js library you go to 3.js that's thre.js.org to download the full package with all the libraries and here we are using the minimal basic package here and we also have from the same package of the script called trackball controls which tracks our camera creates some objects and then we have an initial function an animate function and a render function in our init function which is our initial function that runs we have we're creating a camera and setting its position setting some controls for the camera creating a scene we created some geometry in this case which is a cube some material for that and add that applied that to a mesh and add that mesh to the scene and then we render all that out but we want multiple cubes so we're going to do this by creating a for loop in this case now actually before we do a for loop let me show you okay so here we have our mesh which by default is right smack in the middle of our scene at coordinates zero zero zero the cube is 100 by 100 by 100 units so what i can do here is i can come in and i'll go mesh dot position dot x for x which is left and right in the 3d view and i'll say that equals 100 so i've moved the cube over 100 units and then we'll add it to the scene so before i save that let's look at this we'll hit f5 that's what it looks like before we change our script we'll now save our new script and we'll hit f5 you can see it's moved over so what i'm going to do now is i'm just going to copy and paste these three lines of code and if i do that without changing the x you'll see it doesn't look like anything's changed i refresh the page but actually there's two cubes they're just in the identical spot in the die identical size so what i'm going to do here is i'm going to say instead of moving it 100 units to the right which would be a positive 100 i'm going to move the second cube 100 units to the left so save that refresh this and now we have two cubes and again when i'm moving like this i am rotating the camera not the cubes in this particular instance so we have those two cubes so if we want a lot we can just copy and paste this code over and over and over again you don't want to do that we're going to create a for loop that will do this for us so i'll just going to delete those three lines we just made and then i'm going to put what we have into a for loop i'm going to say four i'm going to say variable i i'm going to say while i is less than 10 uh and i should say i equals zero because we haven't said it yet so i equals zero as long as i is less than 10 continue to loop but every time you loop we're going to plus plus this will add one to the value so we'll start at zero one two three four five six seven eight nine it will stop at nine because we're saying less than 10 and we will close this function now if we save this and refresh again we see one cube but there's actually 10 cubes all in the same spot because it's looping here and it's creating a new mesh each time based on the geometry and material that's up here see geometry we said that is that then we apply it here we got material and we apply it here but they're all going to the same coordinates so what we're going to do in this particular case is we're going to create a variable at the beginning of our script up here outside of the function all right actually it could be inside the initial function since that should only run once but i'll make it out here i'll call it mx for mesh x but the variable you can call whatever you would like and i'm going to set its value to negative 500 to start off so and then what i'm going to do here is i am going to set the value of x uh there is sorry the value of the position the x position of our mesh to mx which is negative 500 now if i didn't do anything else the script would run and again we would only have what appears to be one cube far to our left because it's negative 500 and that would look like one cube but it would still be 10 cubes so what we're going to do is every time it loops we're going to say mx plus equals 100 so this is going to loop 10 times it's going to be at negative 500 then negative 400 negative 300 negative 200 negative 100 zero uh one two and it'll do that 10 times so we get to the value and if we hit f5 now we can see it looks like one long cube because we've put no spaces in between any of our cubes uh when i'm moving around a little bit you can sometimes i can see you probably aren't going to see it in the compressed video i can see a slight dotted line right there where some cubes are are touching so what i'm going to do just to separate our cubes out i'm going to say each time it loops at 110 the value so it will be at negative 500 and then it will go to uh 390 and then 280 until it gets into positive numbers and we'll do that 10 times so now if i refresh we have all 10 of our cubes one two three four five six seven eight nine ten cubes all in a row and of course we can also adjust the x value if we want uh we can say um or actually let's go we did adjust the x let's do the z which is up and down so now i can say mesh dot position dot z equals mx and so each time not only will the new cube that we create move 110 units to the right it will also move 110 units up so we've saved that we'll hit f5 and there we go we have our cubes all lined up nicely and that's it for this tour we're going to play around this a lot more we're going to start doing some random placement of objects and rotations of objects in the near future in the coming weeks so i hope you enjoyed this tutorial hope you found it useful i hope you're enjoying all these videos again there is a clipping on the camera that we set when we create the camera so that's why when i zoom further out the objects disappear because of the camera clipping i just wanted to note that i've said that in previous videos i wasn't sure if i said it in today's video so yeah if you're enjoying this 3d with html and 3js be sure to like this video so that i know that you guys like them and you're enjoying them also be sure to visit my site filmsbychrist.com that's chris of the k there should be a link in the description and there you'll find links well you'll find a way to search through all my videos playlists and also check out my social networking sites on facebook google plus twitter and there's also a link to my irc channel which is a great place to come talk to me and other people and have good time and hang out um feel free to comment below questions are better asked and the irc channel if you can um and as always this is part of a series i'm putting out a new video every friday if you're watching the playlist and you hit a video that you can't view because it's marked as private you don't need to ask me how you gain access to that you'll gain access to it when it's published publicly uh and the next one will be published next friday in a week so thank you for watching be sure to subscribe so you don't miss any of my videos also check out my monday and wednesday videos and i hope that you have a great day