Доброго времени суток!
Учусь webgl и threejs.
Непонятная штука происходит в chrome, в мозилке все хорошо.
Куб появляется на долю секунды и исчезает.
Если loader.load(); оставить пустым, то появляется черный кубик
Я так понимаю хром почему то не может подгрузить изображения
Как это можно исправить?
<html>
<head>
<title></title>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
<script>
window.onload = init;
var scene, camera, render, loader, cube_texture, cube_geometry;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 500;
////////////////////////////////////////////////
cube_geometry = new THREE.CubeGeometry(300,300,300,30,30,30);
cube_texture = new THREE.Texture();
loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function (event) {
cube_texture.image = event.content;
cube_texture.needsUpdate = true;
});
loader.load();
var cube_material = new THREE.MeshBasicMaterial({map: cube_texture, overdrop: true});
/////////////////////////////////////////////////
var cube = new THREE.Mesh(cube_geometry, cube_material);
scene.add(cube);
render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
var container = document.createElement('div');
container.appendChild(render.domElement);
document.body.appendChild(container);
animation();
function animation() {
requestAnimationFrame(animation);
cube.rotation.y += 180/Math.PI * 0.0001;
render.render(scene,camera);
}
}
</script>
</body> </html>