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

Question

Я могу создать сферу с использованием javascript и библиотеки three.js. Однако у меня есть изображение, которое я хочу наложить поверх сферы, и всякий раз, когда я это делаю, шар превращается в черную сферу без изображения, проецируемого на нее. Вот как я его реализовал: var renderer = new THREE.WebGLRenderer(); renderer.setSize (window.innerWidth, window.innerHeight); document.body.appendChild (renderer.domElement);

// camera 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.z = 500; 

    // scene 
    var scene = new THREE.Scene(); 

    // sphere 
    // the first argument of THREE.SphereGeometry is the radius, the second argument is 
    // the segmentsWidth, and the third argument is the segmentsHeight. Increasing the 
    // segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade 
    // rendering performance 
    var texture = THREE.ImageUtils.loadTexture('beach.jpg', {}, function() { 
    renderer.render(scene, camera); 
    }); 

    texture.needsUpdate = true; 
// texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; 
// texture.repeat.set(125, 125); 
// texture.offset.set(15, 15); 
// texture.needsUpdate = true; 
    var material = new THREE.MeshBasicMaterial({map: texture}); 
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), material);  
    //mesh = new THREE.Mesh(sphere, material); 
    //scene.add(mesh); 
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial()); 
// sphere.overdraw = true; 
    scene.add(sphere); 


    renderer.render(scene, camera); 

Я пробовал все, и изображение не будет успешно накладывая на верхней части сферы, как я могу идти о делать это с помощью three.js? Мой файл «beach.jpg» находится в том же каталоге, что и index.html.

Спасибо за ваше время,

Answer 1

Попробовать включить imageloader. Картинки должны быть загружены полностью, прежде чем их можно будет использовать в качестве текстуры. Подробнее: https://github.com/mrdoob/three.js/issues/1751