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 & 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中相交等距立方体

1 个答案: