WebXR交互式VR场景无控制器响应，疑似进入视频模式求助

你的问题核心是VR浏览器误将Canvas识别为视频流，同时Babylon.js的VR交互配置存在局部变量作用域问题，导致VR模式下无法正常交互。以下是具体解决步骤：

1. 阻止浏览器触发视频模式 #

给Canvas标签添加属性，避免被识别为视频：

<canvas id="renderCanvas" disablepictureinpicture controls="false"></canvas>

同时在CSS中增加额外声明，强化非视频标识：

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    object-fit: contain; /* 防止浏览器按视频比例拉伸 */
}

2. 修正VRHelper的作用域问题 #

原代码中VRHelper是createScene函数的局部变量，导致按钮回调中无法访问（VRHelper为undefined），激光指针切换逻辑失效。将其改为全局变量，确保交互逻辑能正确触发：

var VRHelper; // 提升为全局变量

var createScene = function () {
    // ... 其他代码 ...

    VRHelper = scene.createDefaultVRExperience();
    VRHelper.enableInteractions();

    return scene;
};

3. 优化VR相机与交互配置 #

默认的FreeCamera在VR模式下可能干扰WebXR相机的控制，建议在VR进入时禁用FreeCamera的控制，退出时恢复：

VRHelper.onEnteringVRObservable.add(() => {
    camera.detachControl(canvas);
});

VRHelper.onExitingVRObservable.add(() => {
    camera.attachControl(canvas, true);
});

同时确保GUI元素支持VR指针交互，创建AdvancedDynamicTexture时显式启用VR交互：

var textureForMainMenu = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(planeForMainMenu);
textureForMainMenu.usePointerToInteract = true; // 启用指针交互

var textureForColorPicker = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(planeForColorPicker);
textureForColorPicker.usePointerToInteract = true;

4. 添加VR适配的Meta标签 #

在HTML头部添加VR相关的viewport配置，帮助浏览器正确识别VR内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <title>Babylon.js VR Interactive Scene</title>

        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
                object-fit: contain;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas" disablepictureinpicture controls="false"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var VRHelper; // 全局VRHelper变量

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var textblock;
        var camera; // 全局相机变量
        
        var createScene = function () {
            scene = new BABYLON.Scene(engine);
        
            camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0,0,-20),scene);
            camera.attachControl(canvas, true);
            var sunLight = new BABYLON.HemisphericLight("sunLight", new BABYLON.Vector3(0,1,0), scene);
        
            // Plane Mesh used for GUI elements
            var planeForMainMenu = BABYLON.Mesh.CreatePlane("planeForMainMenu", 20);
            planeForMainMenu.position.y = 5;
        
            var planeForColorPicker = BABYLON.Mesh.CreatePlane("planeForColorPicker", 20);
            planeForColorPicker.position.y = 5;
            planeForColorPicker.position.x = 20;
        
            // GUI
            var textureForMainMenu = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(planeForMainMenu);
            textureForMainMenu.usePointerToInteract = true;
            
            var textureForColorPicker = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(planeForColorPicker);
            textureForColorPicker.usePointerToInteract = true;
        
            var stackPanel = new BABYLON.GUI.StackPanel();  
            stackPanel.top = "100px";
            textureForMainMenu.addControl(stackPanel);    
        
            var clickMeButton = BABYLON.GUI.Button.CreateSimpleButton("clickMeButton", "Click Me");
            clickMeButton.width = 1;
            clickMeButton.height = "100px";
            clickMeButton.color = "white";
            clickMeButton.fontSize = 50;
            clickMeButton.background = "green";
            clickMeButton.onPointerUpObservable.add(function() {
                if (VRHelper) {
                    VRHelper.displayLaserPointer = !VRHelper.displayLaserPointer;
                }
            });
            stackPanel.addControl(clickMeButton);
        
            textblock = new BABYLON.GUI.TextBlock();
            textblock.height = "150px";
            textblock.fontSize = 100;
            textblock.text = "please pick an option:";
            stackPanel.addControl(textblock);   
        
            addRadio("option 1", stackPanel);
            addRadio("option 2", stackPanel);
            addRadio("option 3", stackPanel);
            addRadio("option 4", stackPanel);
            addRadio("option 5", stackPanel);    
        
            var picker = new BABYLON.GUI.ColorPicker();
            picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            picker.height = "450px";
            picker.width = "450px";
            picker.onValueChangedObservable.add(function(value) { // value is a color3
                sphereMat.diffuseColor = value;
            });    
            textureForColorPicker.addControl(picker);  
        
            // Sphere material color will be updated by the value of the Color Picker
            var sphere = BABYLON.Mesh.CreateSphere("sphere", 12, 2, scene);
            sphere.position.x = 10;
            var sphereMat = new BABYLON.StandardMaterial("sphereMat", scene);
            sphere.material = sphereMat;
        
            VRHelper = scene.createDefaultVRExperience();
            VRHelper.enableInteractions();

            // VR模式切换时处理相机控制
            VRHelper.onEnteringVRObservable.add(() => {
                camera.detachControl(canvas);
            });

            VRHelper.onExitingVRObservable.add(() => {
                camera.attachControl(canvas, true);
            });
        
            return scene;
        };
        
        var addRadio = function(text, parent) {
            var button = new BABYLON.GUI.RadioButton();
            button.width = "40px";
            button.height = "40px";
            button.color = "white";
            button.background = "green";     
            button.onIsCheckedChangedObservable.add(function(state) {
                if (state) {
                    textblock.text = "You selected " + text;
                }
            }); 
            var header = BABYLON.GUI.Control.AddHeader(button, text, "400px", { isHorizontal: true, controlFirst: true });
            header.height = "100px";
            header.children[1].fontSize = 80;
            header.children[1].onPointerUpObservable.add(function() {
                button.isChecked = !button.isChecked;
            });
            parent.addControl(header);    
        }
                window.initFunction = async function() {
                    
                    
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = createScene();};
        initFunction().then(() => {sceneToRender = scene                    
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者karol512