javascript - 如何将 github 中已有的扩展包含到我的主 index.html 代码中?

标签 javascript json autodesk-forge

我正在尝试在我的主代码中实现扩展。我尝试复制代码并制作自己的代码,但这不起作用或者扩展没有可视化,我不知道。这是 github 页面,其中包含我想使用的扩展:[链接] ( https://github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/client/viewer.components/Viewer.Extensions.Dynamic/Viewing.Extension.IoT ) 提前谢谢您!

<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/modelderivative/v2/viewers/6.*/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/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>

    <!-- Developer JS -->
    <script>
        var viewerApp;
        var options = {
            env: 'AutodeskProduction',
            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 = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJSRmcyZEh1TXFkemVuSjl2eng2ZWFScnhYRDczZ2RMMSIsImV4cCI6MTU2NzA3MjIxNywic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImRhdGE6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6Y3JlYXRlIl0sImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9qd3RleHA2MCIsImp0aSI6Ill0Ykozb0hxWDhIbGJMS0p2UDVkWWhEVEhPeUx1TXVxQWo4cnZSOW5LR2FIZmY4YmkweVQ4N2UzVXZvd2g0TWIifQ.Rq7TsewQlXl0VnSfzaR0bw7Vxgh4EOSf9xD9jqfg0b4';
                var expireTimeSeconds = 60 * 30;
                onGetAccessToken(accessToken, expireTimeSeconds);
            }

        };
        let config3d = {
          extensions: ['Autodesk.InViewerSearch']
        }; 

        var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6amFuc3NlbnNfMjcwODIwMTkvSUZDJTIwU2NoZXBlbmRvbWxhYW4ucnZ0';
        Autodesk.Viewing.Initializer(options, function onInitialized(){
            viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
            viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config3d);
            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>

最佳答案

您需要先构建此扩展,然后才能使用它 - 请参阅此存储库 here单独构建扩展。

但是这个扩展被 React 锁定,所以你需要先去掉 React 部分,然后才能使用无框架的纯旧 HTML。

我们正在对 RCDB 和扩展库进行改进,只是为了将扩展与 React 等不必要的依赖项隔离开来 - 一旦完成,我们将回来更新这个答案。

关于javascript - 如何将 github 中已有的扩展包含到我的主 index.html 代码中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57711005/

相关文章:

javascript - 分别读取div中包含的输入值

javascript - 如何在 Autodesk Viewer 中设置性能和外观设置?

javascript - 如何格式化 casper.log 输出?

PHP 解码 JSON POST

javascript - 重选和递归选择器

c# - C# 中的 json 序列化和反序列化

autodesk-forge - 使用 Javascript 更改 Autodesk Forge 2D 图纸的背景颜色

pdf - Autodesk PDF Extension - 防止查询字符串覆盖中的页面

javascript - jQuery 阶梯滑出列表效果

javascript - 为 HTML 中的无效字段自定义文本