Three.jsテクスチャローディング

Question

私はこの間にThree.jsで始まります。とてもクールです。今私はテクスチャをロードし、単純な球に適用したいと思います。私の問題は、ブラウザのページを開くと、私はこれを得るerrorです。私はこの問題を解決する方法を知らない。

コード

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は、あなたのスクリーンショットのfile:// URLによって証明されるように、ファイルシステムからイメージをロードしようとしています。その周りにカップルの方法があるが、これは、最近のブラウザでは、デフォルトで禁止されています

• （推奨）ローカルHTTPサーバーからコードを実行します。 Pythonがインストールされている場合は、プロジェクトのディレクトリからpython -m SimpleHTTPServerを実行して、単純なサーバーを起動します。
• （推奨しません）ローカルファイルアクセスが有効なウェブブラウザを起動します（例：Chromiumでは--allow-file-access-from-files）。 これは非常に安全ではありません、この設定を有効にしてブラウザで周囲を回ってはいけません。