08 Apr 2014, 03:29
Generic-user-small

Ivar Vasara (2 posts)

Hi Chris - thanks for the book and the participation in the forum!

I started your book with my kid and we ran into a problem with the first example. My son typed out the four lines, but nothing changed. I cut and pasted the lines (after triple checking for typos) on two other modern browsers and still no dice. Note that the [gamingjs ice landing page] (http://gamingjs.com/ice/) does correctly render a spinning polyhedron.

The browser we tested on:

  • Chrome 34.0.1847.116 beta
  • Safari 7.0.3 (9537.75.14)
  • Firefox 28

I briefly opened the console to compare with the working example and noticed that there were two additional errors:

Uncaught SyntaxError: Unexpected token ILLEGAL  ( preview_frame.html:21)
Uncaught TypeError: undefined is not a function (preview_frame.html:22)

I’m pretty new to javascript myself, but hopefully that’s enough to go on.

08 Apr 2014, 13:32
Chris_strom_headshot_200_pragsmall

Chris Strom (78 posts)

Ugh. Sorry that you’re running into so many problems right off that bat. Not cool :(

Without looking at the code, I’d only be guessing. Can you copy and paste your complete code from ICE into here? Not just the 4 lines that you copied and pasted, but the entire project.

If you can do that, I’d be more than happy to have a look :)

08 Apr 2014, 14:43
Generic-user-small

Ivar Vasara (2 posts)

Here you - thanks for your time.

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

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

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var shape = new THREE.SphereGeometry(100);
  var cover = new THREE.MeshNormalMaterial();
  var ball = new THREE.mesh(shape, cover);
  scene.add(ball);

  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>

btw - We’re very keen to keep going.. I’ve read ahead and have to say that the pacing of the book looks really well thought out.

08 Apr 2014, 15:32
Chris_strom_headshot_200_pragsmall

Chris Strom (78 posts)

Hopefully this will help you keep going then :)

I think you’ve just missed a capital letter in there. On line 22, you need to change THREE.mesh to THREE.Mesh (with a capital M) so that it reads:

  var ball = new THREE.Mesh(shape, cover);

That’s actually a pretty common error. So much so that part of chapter 2 is dedicated to helping you find and correct these. So hopefully you won’t run into too many more that you can’t find quickly. But if you do I’m happy to help :)

Let me know if that does not solve the problem for you or if you have any other questions!

  You must be logged in to comment