学习babylon.js --- [4] 体验WebVR

news2025/1/15 13:01:28

本文基于babylonjs来创建一个简单的WebVR工程，来体验一下babylonjs带来的VR效果，由于没有VR头显，所以只能使用Win10自带的混合现实模拟器，开启模拟器请参考这篇文章

一简单工程

本文基于第三篇文章中的工程进行修改，因为WebVR需要https才可以使用。

打开src/app.ts，清空里面的内容，然后把下面的代码拷贝进去，

import * as BABYLON from "@babylonjs/core"

// create the canvas html element and attach it to the webpage
var canvas = document.createElement("canvas");
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.id = "gameCanvas";
document.body.appendChild(canvas);

const engine = new BABYLON.Engine(canvas, true);

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

    const alpha =  Math.PI/4;
    const beta = Math.PI/3;
    const radius = 8;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    box.position.x = 0.5;
    box.position.y = 1;

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;

    box.actionManager = new BABYLON.ActionManager(scene);
    box.actionManager.registerAction(
        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, 
        function (evt) {
            const sourceBox = evt.meshUnderPointer;
            if (sourceBox)
            {
                sourceBox.position.x += 0.1;
                sourceBox.position.y += 0.1;
                boxMaterial.diffuseColor = BABYLON.Color3.Random();
            }
        }));

    const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
    
    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });

    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
};

createScene().then(sceneToRender => {
    engine.runRenderLoop(() => sceneToRender.render());
});

内容比较简单，就是添加相机，光源，一个正方体和一个平板。代码里使用了ActionManager用来处理鼠标点击的事件，当3D事件中有物体被鼠标或手柄点击到，其坐标的x和y就同时加0.1，并把物体的颜色变换成随机色。

还有就是使用了VR相关的api — createDefaultXRExperienceAsync()
PS：说实在的本人暂时也不是很清楚具体用法。

二运行体验

同理，运行下面2条命令来构建并运行server，

npm run build
npm run start

浏览器里输入https://127.0.0.1:8080/然后回车，显示如下，
在这里插入图片描述
用鼠标点击这个立方体，可以发现它会移动和变色。

此时还是3D，没有VR效果，注意看右下角有个像VR头显的图标，点击那个图标，会弹出一个框让选择是否允许xxx，点击允许就行了，然后就会自动开启Win10混合现实门户，如下，
在这里插入图片描述
可以按ASWD键来回移动，也可以按住鼠标左键不放来回移动，里面这个白色光线一样的东西是虚拟手柄的指向，通过调整位置可以把手柄露出来，

然后左右前后调整，让这个光线指到立方体上，上图已经指到了，此时按一下空格键，就表示手柄点击了一下这个立方体，
在这里插入图片描述
可以看到位置和颜色都变了。