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;
};