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紋理加載

回答

相關問題