Texture applied only on canvas click with Three.js

Question

I am using WebGLRenderer from Three.js to render an object reconstructed from an IndexedFaceStructure that has texture. My problem is that when the page loads the object shows up with no texture, only a black colored mesh displays, however, when i click on the canvas where i render the object the texture shows up.

I have been looking around and tried the texture.needsUpdate = true; trick, but this one removes also the black meshed object on page load so i am at a loss here.

These are the main bits of my code:

function webGLStart() {

            container = document.getElementById("webgl-canvas");
            renderer = new THREE.WebGLRenderer({canvas:container, alpha:true,  antialias: true});
            renderer.setClearColor(0x696969,1);
            renderer.setSize(container.width, container.height) ;
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(45, container.width / container.height, 1, 100000);
            camera.position.set(60, 120,2000) ;

            //computing the geometry2 

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );
            texture = new THREE.ImageUtils.loadTexture(texFile);
            //texture.needsUpdate = true;
            material = new THREE.MeshBasicMaterial( {wireframe:false, map: texture, vertexColors: THREE.VertexColors} );
            mesh = new THREE.Mesh(geometry2, material);

            scene.add(mesh);

            render();
            animate();

    } 

    function render()
    {
        renderer.render(scene, camera);
    }

    function animate()
    {
        controls.update();
    }

And the html part: canvas id="webgl-canvas" style="border: none;" width="900" height="900" (i could not add it properly). Do you happen to have a clue why is this happening?

It is THREE.ImageUtils.loadTexture() not new THREE.ImageUtils.loadTexture(). — WestLangley

WestLangley WestLangley · Accepted Answer · 2015-02-13T19:57:24

If you have a static scene, you do not need an animation loop, and you only need to render the scene when OrbitControls modifies the camera position/orientation.

Consequently, you can use this pattern -- without an animation loop:

controls.addEventListener( 'change', render );

However, you also need to force a render when the texture loads. You do that by specifying a callback to render in the ImageUtils.loadTexture() method:

var texture = THREE.ImageUtils.loadTexture( "textureFile", undefined, render );

Alternatively, you could add the mesh to the scene and call render in the callback.

three.js r.70

Texture applied only on canvas click with Three.js

1 Answers