Thursday, October 18, 2012

Upgrading Gaming JavaScript to the Latest Three.js

‹prev | My Chain | next›

I still need to settle on how, or even if, I will version JavaScript libraries used in Gaming JavaScript. Currently, I am having kids use <script> tags like:
<script src=""></script>
<script src=""></script>
// Code goes here...
I rather like short URLs like They ought to look like "normal" URLs to kids. They also do not introduce the additional concept of versioning libraries. Of course, that begs the question of how I will version libraries in the future.

I am not going to decide about versioning libraries tonight, but I am going to explore one possibility—versioning by Three.js version. The hope is to not only explore possible solutions, but also to see if my current code works with newer Three.js and Physijs.

I start by making a directory named "52" in my Gaming JavaScript home. Then, I download the latest version of Three.js from the website (r52 at the time of this writing). Then I extract and copy the necessary Three.js files into r52:
➜  src  unzip ~/Downloads/
➜  src  cd mrdoob-three.js-daf110f
➜  mrdoob-three.js-daf110f  cp src/Three.js ~/repos/gamingjs/52 
➜  mrdoob-three.js-daf110f  cp ./examples/js/Detector.js ~/repos/gamingjs/52
I do the same for Physijs:
➜  src  tar xzf ~/Downloads/chandlerprall-Physijs-40a0489.tar.gz
➜  src  cd chandlerprall-Physijs-40a0489/
➜  chandlerprall-Physijs-40a0489  cp physi*.js ~/repos/gamingjs/52
➜  chandlerprall-Physijs-40a0489  cp examples/js/ammo.js ~/repos/gamingjs/52
Even though I do not believe that it will change between releases, I will add the ChromeFixes.js source file into 52 as well
➜  52 git:(gh-pages) ✗ cp ../ChromeFixes.js .
It is more of a code-editor fix than related to 3D programming, but it might look weird to the uninitiated to have some URLs include the 52 and some not.

With that, I have all of the JavaScript libraries that I need:
➜  52 git:(gh-pages) ✗ ls
ammo.js  ChromeFixes.js  Detector.js  physi.js  physijs_worker.js  Three.js  Tween.js
I start editing this on my local machine. Hopefully I can get the the multi-sided, spinning thingy to work with the newer libraries:

But, after simply changing URLs to point to the new "52" libraries:
<script src="http://localhost:4000/52/Three.js"></script>
<script src="http://localhost:4000/52/ChromeFixes.js"></script>
// Code goes here...
It does not work.

In the JavaScript console, I find:
Uncaught TypeError: undefined is not a function
That correspond to the line that defines THREE.Scene. Has Three.js change that much?

It turns out that, no, it has not changed that much. I had merely copied the Three.js src from the wrong place. I need to grab the assembled Three.js from the build sub-directory instead of pulling in just the top-level Three.js that clearly does not even have scenes:
➜  mrdoob-three.js-daf110f  cp build/three.js ~/repos/gamingjs/52/Three.js
With the correct Three.js in place, I again have a spiny, multi-sided thingy:

Better yet, the JavaScript console confirms that I am now running r52. That will do for a stopping point tonight. I will check out some of the Physijs stuff tomorrow.

Day #543

No comments:

Post a Comment