Three.js Texture chargement

Question

Je commence pendant ce jour avec Three.js et il est très cool. Maintenant, je voudrais charger une texture et l'appliquer à une sphère simple. Mon problème est que lorsque j'ouvre la page du navigateur, je reçois ce error. Je ne sais pas comment résoudre ce problème.

code

window.onload = Init; 

var scene; 
var camera; 
var renderer; 


function render() { 
    renderer.render(scene, camera); 
    requestAnimationFrame(render); 
} 




function Init() { 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000); 
    renderer = new THREE.WebGLRenderer(); 



    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.setClearColor(0xeeeeee, 1); 

    camera.position.set(15, 13, 12); 
    camera.lookAt(scene.position); 

    var cubeGeometry = new THREE.SphereGeometry(5, 30, 30); 




    var loader = new THREE.TextureLoader(); 
    loader.load("texture/earth.jpg", function(texture) { 
     var material = new THREE.MeshLambertMaterial({ map: texture }); 
     var sphere = new THREE.SphereGeometry(5, 30, 30); 
     var mesh = new THREE.Mesh(sphere, material); 
     scene.add(mesh); 
    }); 
    var light = new THREE.SpotLight(0xffffff); 
    light.position.set(10, 20, 20); 
    scene.add(light); 


    document.body.appendChild(renderer.domElement); 

    render(); 
} 

Answer 1

Three.js tente de charger l'image du système de fichiers, comme en témoigne l'URL file:// dans votre capture d'écran. Ceci est interdit par défaut dans les navigateurs modernes, bien qu'il existe plusieurs façons:

• (Recommandé) Exécutez votre code à partir d'un serveur HTTP local. Si vous avez installé Python, exécutez python -m SimpleHTTPServer à partir du répertoire de votre projet pour lancer un serveur simple.
• (non recommandé) Lancer un navigateur Web avec l'accès de fichier local activé (par exemple --allow-file-access-from-files en chrome). Ceci est très précaire, ne surfent pas autour dans un navigateur avec ce paramètre actif.