跳到主要内容

基础鼠标输入

信息

移动鼠标可以移动立方体，按下鼠标按钮可以改变立方体的颜色。

PlayCanvas 引擎通过 pc.Mouse 对象处理鼠标输入。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 对象允许监听与鼠标操作对应的不同事件。本教程将 onMouseMove 方法绑定到移动事件，将 onMouseDown 方法绑定到按钮按下事件。

注意，绑定事件时还向 on() 方法传入了 this。第三个参数指定事件回调中的 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 元素。事件触发时，引擎提供在各浏览器中行为一致的 pc.MouseEvent 对象。如果需要原始 DOM 事件，可通过 pc.MouseEvent 的 event 属性访问。

移动鼠标​

第一个事件处理函数是 onMouseMove，每次鼠标移动时都会调用。对于 EVENT_MOUSEMOVE 事件，MouseEvent 对象中的 x、y 是鼠标当前位置，dx、dy 是自上次事件以来的位置变化量。本教程使用鼠标当前位置，将立方体移动到光标处。

鼠标按钮​

第二个事件处理函数是 onMouseDown，点击三个鼠标按钮中的任意一个时都会触发。对于 EVENT_MOUSEDOWN 和 EVENT_MOUSEUP 事件，MouseEvent 的 button 属性表示按下或松开的按钮，取值如下：

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

本教程根据按下的鼠标按钮改变立方体的颜色。

动手试试​

在此处全屏体验，或直接使用页面顶部的示例。移动鼠标以移动立方体，点击左键、中键和右键以改变其颜色。