WebGl - not loaded texture

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

    }

Upvotes: 1

Views: 1478

Answers (2)

ClassicThunder
ClassicThunder

Reputation: 1936

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,

Upvotes: 2

Develoteca
Develoteca

Reputation: 315

You can use a converter to binary code image http://codepen.io/anon/pen/pHKyw physical file to avoid problems. or you can upload one server, this failure happens because you're not running on a server and the file can not be found.

for example:

original

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

replace

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

Upvotes: 1

Related Questions