How do I get the color of a cube face that is facing the camera?

Questions
, ,
1

Is there a way to get the color of a cube face that is facing the camera? My cube’s geometry is a box geometry and I have colored each side of the cube a different color using MeshBasicMaterials.

Capture

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const materials = [
      new THREE.MeshBasicMaterial({color: 0x0000ff, transparent: true}), // blue
      new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true}), // white
      new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true}), // yellow
      new THREE.MeshBasicMaterial({color: 0x008000, transparent: true}), // green
      new THREE.MeshBasicMaterial({color: 0xffa500, transparent: true}), // orange
      new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true}), // red
  ]

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

when you raycast it gives you the face and the faceIndex, the latter (i think) should correspond, for instance: mesh.material.material[faceIndex].color

1 Like
3

Thanks. It wasn’t faceIndex I was looking for but materialIndex. The value of materialIndex corresponds to the specific MeshBasicMaterial(and therefore color) of the face the intersection occurs on. The value 4 corresponds to the MeshBasicMaterial at index 4 in the materials array. I therefore know the color of the cube face that is facing the camera is orange.

Capture