find upper face of cube on demand

Question

The general problem I'm trying to solve is to find out what face of a cube faces upwards. The cube can be rolled 90° at a time and in any direction. If a certain face faces up, the cube disappears. I'm working with tweens to rotate the cube and change the position of it.

I'm currently trying to solve this by creating a new ray, with its origin set just above the cube and its direction going downwards for a short distance, so it intersects with the upper face of the cube only. violet thingy on top of die is ray cast downward into the cube

So far so good. I get my cube as the object of intersection when I check per console.log(), but as soon as I try to access the face of intersection by faceIntersect.face it seems to be undefined.

Function in question:

function checkUpperFace(posX, posZ) {

  // get position from passed x- and z-values (y is always above cube)
  // and set direction and length of ray
  var position = new THREE.Vector3( posX, 3, posZ );
  var direction = new THREE.Vector3(0, -1, 0);
  var far = 2;
  // create ray, that goes downwards from above the cube
  var cubeRaycaster = new THREE.Raycaster( position, direction, 0, far );
  // get intersection with upper face of rolled cube
  var faceIntersect = cubeRaycaster.intersectObject( currentCube );

  // add a helper to see the ray
  var arrowHelper = new THREE.ArrowHelper( direction, position, far, 0x770077 );
  scene.add( arrowHelper );

  console.log(faceIntersect); // object is shown with everything I want to know
  console.log(faceIntersect.face); // is shown to be undefined

}

niceWeather niceWeather · Accepted Answer · 2015-12-11T09:12:49

In the end I did it in a way @unx recommended but I really wanted to avoid the huge if-else statement, so I did it with an array rotationLibrary that has all possible rotations with the corresponding top face of the die. But because of the tween I use to rotate and move the die its rotation values are not really on point and therefore hard to compare to fixed rotation values as I use them in the array.

So I "normalize" the rotation values of the die to values I can use to compare them to my values in rotationLibrary. The last step is to store/update the result on what face is on top in the cube object itself, so I can get it whenever I want.

// spawn condition:
// 1 on top, 2 facing camera, 3 facing right (seen from camera),
// 4 facing left (see 3), 5 facing away from camera, 6 facing down
var rotationLibrary = [
    {x: 0,      y: 0,   z: 0,   face: 1},
    {x: 0,      y: 90,  z: 0,   face: 1},
    {x: 180,    y: 0,   z: 180, face: 1},
    {x: 0,      y: -90, z: 0,   face: 1},
    {x: -90,    y: 0,   z: 0,   face: 2},
    {x: -90,    y: 0,   z: 90,  face: 2},
    {x: -90,    y: 0,   z: 180, face: 2},
    {x: -90,    y: 0,   z: -90, face: 2},
    {x: 0,      y: 0,   z: 90,  face: 3},
    {x: 90,     y: 90,  z: 0,   face: 3},
    {x: -90,    y: -90, z: 0,   face: 3},
    {x: -90,    y: 90,  z: 180, face: 3},
    {x: 180,    y: 0,   z: -90, face: 3},
    {x: 0,      y: 0,   z: -90, face: 4},
    {x: 90,     y: -90, z: 0,   face: 4},
    {x: -90,    y: 90,  z: 0,   face: 4},
    {x: 180,    y: 0,   z: 90,  face: 4},
    {x: 90,     y: 0,   z: 0,   face: 5},
    {x: 90,     y: 0,   z: -90, face: 5},
    {x: 90,     y: 0,   z: 180, face: 5},
    {x: 90,     y: 0,   z: 90,  face: 5},
    {x: 90,     y: 90,  z: 90,  face: 5},
    {x: 0,      y: 0,   z: 180, face: 6},
    {x: 180,    y: -90, z: 0,   face: 6},
    {x: 180,    y: 90,  z: 0,   face: 6},
    {x: 180,    y: 0,   z: 0,   face: 6}
];

function checkRotationsToGetUpperFace(cube) {
  // create object with "normalized" (brought to quarter-circle-degree-values) degrees
  var normalizedRotation = {
    x: 0,
    y: 0,
    z: 0
  };
  normalizedRotation.x = getNormalizedDegree(cube.rotation._x);
  normalizedRotation.y = getNormalizedDegree(cube.rotation._y);
  normalizedRotation.z = getNormalizedDegree(cube.rotation._z);

  // go through the library that has all the degrees with the corresponding upper face
  for (var i = 0; i < rotationLibrary.length; i++) {
    // check if the objects match, then get the face
    if (rotationLibrary[i].x == normalizedRotation.x &&
      rotationLibrary[i].y == normalizedRotation.y &&
      rotationLibrary[i].z == normalizedRotation.z) {
      cube.face = rotationLibrary[i].face;
    }
  }

  // reattach cube for correct movement later
  THREE.SceneUtils.attach(cube, scene, pivot);
}

function getNormalizedDegree(rotationValue) {
    // transform rotation value into degree value
  var rotValue = rotationValue / (Math.PI / 180);

  // default value is 0, so only check if it should be 90°, 180° or -90°
  var normalizedDegree = 0;
  // x between 45° and 135° ( ~ 90)
  if (rotValue > 45 && rotValue < 135) {
    normalizedDegree = 90;
  }
  // x between -45° and -135° ( ~ -90)
  else if (rotValue < -45 && rotValue > -135) {
    normalizedDegree = -90;
  }
  // x between 135° and 215° or x between -135° and -215° ( ~ 180)
  else if ((rotValue > 135 && rotValue < 215) || (rotValue < -135 && rotValue > -215)) {
    normalizedDegree = 180;
  }

  return normalizedDegree;
}

(http://jsfiddle.net/b2an3pq7/3/)

find upper face of cube on demand

2 Answers