Как сделать так, чтобы куб Three.js имел разные цвета на разных сторонах? ⇐ CSS

[Anonymous]

Я новичок в Three.js, и в программе, которую я создаю, мне хотелось бы сделать разные цвета для разных сторон куба. Клавиши со стрелками управляют вращением куба. Например, можно ли использовать красный цвет на одной грани, оранжевый — на другой, желтый — на третьей, зеленый — на третьей, синий — на третьей и фиолетовый — на последней?
Вот код JavaScript, который я уже есть:
var scene, camera, renderer, cube;
var rotateSpeed = 0.1; // initial rotation speed
var cubeRotation = { x: 0, y: 0, z: 0 };

function createCube() {
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff })
cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cube);
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
createCube();
}

function animate() {
requestAnimationFrame(animate);

// Update cube rotation based on arrow key input
cube.rotation.x = cubeRotation.x;
cube.rotation.y = cubeRotation.y;
cube.rotation.z = cubeRotation.z;

renderer.render(scene, camera);
}

// Function to handle key presses (arrow keys)
function onKeyDown(event) {
switch(event.keyCode) {
case 37: // Left arrow
cubeRotation.y -= rotateSpeed;
break;
case 38: // Up arrow
cubeRotation.x -= rotateSpeed;
break;
case 39: // Right arrow
cubeRotation.y += rotateSpeed;
break;
case 40: // Down arrow
cubeRotation.x += rotateSpeed;
break;
}
}

// Add event listener for keydown
window.addEventListener('keydown', onKeyDown, false);

// Initialize and animate
init();
animate();


Подробнее здесь: https://stackoverflow.com/questions/792 ... rent-sides