Всем привет! Я пишу программу на javascript, которая будет выводить куб с изображением по сторонам, для этого я использую three.js. Вообщем пишу я
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/1.png'), side: THREE.DoubleSide})
Но мне вместо куба с изображением выводит черный экран. Что делать?
Вот код:
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function() {
let width = window.innerWidth;
let height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = THREE.OrbitControls(camera, renderer.domElement);
// Shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
let cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/1.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/2.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/3.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/4.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/5.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/6.png'), side: THREE.DoubleSide})
];
let material = new THREE.MeshFaceMaterial(cubeMaterials);
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Camera Position
camera.position.z = 2.1;
// Game Logic
let update = function () {
cube.rotation.x += 0.08;
cube.rotation.y += 0.08;
};
// Draw Scene
let render = function () {
renderer.render(scene, camera);
};
// Run Game
let GameLoop = function () {
requestAnimationFrame(GameLoop);
// update();
render();
};
GameLoop();
</script>
</body>
</html>
