javascript - 如何在Forge Viewer 中支持 WebVR 功能

Question

我们可以通过使用Forge Viewer 来浏览 3D 模型，目前 Forge Viewer 能否支持 VR 功能？尤其是 WebVR？ 如何支持？

Answer 1

从 Forge Viewer 2.12 版本开始，其中就加入了 Extension 来支持 WebVR，所以本质上只需调用 viewer.loadExtension("Autodesk.Viewing.webVR") 即可。但是由于 WebVR 目前还并未成为 W3C 的标准，目前还处于实验阶段，所以只有一部分浏览器可以支持，详细可以参考 https://webvr.info 。

这里我们只谈Forge Viewer中的 WebVR支持，由于很多浏览器目前无法原生支持 WebVR，所以Forge Viewer也提供了 WebVR Polyfill 来支持，但是这个是从 viewer 的2.13版本开始，源代码中可以看到如下代码：

Autodesk.Viewing.Extensions.WebVR.VRExtension.prototype.load = function() {
    var self = this;
    var _vrDisplay = null;

    // check if browser supports webVR1.1 natively, if not, load polyfill
    avp.loadDependency('VRFrameData', 'webvr-polyfill.min.js', function() {
        navigator.getVRDisplays().then(function(displays) {
            if (displays.length > 0) {
                _vrDisplay = displays[0];
                if (_vrDisplay.capabilities.canPresent) {

                    // VR detected, add the 'VR button'
                    var viewer = self.viewer;
                    var toolbar = viewer.getToolbar(true);
                    var avu = Autodesk.Viewing.UI;

                    // Register tool
                    self.tool = new Autodesk.Viewing.Extensions.WebVR.VRTool(viewer, self, _vrDisplay);
                    viewer.toolController.registerTool(self.tool);
                    self.createUI(toolbar);

                    // Register listeners
                    self.onToolChanged = function(e) {
                        var vrToolActive = (e.toolName === 'vr') && e.active;
                        var state = vrToolActive ? avu.Button.State.ACTIVE : avu.Button.State.INACTIVE;
                        self.vrToolButton && self.vrToolButton.setState(state);
                    };
                    viewer.addEventListener(Autodesk.Viewing.TOOL_CHANGE_EVENT, self.onToolChanged);
                    return;
                }
            }
            avp.logger.warn('Attempted to load WebVR extension, but WebVR is not supported.');
        });
    });
    return true;
};