WebGl - 未加载纹理

WebGl  - 未加载纹理

问题描述:

我收到错误:Uncaught SecurityError:无法在'WebGLRenderingContext'上执行'texImage2D':可能无法加载file:/// C:/Users/.../img.jpg上的跨源图像。

I receive an error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/.../img.jpg may not be loaded.

var scene, camera, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.CubeGeometry( 300, 300, 300 );
        material = new THREE.MeshLambertMaterial({
        map: THREE.ImageUtils.loadTexture('img.jpg')
        });

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColorHex( 0xFFF8DC, 1 );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        mesh.rotation.x += 0.02;
        mesh.rotation.y += 0.01;

        renderer.render( scene, camera );

    }


我跑我的开发机器上本地称为 mongoose 的简单静态内容服务器。只需将其指向包含项目的文件夹,即可加载页面而无需担心任何跨站点脚本/原始问题,

I run a simple static content server called mongoose locally on my development machine. Simply point it to the folder that contains your project and you can load the page without worrying about any cross site scripting/origin issues,