17.1 Getting Started
Start a new project in ICE. Choose the 3D starter project template and name this
project Tilt-a-Board.This Is a WebGL Game
If your browser can’t do WebGL, you’ll have to skip this chapter.
The easiest way to tell if your computer and browser can do WebGL
is to visit http://get.webgl.org/. If you see the spinning cube on that
page, then you have WebGL. If not, you’ll have to work on other
projects.16.2 Gravity and Other Setup
Just as we did with the Purple Fruit Monster game, we need to do a little
work before the START CODING ON THE NEXT LINE line. Make the changes noted in
the following code.<body></body>
<script src="http://gamingJS.com/Three.js"></script>
❶ <script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>// Physics settings
❷ Physijs.scripts.ammo ='http://gamingJS.com/ammo.js';
❸ Physijs.scripts.worker ='http://gamingJS.com/physijs_worker.js';// This is where stuff in our game will happen:
❹ varscene =newPhysijs.Scene({ fixedTimeStep: 2 / 60 });
❺ scene.setGravity(newTHREE.Vector3( 0, -50, 0 ));// This is what sees the stuff:
varaspect_ratio = window.innerWidth / window.innerHeight;
varcamera =newTHREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
❻ camera.position.set(0, 100, 200);
❼ camera.rotation.x = -Math.PI/8;
scene.add(camera);// This will draw what the camera sees onto the screen:
❽ varrenderer =newTHREE.WebGLRenderer();
❾ renderer.shadowMapEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// ******** START CODING ON THE NEXT LINE ********Chapter 16. Project: Tilt-a-Board • 146
Prepared exclusively for Michael Powell report erratum • discuss