How to make a three.js cube have different colors on different sides?

Question

I am new to three.js, and in a program I am creating, I would like to make different colors for different sides of the cube. The arrow keys control cube rotation. For example, could I have red on one facet, orange on another, yellow on another, green on another, blue on another, and purple on the last?

Here is the javascript code I have so far:

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();

THREE.FaceColors

Roko C. Buljan
– Roko C. Buljan

2024-11-24 21:06:48 +00:00
Commented Nov 24, 2024 at 21:06 — Roko C. Buljan
– Roko C. Buljan, Commented Nov 24, 2024 at 21:06
related: stackoverflow.com/staging-ground/79221077

Christoph Rackwitz
– Christoph Rackwitz

2024-11-25 08:34:43 +00:00
Commented Nov 25, 2024 at 8:34 — Christoph Rackwitz
– Christoph Rackwitz, Commented Nov 25, 2024 at 8:34

Łukasz Daniel Mastalerz · Accepted Answer · 2024-11-24 23:01:38Z

@Roko C. Buljan THREE.FaceColors is deprecated. And removed in r125.

Try something like this:

*{margin:0};

<script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

var scene, camera, renderer, cube;

var rotateSpeed = 0.1;

var cubeRotation = { x: 0, y: 0, z: 0 };

function createCube() {

  var geometry = new THREE.BoxGeometry(1, 1, 1);

  var materials = [

new THREE.MeshBasicMaterial({ color: 0xff0000 }),

new THREE.MeshBasicMaterial({ color: 0xffa500 }),

new THREE.MeshBasicMaterial({ color: 0xffff00 }),

new THREE.MeshBasicMaterial({ color: 0x008000 }),

new THREE.MeshBasicMaterial({ color: 0x0000ff }),

new THREE.MeshBasicMaterial({ color: 0x800080 })

  ];

  cube = new THREE.Mesh(geometry, materials);

  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);

  var controls = new OrbitControls(camera, renderer.domElement);

  createCube();

}

function animate() {

  requestAnimationFrame(animate);

  cube.rotation.x = cubeRotation.x;

  cube.rotation.y = cubeRotation.y;

  cube.rotation.z = cubeRotation.z;

  renderer.render(scene, camera);

}

function onKeyDown(event) {

  switch (event.keyCode) {

case 37:

  cubeRotation.y -= rotateSpeed;

  break;

case 38:

  cubeRotation.x -= rotateSpeed;

  break;
case 39:

  cubeRotation.y += rotateSpeed;

  break;

case 40:

  cubeRotation.x += rotateSpeed;

  break;

  }

}

window.addEventListener('keydown', onKeyDown, false);

init();

animate();

</script>

Collectives™ on Stack Overflow

How to make a three.js cube have different colors on different sides?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related