Intersecting an isometric cube in Obelisk.js when mouse pointer intersects

Question

I am using obelisk.js, which does not have a native way ( to my knowledge) of intersecting or raycasting for mouse picking, so I am trying to make my own methods, but I am not sure how to proceed.

Here's the code for a basic pen with a mouseover ( I want to detect when the mouse is on top of the cube):

Codepen sample

    // Canvas & Scene Init:
    var canvas = document.getElementById("canvas01");
    var point = new obelisk.Point(210, 180);
    var pixelView = new obelisk.PixelView(canvas, point);

    // CUBE
    var dimensionCube = new obelisk.CubeDimension(40, 40, 40);
    var cubeColor = new obelisk.CubeColor();
    var cube = new obelisk.Cube(dimensionCube, cubeColor);
    var cubePos = new obelisk.Point3D(80, 80, 0);
    pixelView.renderObject(cube, cubePos);

    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
      };
    }

    // Listener
    canvas.addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y ;
      console.log(message);  
    }, false);

Thanks.

Answer 1

So after a bit of scratching my head I managed to add easel.js which has a handy hit area function and mouse event handling , the catch is that one has to crate a bitmap from the obelisk.js canvas and use that for the hit area without re-rendering.

I still need to figure out an efficient way of adding more than one primitive, here's the code so far:

And of course if you have a better,different or more native way that would be great as well:

   // Canvas & Scene Init:
  var canvas = document.getElementById("canvas01");
  var ctx = canvas.getContext("2d");
  var point = new obelisk.Point(210, 180);
  var pixelView = new obelisk.PixelView(canvas, point);
  var dimensionCube = new obelisk.CubeDimension(40, 40, 40);
  var cubeColor = new obelisk.CubeColor();
  var cube = new obelisk.Cube(dimensionCube, cubeColor);
  var cubePos = new obelisk.Point3D(80, 80, 0);
  pixelView.renderObject(cube, cubePos);

  // Easel.JS glob:
  var stage = new createjs.Stage("canvas01");

  init();

  function init() {
    stage.enableMouseOver(10);
    // we get the rendered canvas
    var dataUrl = canvas.toDataURL();
    // make a bitmap
    var bitmap = new createjs.Bitmap(dataUrl);
    // You could also add a hit area here
    stage.addChild(bitmap);
    // and the event handling we are after:
    bitmap.on("mouseover", handleInteraction);
    bitmap.on("mouseout", handleInteraction);
  }

  function handleInteraction(event) {
    if (event.type === "mouseover") {
      dimensionCube = new obelisk.CubeDimension(40, 40, 120);
      cube = new obelisk.Cube(dimensionCube, cubeColor);
      pixelView.clear();
      pixelView.renderObject(cube, cubePos);
      console.log("over");
    } else {
      dimensionCube = new obelisk.CubeDimension(40, 40, 40);
      cube = new obelisk.Cube(dimensionCube, cubeColor);
      pixelView.clear();
      pixelView.renderObject(cube, cubePos);
      console.log("out");
     }
  }

Pen: Obelisk.js + Easel.js basic Mouseover