Making your first Sandy-HX 3D JavaScript Application (Page 2 of 2)

You need to download and install a few things for this demo:

• FlashDevelop
• Haxe
• Abyss Web Server X1
• Google Chrome
• The neash Haxe library. This emulates the Haxe Flash library.
• The Canvas-NME library. This allows a canvas element to be used as the output for the neash library.
• The Sandy-HX library, and the tutorials. This is a 3D engine itself.

Getting the last three can be a bit of a pain, so I have included them in the source code download.

Open up FlashDevelop, and create a new project.

Create an Empty Haxe project.

Go to the project properties.

Set the project to compile to JavaScript, and set the output file.

Add the three libraries, neash, Canvas-NME and Sandy-HX, to the classpath.

Add the –remap flash:neash option to the Additional Compiler Options, and set the Main Class to Dice.

Add the dice.hx file from the dice_demo folder in the sandy-hx tutorials download. You need to change the line that says

var parser: ColladaParser = Parser.create( "../assets/dice.dae", Parser.COLLADA );

to

var parser: ColladaParser = Parser.create( "dice.dae", Parser.COLLADA );

Compile the project

You should now have a demo.js file in the jsbin folder. In order to run the demo you will also need the demo.html, dice.dae and dice.jpg files from the download.

You can not just open the html file directly on your PC and have it work. I suspect that this has something to do with the Sandy-HX resource loading not working from local drives. You can get around this by installing a local web server. I like the Abyss web server because it is small (the download is less than 1MB). Copy the 4 files (demo.html, demo.js, dice.dae and dice.jpg) over to C:\Abyss Web Server\htdocs (assuming you installed Abyss with the defaults).

Now open up http://localhost/demo.html in Google Chrome.

Congratulations – you have compiled and run your first 3D JavaScript application.

You can see this demo live for yourself here. I have found that only Chrome and Opera will display the 3D properly (compiling Sandy-HX to JavaScript is still experimental), and of them only Chrome works at an acceptable speed.

You can download the source code, which includes all of the nessessary Haxe libraries, here.

Read more in the Flash and JavaScript 3D with Sandy-HX series

Away3D Programming Tutorials - Away3D Lite

Learn how to make your first Away3D Lite application with Flex with this free article.