WebGl - 未加载纹理

Question

我收到一个错误：未捕获的 SecurityError：无法在“WebGLRenderingContext”上执行“texImage2D”：可能无法加载 file:///C:/Users/.../img.jpg 处的跨域图像。

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

    }

Answer 1

我在我的开发机器上本地运行一个名为mongoose 的简单静态内容服务器。只需将其指向包含您的项目的文件夹，您就可以加载页面而无需担心任何跨站点脚本/来源问题，

Answer 2

您可以使用转换器到二进制代码图像http://codepen.io/anon/pen/pHKyw 物理文件以避免出现问题。 或者你可以上传一个服务器，这个失败是因为你没有在服务器上运行并且找不到文件。

例如：

原创

map: THREE.ImageUtils.loadTexture('img.jpg')

替换

map: THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSU ... ')