Creating a 3D browser game with physics in a few steps.
Today I will tell you about making new levels, creating a level selecting menu and showing player stats (How good is he as street basketball player).
First, note that we added 2 new files to app.js: levelData.js and utils/textures.js.
utils/textures returns functions for generating textures from inputed data. It will be used to print stats and level items in level menu.
Second thing is that we add a raycaster variable. This thing is used to check if 3D vector generated from 2D mouse position intersects with other scene objects.
And in last 21 lines of init() function we added checking for app loading status. I won’t describe this part cause it is not related to main application and you will probably skip or rewrite this part in your app. Just keep in mind that we use event listeners here to do various things that will make impact on app preloader.
Three sections. What will be
By the way, let’s define three game sections:
- Main game. Player throws the ball until he score a goal.
- Goal details. Player scored a goal and now he see it’s time, attempts and accuracy.
- Level selecting menu. Player wants to choose another level or get back to current one.
Let’s make a nice transition for camera, goal stats and game headline.
At first, we need to define a variable (ratio in code below) that will store relation between window width and window height. THREE.PerspectiveCamera already has two methods that will give us width and height values ->.getFilmWidth() and .getFilmHeight()
Note that APP.camera is a whitestorm.js wrapper for camera, to get it’s Three.js camera use APP.camera.getNative()
Let’s add a headline of this game. For that we use WHS.Text. We need to generate a .js font file, I used typeface.js generator to do this. I named my file 1.js, you can name it as you want. Note that in font parameter we type font url, not a font name like in three.js