Three.js纹理加载

我在这几天开始使用Three.js，它非常酷。现在我想加载纹理并将其应用于简单的球体。我的问题是，当我打开浏览器页面，我得到这个error。我不知道如何解决这个问题。Three.js纹理加载

代码

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

来源

2017-04-14 Gianmarco6000

three.js所试图从文件系统加载图像，通过你的截图file:// URL证明。这在现代浏览器中是默认禁止的，尽管有一些方法可以解决它：

（推荐）从本地HTTP服务器运行您的代码。如果您安装了Python，请从项目目录运行python -m SimpleHTTPServer以启动一个简单的服务器。
（不推荐）启动启用本地文件访问的Web浏览器（例如Chromium中的--allow-file-access-from-files）。 这是非常不安全的，不要在浏览器中浏览这个设置。

来源

2017-04-14 20:23:02

Three.js纹理加载

回答

相关问题