带有基本应用示例的 WebVR 扩展答案

【问题标题】：WebVR Extension with Basic Application Example带有基本应用示例的 WebVR 扩展
【发布时间】：2017-05-23 09:31:08
【问题描述】：

我正在尝试将 WebVR 扩展与基本应用程序一起使用。下面的 html 不是 VR 中的 3D 模型，而是呈现 2D 模型。除了我调用 WebVR 扩展的地方，代码大部分都是样板文件。提前致谢！

<!DOCTYPE html>
<!-- vr.html -->
    <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">

    <!-- The Viewer CSS -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" type="text/css">

    <!-- Developer CSS -->
    <style>
        body {
            margin: 0;
        }
        #MyViewerDiv {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #F0F8FF;
        }
    </style>
</head>
<body>

    <!-- The Viewer will be instantiated here -->
    <div id="MyViewerDiv"></div>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.js"></script>
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>

    <!-- Developer JS -->
    <script>
        var viewerApp;
        var options = {
            env: 'AutodeskProduction',
            // Here is the WebVR extension
            extensions: ['Autodesk.Viewing.WebVR'],
            getAccessToken: function(onGetAccessToken) {
                //
                // TODO: Replace static access token string below with call to fetch new token from your backend
                // Both values are provided by Forge's Authentication (OAuth) API.
                //
                // Example Forge's Authentication (OAuth) API return value:
                // {
                //    "access_token": "<YOUR_APPLICATION_TOKEN>",
                //    "token_type": "Bearer",
                //    "expires_in": 86400
                // }
                //
                var accessToken = {{ accessToken }};
                var expireTimeSeconds = 60 * 30;
                onGetAccessToken(accessToken, expireTimeSeconds);
            }

        };
        var documentId = {{ documentID }};
        // var config = {
            // extensions: ['Autodesk.Viewing.WebVR'],
            // experimental: ['webVR_orbitModel']
        // };
        Autodesk.Viewing.Initializer(options, function(){
            viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
            viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
            viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
        });

        function onDocumentLoadSuccess(doc) {

            // We could still make use of Document.getSubItemsWithProperties()
            // However, when using a ViewingApplication, we have access to the **bubble** attribute,
            // which references the root node of a graph that wraps each object from the Manifest JSON.
            var viewables = viewerApp.bubble.search({'type':'geometry'});
            if (viewables.length === 0) {
                console.error('Document contains no viewables.');
                return;
            }

            // Choose any of the avialble viewables
            viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);
        }

        function onDocumentLoadFailure(viewerErrorCode) {
            console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
        }

        function onItemLoadSuccess(viewer, item) {
            console.log('onItemLoadSuccess()!');
            console.log(viewer);
            console.log(item);

            // Congratulations! The viewer is now ready to be used.
            console.log('Viewers are equal: ' + (viewer === viewerApp.getCurrentViewer()));
        }

        function onItemLoadFail(errorCode) {
            console.error('onItemLoadFail() - errorCode:' + errorCode);
        }

    </script>
  </body>
</html>

其中 {{ documentID }} 是我的骨灰盒，{{ accessToken }} 是我的令牌。

【问题讨论】：

你可以看看我同事写的博文：forge.autodesk.com/blog/add-webvr-support-viewer。正如钟所说，2D 模型的 VR 是一种不同寻常的期望！

标签： autodesk-forge autodesk-viewer

【解决方案1】：

首先，我认为 WebVR 扩展不适用于 2D 模型，我只是尝试使用 f2d 文件，但它不起作用，您对 VR 中的 2D 有什么期望？

我还建议你使用至少2.13的Viewer版本，如果你不指定任何版本的viewer，它会默认使用2.12，我试过了。如果您在https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.js?v=2.12 处查看 WebVR 扩展的查看器 2.12 代码，您会发现当您的浏览器本身不支持 WebVR 时，它不使用 webvr-polyfill。但是，从查看器 2.13 开始，添加了以下代码以支持 webvr-polyfill，这使您的浏览器支持 WebVR，即使它本身还不支持 WebVR。

// check if browser supports webVR1.1 natively, if not, load polyfill
avp.loadDependency('VRFrameData', 'webvr-polyfill.min.js', function() {})

最后，我在https://viewervr.herokuapp.com 有一个简单的 WebVR 运行示例，如果您想检查结果，只需加载“'Autodesk.Viewing.WebVR”扩展程序，如果您在移动设备上运行它，你会看到预期的结果。

希望对你有帮助。

【讨论】：

谢谢钟。我将查看您的示例应用程序并将最新版本号添加到我的代码中。需要明确的是，我并不是想在 VR 中查看 2D 模型（尽管这并非闻所未闻）。只是上面的代码只是把模型渲染成2D，没有切换到3D的能力。目前不知道为什么。
如果您的模型包含 3D 模型，您可以更改以下代码以选择 3D 查看器： // 选择任何可用的可视项 viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);