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

Question

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

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

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

谢谢。

Answer 1

所以在摸索一番之后，我设法添加了 easel.js，它具有方便的点击区域功能和鼠标事件处理，问题是必须从 obelisk.js canvas 并将其用于命中区域而不重新渲染。

我仍然需要找出一种添加多个基元的有效方法，目前为止的代码如下：

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

   // 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

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

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

javascript

mouseover

raycasting

isometric