08 Apr 2014, 03:29

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 (139 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

Ivar Vasara (2 posts)

Here you - thanks for your time.

<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></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;

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

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

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

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 (139 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!

14 Dec 2014, 06:10

Nicholi Gold (3 posts)

My son and I just started this and we are having a similar issue. The shape is just not showing up. Here is the code:


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

14 Dec 2014, 06:15

Nicholi Gold (3 posts)

nevermind noticed the spelling error in geometry.

14 Dec 2014, 15:30

Chris Strom (139 posts)

Spelling errors are the worst. I hate it when I do that and it seems like I do it daily. I’m always sure that the problem is something else – and spelling is always the last thing I check.

I should probably update the book to make it a little more obvious that spelling (and capitalization) is a such a concern. But I’m glad that you pushed through it!

15 Dec 2014, 04:24

Nicholi Gold (3 posts)

Thanks for that Chris. :)

  You must be logged in to comment