【Babylon小技巧01】点击dom按钮，鼠标焦点自动回到canvas画布上

原创已于 2022-03-17 16:43:59 修改 · 842 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5 #webgl

于 2022-03-17 16:24:51 首次发布

babylonjs 专栏收录该内容

11 篇文章

订阅专栏

博客内容涉及HTML Canvas的焦点管理和键盘事件模拟。通过设置canvas的tabIndex属性，可以控制其是否能获取焦点。当需要重新捕获鼠标焦点时，可以通过点击事件或者模拟键盘事件实现。此代码示例展示了如何在Babylon.js场景中，通过点击按钮来改变相机位置并重新聚焦canvas，以便使用键盘控制相机移动。

例如通过弹窗的html的dom按钮，进行camera瞬移，让画布重新捕获鼠标焦点

canvas.tabIndex = -1;
canvas.focus();
canvas.dispatchEvent(new KeyboardEvent('keydown',{'key':'Delete'}))//模拟键盘点击事件

html的canvas的tabindex定义

tabindex="-1" ：表示元素是可聚焦的，但是不能通过 tab 导航来访问到该元素，可以通过js获取。
tabindex="0" ：表示元素是可聚焦的，可以通过 tab 导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。若一个元素没有设置 tabindex，默认值为 0。
tabindex 大于 0 ：表示元素是可聚焦的，可以通过 tab 导航来访问到该元素；它的相对顺序按照 tabindex 的数值递增而滞后获焦（先获取值小的）。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

注：tabindex 的最大值不应超过 32767

playground案例代码

Babylon.js Playgroundhttps://playground.babylonjs.com/#N47TM1%231

如果不捕获鼠标，需要用户重新点击一下canvas画布后，才能继续用wasd移动

playground代码如下：

// just for the playground: remove the button if it's already there
// so that we don't get multiple buttons
$('#button').remove();

// add the button to the playground document
// this is not needed if the button has already been added in the html
$('body').append('<button id="button" style="position: absolute; right: 20px; top: 100px;">Click Me Catch Focus!</button>');




var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Lights
    var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
    var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);

    // Need a free camera for collisions
    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(8, -8, -16), scene);
    camera.setTarget(new BABYLON.Vector3(0, -8, 0));
    camera.attachControl(canvas, true);
            camera.keysUp.push(87);
            camera.keysDown.push(83);
            camera.keysLeft.push(65);
            camera.keysRight.push(68);
            camera.speed=0.5;
            camera.inertia =0.8;
            camera.minZ=0.05;


    document.getElementById("button").addEventListener("click",function () {
        //teleport
        camera.position = new BABYLON.Vector3(7, -8, -16);
        //reset  canvas catch focus
        canvas.tabIndex = -1;
        canvas.focus();
        canvas.dispatchEvent(new KeyboardEvent('keydown',{'key':'Delete'}))//simulate key event
    });


    //Ground
    var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
    ground.material.backFaceCulling = false;
    ground.position = new BABYLON.Vector3(5, -10, -15);
    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);

    //Simple crate
    var box = BABYLON.Mesh.CreateBox("crate", 2, scene);
    box.material = new BABYLON.StandardMaterial("Mat", scene);
    box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
    box.material.diffuseTexture.hasAlpha = true;
    box.position = new BABYLON.Vector3(5, -9, -10);

    //Set gravity for the scene (G force like, on Y-axis)
    scene.gravity = new BABYLON.Vector3(0, -0.9, 0);

    // Enable Collisions
    scene.collisionsEnabled = true;

    //Then apply collisions and gravity to the active camera
    camera.checkCollisions = true;
    camera.applyGravity = true;

    //Set the ellipsoid around the camera (e.g. your player's size)
    camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

    //finally, say which mesh will be collisionable
    ground.checkCollisions = true;
    box.checkCollisions = true;

    return scene;
}