마우스 포인터가 교차 할 때 Obelisk.js의 아이소 메트릭 큐브 교차하기

Question

마우스 피킹을위한 교차 또는 광선 캐스팅의 기본 방법이없는 obelisk.js을 사용하고 있습니다. 따라서 직접 메서드를 만들려고합니다. 그러나 어떻게 진행해야할지 모르겠습니다.

여기에 마우스 오버 (I 마우스 큐브의 상단에있을 때 감지 할)와 기본 펜에 대한 코드입니다 :

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