0

I'm trying to animate an exported model(from 3dsmax -> dae file -> json) with animations using three.js. I am not getting any console errors but rather just a blank screen. Anyone have any ideas on why this is happening? I'm happy to also include json, png's, max file, dae file or any other resource that may be of help. Any help would be much appreciated. I'm stuck...here is the javascript:

<script>

    var camera, scene, renderer, animmesh;

    var clock = new THREE.Clock();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        camera.position.z = 5;

        scene = new THREE.Scene();

        scene.add(camera);

        renderer = new THREE.WebGLRenderer( { antialias: true } );

        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

        var loader = new THREE.JSONLoader();


        loader.load("../../assets/model-threejs.json", function (model, material) {

                createScene(model, material);

        });

}



function createScene(model, material) {

        material[0].skinning = true;

        animmesh = new THREE.SkinnedMesh(model, material[0]);

        scene.add(animmesh);

}


function render() {

        renderer.render(scene, camera);

}



init();

render();

</script>
Ron Stevenson
  • 166
  • 1
  • 13
  • Pls simplify. That will make it easier for us and you. Take out all the animation code and just see if the mesh appears. Does createScene() get called? – Bob Woodley Jan 14 '15 at 13:40
  • ok, will do, thx. Yeah, it gets called from the load callback. – Ron Stevenson Jan 14 '15 at 18:04
  • I updated the code above to show what i tried without animation. Still not seeing anything. Here is a link to the json i'm loading: https://dl.dropboxusercontent.com/u/55574623/model-threejs.json – Ron Stevenson Jan 15 '15 at 00:48
  • I'm not sure if this is relevant, but I have a png(I think it's a texture file) in the same folder as the json file which is referenced in the JSON metadata. It seems to be finding the png because threejs expects the png to be in that dir. – Ron Stevenson Jan 15 '15 at 00:54

1 Answers1

1

You had several problems. 1) Your elephant was so big it was off the screen. 2) You need to tell the camera to look at the origin. 3) When you simplified the code you made it too simple, you still need the animate loop.

This code works (since I didn't have your PNG files, I used a MeshNormalMaterial):

var camera, scene, renderer, animmesh, controls;
var clock = new THREE.Clock();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    camera.position.x = -900;

    scene.add(camera);

    renderer = new THREE.WebGLRenderer( { antialias: true } );

    renderer.setSize( window.innerWidth*.9, window.innerHeight*.9 );

    document.body.appendChild( renderer.domElement );

    var loader = new THREE.JSONLoader();


    loader.load("model-threejs.json", function (model, material) {

        animmesh = new THREE.Mesh(model, new THREE.MeshNormalMaterial());

        scene.add(animmesh);
        animate();

    });
}

function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
        renderer.render(scene, camera);
        camera.lookAt(new THREE.Vector3(0,0,0));
}
init();

Bob Woodley
  • 1,246
  • 15
  • 30