ThreeJsテクスチャが表示されません

Question

ThreeJsのテクスチャをボックスに追加します。 私は何が間違っているのか分かりません。

<script src="three.min.js"></script> 
    <script src="OrbitControls.js"></script> 
    <script> 
    //Scene aanmaken 
    var scene = new THREE.Scene(); 
    //Camera 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    //Render instellen 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.setClearColor(0x000000); 
    document.body.appendChild(renderer.domElement) 
    //Camera positie 
    camera.position.z = 30; 
    camera.position.y = 10; 
    //Orbit control aanroepen, voor rond te kijken in de scene 
    var controls = new THREE.OrbitControls(camera, renderer.domElement); 


    var tafelGeometry = new THREE.BoxGeometry(20,1,40); 
    //Texture  
    var tableMaterials = new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture("laken.jpg"),side: THREE.DoubleSide}); 

    var tafel = new THREE.Mesh(tafelGeometry,tableMaterials); 
    scene.add(tafel); 


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

誰かが私を助けてくれることを願っています。 親切なことにPatrick

Answer 1

Chromeはセキュリティ上の理由からテクスチャを読み込まないようにしています。 で（Windowsの場合）クロムを開こう：

.\chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security 

（それで他のサイトを訪問していない）

Answer 2

テクスチャの読み込みに問題があると思います。

XMLHttpRequest cannot load file:/Desktop/Three.js/abc.jpg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

あなたがウェブサイトを作ることによって、いくつかのウェブエディタ（すなわち、視覚的なスタジオ）を使用して、上記の問題のチェックを得た場合は、次のテクスチャが完全にロードされ、次のエラーを得ていなかったことを確認してください。