基本的なマウス入力

マウスを動かすとキューブが動きます。マウスのボタンを押すとキューブの色が変わります。

PlayCanvasエンジンでの処理マウスはpc.Mouseオブジェクトによって提供されます。マウスオブジェクトは、マウスが移動したときや、マウスボタンが押されたことを検出するための簡単なインターフェースを提供します。また、マウス座標の処理におけるクロスブラウザの不一致を一部改善します。

チュートリアルプロジェクトをご確認ください。mouse.jsのコードは次の通りです：

var Mouse = pc.createScript('mouse');

Mouse.attributes.add('redMaterial', {
    type: 'asset',
    assetType: 'material'
});

Mouse.attributes.add('greenMaterial', {
    type: 'asset',
    assetType: 'material'
});

Mouse.attributes.add('blueMaterial', {
    type: 'asset',
    assetType: 'material'
});

// initialize code called once per entity
Mouse.prototype.initialize = function() {
    this.pos = new pc.Vec3();

    // Disabling the context menu stops the browser displaying a menu when
    // you right-click the page
    this.app.mouse.disableContextMenu();

    // Use the on() method to attach event handlers.
    // The mouse object supports events on move, button down and
    // up, and scroll wheel.
    this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
};

Mouse.prototype.onMouseMove = function (event) {
    // Use the camera component's screenToWorld function to convert the
    // position of the mouse into a position in 3D space
    var depth = 10;
    var cameraEntity = this.app.root.findByName('Camera');
    cameraEntity.camera.screenToWorld(event.x, event.y, depth, this.pos);

    // Finally update the cube's world-space position
    this.entity.setPosition(this.pos);
};

Mouse.prototype.onMouseDown = function (event) {
    // If the left mouse button is pressed, change the cube color to red
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        this.entity.render.meshInstances[0].material = this.redMaterial.resource;
    }

    // If the middle mouse button is pressed, change the cube color to green
    if (event.button === pc.MOUSEBUTTON_MIDDLE) {
        this.entity.render.meshInstances[0].material = this.greenMaterial.resource;
    }

    // If the right mouse button is pressed, change the cube color to blue
    if (event.button === pc.MOUSEBUTTON_RIGHT) {
        this.entity.render.meshInstances[0].material = this.blueMaterial.resource;
    }
};

マウスにアクセス

マウスコントロールはpc.Mouseオブジェクトによって管理されます。フレームワークは、アプリケーションappでこのインスタンスを提供します。これは次のように全てのスクリプトオブジェクトで利用可能です：

this.app.mouse

右クリックメニューを無効化

スクリプトオブジェクトのコンストラクタでは、右クリックメニューを無効にしているので、マウスの右ボタンをクリックしてもポップアップメニューは表示されません。

this.app.mouse.disableContextMenu();

イベントにバインド

pc.Mouseオブジェクトから、マウス操作に対応したさまざまなイベントを聞くことができます。チュートリアルでは、moveイベントにonMouseMoveメソッドを、ボタンダウンイベントにonMouseDownをバインドします。

イベントへのバインドのためにthis をon()メソッドに渡します。この3番目の引数は、イベントコールバックでthisとして使用されるオブジェクトです。

this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);

pc.Mouseで利用可能なイベント：

pc.EVENT_MOUSEUP - マウスボタンが開放されると発動
pc.EVENT_MOUSEDOWN - マウスボタンが押されると発動
pc.EVENT_MOUSEMOVE - マウスが動かされると発動
pc.EVENT_MOUSEWHEEL - マウスホイールが動かされると発動

ブラウザでのマウス入力は通常、ページのDOMの要素のDOMのイベントをリッスンすることで実装されます。問題は、異なるブラウザはそれぞれ少しずつ異なるイベントを実装し、別の値を提供していることです。書くコードをシンプルにするために、PlayCanvasエンジンはイベントハンドラを直接DOM要素にバインドするのではなく、PlayCanvasマウスハンドラにバインドすることを可能にします。エンジンはイベント発生時に、すべてのブラウザで一貫性があるpc.MouseEventオブジェクトを提供します。オリジナルのDOMイベントが必要な場合はpc.MouseEventのeventプロパティとして利用可能です。

マウスを動かす

最初のイベントハンドラはonMouseMoveです。これは、マウスが移動するたびに発動します。EVENT_MOUSEMOVEイベントの場合、MouseEventオブジェクトには、現在のマウスの位置をxとy、最後のイベント以来の位置の変化をdxとdyで示します。チュートリアルでは、マウスの現在位置を使用して、カーソル位置にキューブを移動します。

マウスボタン

二つ目のイベントハンドラはonMouseDownです。3つのマウスボタンのいずれかがクリックされると発動します。EVENT_MOUSEDOWNとEVENT_MOUSEUPイベントでは、MouseEventオブジェクトに押下／開放されたボタンを含む buttonプロパティがあります。これは、次の値のいずれかになります：

pc.MOUSEBUTTON_NONE
pc.MOUSEBUTTON_LEFT
pc.MOUSEBUTTON_MIDDLE
pc.MOUSEBUTTON_RIGHT

チュートリアルでは、押されたマウスボタンに応じてキューブの色を変更します。

試してみよう

フルスクリーンでのチュートリアルはページ上部またはこちらからお試しください。マウスの移動でキューブを動かし、左、中、右マウスボタンをクリックしてキューブの色を変更します。