Question

I cant get my collada model to render with three.js until I interact with the browser window. In Chrome, it can be as simple as moving my mouse anywhere on the page (actual canvas is smaller than entire window), and on Safari, it requires a click and drag for the model to render. What’s odd is that the rest of the scene is loading properly (I have a grid that I render to the scene and a couple of lights), but the model won’t show until I do something. Any thoughts on how I can trick the scene into knowing it should show the model?

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('../MODELS/teapot.dae', function colladaReady( collada ) {

    dae = collada.scene;
    skin = collada.skins[ 0 ];

    dae.scale.x = dae.scale.y = dae.scale.z = 10;
    dae.position.y = 75;
    dae.updateMatrix();               

    scene.add(dae);                         
});


document.getElementById('myCanvas').appendChild(renderer.domElement);

render();

Answer 1

The loading is occurring asynchronously. You are only showing a code fragment, but it looks like you can move the render() call to the last line of the colladaReady() callback function.