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

Question

我使用的是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); 

感谢。

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