|
Ошибка при подключении текстур " The cross-origin image..."
Файл находится на локал хосте. При подключении текстур выдает: "Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///D:/Work/img/sun_texture.jpg may not be loaded."
Не могу понять, как устранить ошибку((
Вот сам файл:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object space</title>
<script src="js/three.min.js"></script>
<style>
body {
background: black;
}
</style>
</head>
<body>
<script>
var scene, camera, render, container;
container = document.createElement('div');
document.body.appendChild(container);
// CAMERA -----------------------
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000000);
camera.position.z = 17300;
scene = new THREE.Scene();
// OBJECTS -----------------------
//Stars
var stars, starsGeometry, starsMaterial;
starsGeometry = new THREE.Geometry();
starsMaterial = new THREE.ParticleBasicMaterial({color: 0xe6e6fa, size:1, sizeAttenuation: false});
for(var i = 0; i < 10000; i++){
var vertex = new THREE.Vector3();
vertex.x = Math.random()*2-1;
vertex.y = Math.random()*2-1;
vertex.z = Math.random()*2-1;
vertex.multiplyScalar(21000);
starsGeometry.vertices.push(vertex);
}
stars = new THREE.ParticleSystem(starsGeometry, starsMaterial);
stars.scale.set(400, 600, 800);
scene.add(stars);
//Sun
var sun, sunGeometry, sunMaterial, sunTexture;
sunGeometry = new THREE.SphereGeometry(600, 30, 30);
sunTexture = THREE.ImageUtils.loadTexture('img/sun_texture.jpg');
sunTexture.anisotropy = 8;
sunMaterial = new THREE.MeshPhongMaterial({map: sunTexture, emissive: 0xffffff});
sun = new THREE.Mesh(sunGeometry, sunMaterial);
scene.add(sun);
//Earth
var earth, earthGeometry, earthMaterial;
earthGeometry = new THREE.SphereGeometry(6, 10, 10);
earthMaterial = new THREE.MeshNormalMaterial();
earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
// RENDER -----------------------
render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
container.appendChild(render.domElement);
var t = 0;
var y = 0;
var x = 0;
document.addEventListener('mousemove',function (event){
y = parseInt(event.offsetY);
x = parseInt(event.offsetX);
});
animate();
//ANIMATION -----------------------
function animate(){
requestAnimationFrame(animate);
sun.rotation.y += 0.0009;
earth.position.x = -Math.sin(t*0.001)*15000;
earth.position.z = Math.cos(t*0.001)*17000;
earth.rotation.y += 0.001;
camera.position.y += y*0.01;
camera.lookAt(scene.position);
t += Math.PI/180*2;
render.render(scene, camera);
}
</script>
</body>
</html>
Заранее благодарен!
Последний раз редактировалось Ghash, 25.03.2014 в 13:10.
|