マウスポインタが交差するときに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