Question

我收到错误：Uncaught SecurityError：无法执行＆＃39; texImage2D＆＃39; on＆＃39; WebGLRenderingContext＆＃39;：文件中的跨源图像：/// 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 ... ')

WebGl - 未加载纹理

2 个答案: