@javaScriptIsPooP
Начинающий программист на Python, Веб-дизайнер

Что делать, если не работает MeshFaceMaterials?

Всем привет! Я пишу программу на 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>
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы