three.js: texture goes all white

Question

EDIT: Following gaitat\'s suggestion for a fix, I got a new error: now the box doesn\'t show up at all. I\'ve written a new question to demonstrate this error.

I have a

Answer 1

If you want to be sure that your texture is loaded you need to use the THREE.Textureloader() .onLoad() function.

Here is how your example would work:

// make DOM elements:
var container = document.createElement( 'div' );
document.body.appendChild( container );

var scene = new THREE.Scene();

// a 'Box2' geometry instance:  (see geometry implementation below)
var myBox2geom = new THREE.BoxGeometry( 100, 100, 100, 10, 10, 10 );  // args: x,y,z-dimensions and width of their segments

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
loader.load(
    'crate.gif',    // resource URL

    function ( texture ) {
        texture.minFilter = THREE.NearestFilter;

        var material = new THREE.MeshLambertMaterial( { map: texture } );

        var myBox2mesh = new THREE.Mesh(myBox2geom, material);

        // add mesh to scene:
        scene.add( myBox2mesh );
    },
);

// make light:
var light = new THREE.PointLight( 0xffffff );
light.position.set(100, 200, 300);
light.lookAt( new THREE.Vector3( 0, 0, 0 ) );
scene.add( light );

// make camera:
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 100, 200, 300 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

// make renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

animate();

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}