Использование текстур в THREE.js

Я начинаю с THREE.js и пытаюсь нарисовать прямоугольник с текстурой на нем, освещенный одним источником света. Я думаю, это настолько просто, насколько возможно (HTML для краткости опущен):

function loadScene() {
    var world = document.getElementById('world'),
        WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('crate.gif'),
        material = new THREE.MeshBasicMaterial({map: texture}),
        // material = new THREE.MeshPhongMaterial({color: 0xCC0000});
        geometry = new THREE.PlaneGeometry(100, 100),
        mesh = new THREE.Mesh(geometry, material),
        pointLight = new THREE.PointLight(0xFFFFFF);

    camera.position.z = 200;    
    renderer.setSize(WIDTH, HEIGHT);
    scene.addChild(mesh);
    world.appendChild(renderer.domElement);
    pointLight.position.x = 50;
    pointLight.position.y = 50;
    pointLight.position.z = 130;
    scene.addLight(pointLight); 
    renderer.render(scene, camera);
}

Проблема в том, что я ничего не вижу. Если я изменю материал и использую прокомментированный, появится квадрат, как я и ожидал. Обратите внимание, что

• Текстура имеет размер 256x256, поэтому ее стороны равны степени двойки
• Функция фактически вызывается при загрузке тела; действительно, он работает с другим материалом.
• Это не работает, даже если я обслуживаю файл с веб-сервера, поэтому это не проблема междоменной политики, не позволяющей загружать изображение.

Что я делаю не так?