THREE.js bir doku, Işık Tek bir kaynak tarafından aydınlatılmış bir dikdörtgen çizmek için çalışıyorum ile başlıyorum. Bu kadar basit (HTML kısaltma için çıkarılmıştır) bence

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

Sorun, göremiyorum ki. Eğer malzeme ve kullanımı değiştirirsem bir yorum, bir kare beklediğim gibi görünür. Unutmayın

• Doku yanları iki güç yani 256 × 256,
• Bu işlev aslında vücut yüklendiğinde denir; gerçekten de farklı bir malzeme ile çalışıyor.
• Eğer bir Web sunucusu dosyayı verirsem bile çalışmıyor, çapraz etki alanı ilke resim yüklemek için izin veren bir sorun değildir.

Ben neyi yanlış yapıyorum?

Resim yüklendiği zaman, oluşturucu sahne zaten çok geç olabilir ve bu nedenle de çizmiştir. Çözüm değiştirmektir

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

içine

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