Tutorials

基本的なマウス入力

マウスを動かしてキューブを動かし、マウスのボタンを押してキューブの色を変えることができます

PlayCanvasのエンジンでは、pc.Mouseオブジェクトが提供されており、マウスが移動したときやマウスボタンが押されたときに検出するためのシンプルなインターフェイスを提供します。また、マウス座標の処理におけるブラウザ間での一貫性の問題を解決することができます。

tutorial projectを見てみましょう。次に、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オブジェクトによって管理されます。フレームワークは、application app上でこれのインスタンスを提供します。このインスタンスは、すべてのスクリプトオブジェクトで次のように利用できます:

this.app.mouse

右クリックメニューの無効化

スクリプトオブジェクトのコンストラクタでは、右クリックメニューを無効にすることにより、右マウスボタンをクリックしたときに表示されるポップアップを停止します。

this.app.mouse.disableContextMenu();

イベントへのバインド

pc.Mouseオブジェクトでは、マウスアクションに対応する異なるイベントをリッスンすることができます。チュートリアルでは、onMouseMoveメソッドを移動イベントにバインドし、onMouseDownメソッドをボタンダウンイベントにバインドしています。

私たちがイベントにバインドするためにon()メソッドにthisを渡すことにも注目してください。この3つ目の引数は、イベントコールバック内でthisとして使われるオブジェクトです。

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

pc.Mouse で利用可能なイベントは以下の通りです。

ブラウザでのマウス入力は、通常、ページのDOM内の要素に対するDOMイベントをリスニングすることで実装されます。問題は、異なるブラウザがイベントを微妙に異なる方法で実装し、異なる値を提供することです。コードの記述を簡略化するために、PlayCanvasエンジンでは、イベントハンドラをDOM要素ではなくPlayCanvasのマウスハンドラにバインドすることができます。エンジンは、イベントが発火するときに、すべてのブラウザで一貫性のあるpc.MouseEventオブジェクトを提供します。もし元のDOMイベントが必要な場合は、pc.MouseEventeventプロパティとして利用可能です。

マウスの移動

最初のイベントハンドラはonMouseMoveです。これはマウスが動くたびに発火します。EVENT_MOUSEMOVEイベントの場合、MouseEventオブジェクトは現在のマウスの位置xy、そして最後のイベントからの位置の変化dxdyを持っています。当チュートリアルでは、マウスの現在の位置を使用し、キューブをカーソル位置に移動させています。

マウスボタン

2つ目のイベントハンドラはonMouseDownです。これはマウスの三つのボタンのいずれかがクリックされるたびに発火します。EVENT_MOUSEDOWNEVENT_MOUSEUPイベントでは、MouseEventオブジェクトは押された/解放されたボタンを含むbuttonプロパティを持ちます。次のいずれかの値になります。

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

試してみよう。

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

This site is translated by the community. If you want to get involved visit this page