当鼠标指针相交时，在 Obelisk.js 中与等距立方体相交答案

【问题标题】：Intersecting an isometric cube in Obelisk.js when mouse pointer intersects当鼠标指针相交时，在 Obelisk.js 中与等距立方体相交
【发布时间】：2017-05-02 20:42:35
【问题描述】：

我正在使用obelisk.js，它没有（据我所知）用于鼠标拾取的相交或光线投射的本地方式，因此我正在尝试制作自己的方法，但我不确定如何继续。

这是带有鼠标悬停的基本笔的代码（我想检测鼠标何时位于立方体顶部）：

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

谢谢。

【问题讨论】：

标签： javascript mouseover raycasting isometric

【解决方案1】：

所以在摸了摸头之后，我设法添加了具有方便的点击区域功能和鼠标事件处理的easel.js，但问题是必须从 obelisk.js 画布中创建一个位图并将其用于没有重新渲染的命中区域。

我仍然需要找到一种添加多个原语的有效方法，这是目前的代码：

当然，如果您有更好、不同或更本土的方式，那也很棒：

   // 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");
     }
  }

笔：Obelisk.js + Easel.js basic Mouseover

【讨论】：