Не понимаю почему не подгружается текстура на куб. В консоли ошибок нет, путь к текстуре правильный. Как это пофиксить?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material;
var textureLoader=new THREE.TextureLoader();
textureLoader.load('bubble_texture.jpg', texture =>{
console.log(texture);
material = new THREE.MeshPhongMaterial({
map:texture
});
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var geometry2 = new THREE.PlaneGeometry(1, 1);
var material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry2, material2 );
scene.add( plane );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
plane.rotation.x += 0.01;
plane.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>