<<< Go Back to Part 4: Mesh Materials!
Alright! You made it this far! We learned the basics of creating 3D objects. Now let's build an environment for our objects.
In any environment, especially if you are making a game environment, you will need a floor. I have obtained some pre-made code that you can use to get you up and running with a first person shooter format game. The three.js and cannon.js libraries have already been integrated into the code so that you can use both libraries. I gutted the main html code so that there is nothing but a floor. The original source of the code resides here: http://schteppe.github.io/cannon.js/
All credit goes to schteppe. License information:
/*
* Copyright (c) 2015 cannon.js Authors
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
To follow along in this tutorial, download the code files that I have provided below. Make sure you download all files into the same folder.
In any environment, especially if you are making a game environment, you will need a floor. I have obtained some pre-made code that you can use to get you up and running with a first person shooter format game. The three.js and cannon.js libraries have already been integrated into the code so that you can use both libraries. I gutted the main html code so that there is nothing but a floor. The original source of the code resides here: http://schteppe.github.io/cannon.js/
All credit goes to schteppe. License information:
/*
* Copyright (c) 2015 cannon.js Authors
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
To follow along in this tutorial, download the code files that I have provided below. Make sure you download all files into the same folder.
File #1:
three.min.js |
The three.min.js file a compacted version of the three.js library.
File #2:
cannon.min.js |
The cannon.min.js file is a compacted version of the cannon.js library.
File #3:
PointerLockControls.js |
The PointerLockControls.js file contains the code that allows you to have a First Person Shooter layout.
File #4:
game.html |
This is our main HTML file. This file will launch the game in your browser! We can still edit the code if we open this file within our code/text editor. I have gutted the code so that only a floor is present. We will add things from here in our next tutorial!
File #5:
license |
I have added a file containing the cannon.js license information. This file will not impact our game code in any way.
Try it out!
After you have downloaded the files into the same folder, you can double click the game.html file and it should launch the game environment in your browser! Try playing around with the controls and exploring!
>>> Part 6: Adding Game Objects!
>>> Part 6: Adding Game Objects!