Question

I have recently started to play around with Haxe and Three.js. How do I load a 3D object using JSONLoader. I’m very new to the Haxe way of doing things and haven’t wrapped my head around the whole extern thing.

I’m making use of this lib to simplify things:

https://github.com/rjanicek/three.js-haXe

Most of the Three.js Classes are abstracted in the lib except for JSONLoader or any loader for that matter. How can I load the json model I exported from Blender in Haxe?

Answer 1

It seems like I was using the wrong lib 🙂

This is a better abstraction:

https://github.com/labe-me/haxe-three.js

To load a 3D model, you’ll go about it this way:

package co.za.anber;
import js.three.Three;
import js.Lib;

class Main 
{
    static private var scene:Scene;

    static function main() 
    {
        //Get the dimensions of the scene
        var w = Lib.window.innerWidth;
        var h = Lib.window.innerHeight;

        scene = new Scene();

        //add some light
        var pointLight = new PointLight(0xffffff, 1, 0);
        pointLight.position.set(10, 50, 130);
        scene.add(pointLight);
        //add a camera
        var camera = new PerspectiveCamera(70, w/h, 1, 1000);
        camera.position.z = 500;
        scene.add(camera);

        //setup renderer in the document
        var renderer = new WebGLRenderer(null);
        renderer.setSize(w, h);
        Lib.document.body.appendChild(renderer.domElement);


        //Load the Blender exported Mesh. 
        //This is where we load the Mesh and setup the onload handler. This was the part I wasn't so sure about.
        var loader:JSONLoader = new JSONLoader(true);
        //I don't like in-line functions. You need to make the returning function into a Dynamic type.
        var callbackModel:Dynamic  = function( geometry:Dynamic ){createScene(geometry); };
        loader.load("Suzanne.js", callbackModel);


        //Listen for mouse move. In-line function from somewhere else.
        var mouseX = 0, mouseY = 0;
        untyped Lib.document.addEventListener('mousemove', function(event){
            mouseX = (event.clientX - Lib.window.innerWidth/2);
            mouseY = (event.clientY - Lib.window.innerHeight/2);
        }, false);

        //Render the scene @60 frames per second. Inline function from somewhere else.
        var timer = new haxe.Timer(Math.round(1000/60));
        timer.run = function(){
            camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (-mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);
            renderer.render(scene, camera);
        }
    }

    /**
     * Onload complete handler. Here we can add our Mesh.
     * @param   geometry
     */
    static function createScene( geometry:Dynamic):Void{
        var mesh:Mesh = new Mesh( geometry, new MeshLambertMaterial( { color: 0x00FF00 } ) );
        //We scale it up to be visible!
        mesh.scale.set( 150.15, 150.5, 150.5 );
        scene.add( mesh );
    }


}

Hope this help someone.