Reputation: 83
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
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
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