javascript - 在 THREE.js 中使用纹理

Question

我从 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);
}

问题是，我什么也看不到。如果我更改 Material 并使用注释的 Material ，则会出现一个正方形，正如我所期望的那样。注意

• 纹理是256x256，所以它的边是2的幂
• 该函数实际上是在加载正文时调用的；事实上，它适用于不同的 Material 。
• 即使我从网络服务器提供文件也不起作用，所以这不是跨域策略不允许加载图像的问题。

我做错了什么？

Answer 1

当图像加载时，渲染器已经绘制了场景，因此为时已晚。解决办法就是改

texture = THREE.ImageUtils.loadTexture('crate.gif'),

进入

texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {
    renderer.render(scene);
}),