Utilisation des textures dans THREE.js

Question

Je commence avec THREE.js, et j'essaie de dessiner un rectangle avec une texture dessus, éclairé par une seule source de lumière. Je pense que c'est aussi simple que possible (HTML omis pour des raisons de brièveté) :

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

Le problème est que je ne vois rien. Si je change le matériau et que j'utilise celui qui a été commenté, un carré apparaît comme je m'y attendais. Notez que

• La texture est de 256x256, donc ses côtés sont des puissances de deux.
• La fonction est en fait appelée lorsque le corps est chargé ; elle fonctionne en effet avec un matériau différent.
• Cela ne fonctionne pas, même si je sers le fichier à partir d'un serveur Web. Il ne s'agit donc pas d'un problème de politique inter-domaines qui ne permet pas de charger l'image.

Qu'est-ce que je fais de mal ?

Answer 1

Utilisez TextureLoader pour charger une image en tant que texture, puis appliquez simplement cette texture à l'arrière-plan de la scène.

 new THREE.TextureLoader();
     loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
                {
                 scene.background = texture;  
                });

Résultat :

https://codepen.io/hiteshsahu/pen/jpGLpq?editors=0011

Voir le stylo Terre Plate Trois.JS par Hitesh Sahu ( @hiteshsahu ) sur CodePen .