Chapter 15: Tilt-a-Board, not working from the beginning

#1

I started Chapter 15 by opening a new project with physics, and started adding the code in the chapter, but I never get any graphics even just with the ball added. The errors in the console don’t make any sense either – mainly this one (see attached).
I’ve tried it on Chrome in Windows and Safari on Mac and it’s the same.

Capture

#2

That looks like there might be a problem with the camera, but I can’t be sure without looking at the full code. Can you share all of the project code in the forum as described in this welcome post?

Thanks!

-Chris

#3 
<body></body>
<script src="/three.js"></script>
<script src="/physi.js"></script>
<script>
  // Physics settings
  Physijs.scripts.ammo = '/ammo.js';
  Physijs.scripts.worker = '/physijs_worker.js';

  // The "scene" is where stuff in our game will happen:
  var scene = new Physijs.Scene();
  scene.setGravity(new THREE.Vector3( 0, -100, 0 ));
  var flat = {flatShading: true};
  var light = new THREE.AmbientLight('white', 0.2);
  scene.add(light);

  // The "camera" is what sees the stuff:
  var aspectRatio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // The "renderer" draws what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  camera.position.set(0,100,200);
  camera.lookAt(new THREE.Vector3(0,0,0));
  renderer.shadowMap.enabled = true;
  
  // ******** START CODING ON THE NEXT LINE ********
var lights = addLights();
// var ball = addBall();
// var board = addBoard();
// var goal = addGoal();

function addLights() {
  var lights = new THREE.Object3D();
  var light1 = new THREE.PointLight('white', 0.4);
  light1.position.set(50,50,-100);
  light1.castShadow = true;
  lights.add(light1);
}


  // Animate motion in the game
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

  // Run physics
  function gameStep() {
    scene.simulate();
    // Update physics 60 times a second so that motion is smooth
    setTimeout(gameStep, 1000/60);
  }
  gameStep();
</script>
#4

That code actually looks perfect to me. When I enter that code into my own 3DE, I don’t see the error in the screen capture – I don’t see anything. That may have been a one-time error that happened for other reasons.

The only reason that the ball doesn’t show is that you haven’t gotten to that part yet. When I added the addBall() function and un-commented the call in the code outline, the ball showed up and fell.

But…

It was a little dark. The addLights() function in your code.only adds light1 to the list of lights. The code in the book also adds light2 to the list, which makes it easier to see the ball.

All in all, your code is perfect. Finish the addLights() function and add the addBall() function and you’ll be all set. If you run into any problems, let me know :slight_smile:

-Chris

#5

I got the error from the beginning, and went through the addBall section – what I sent was where I stopped the second time through. I never actually got anything to work. I’ll try it again from scratch – starting with the “with physics” project, etc.

#6

Ah. gotcha. Well, like I said, you seem to be on the right track this time around. If you run into a problem this time, don’t hesitate to post your code here!