CODEWITHSUNDEEP
javascriptanimationthree.js3dsmax
Ron Stevenson
Ron Stevenson

Reputation: 166

Rendering blank screen when trying to play animation in threejs

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>

Upvotes: 0

Views: 2261

Answers (1)

Bob Woodley
Bob Woodley

Reputation: 1284

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();

Upvotes: 1

Related Questions