如何将来自github的现有扩展包含到我的主要index.html代码中？

Question

I am trying to implement an extension into my main code. 我正在尝试对我的主要代码实施扩展。 I tried to copy the code and make my own but this didnt work or the extension was not visualised, I dont have a clue. 我试图复制代码并制作自己的代码，但这没有用，或者扩展没有可视化，我没有任何线索。 This is the github page with the extension I would like to use: [link] ( https://github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/client/viewer.components/Viewer.Extensions.Dynamic/Viewing.Extension.IoT ) Thank you in advance! 这是我要使用扩展名的github页面：[link]（ 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>

Answer 1

You will need to build this extension before you can use it - see this repo here to build the extensions separately. 您需要先构建此扩展，然后才能使用它-请在此处查看此仓库以单独构建扩展。

But this extension is locked in with React so you will need to strip the React bits off before you can with your frameworkless plain old HTML. 但是此扩展已被React锁定，因此您需要先删除React位，然后才能使用无框架的普通旧HTML。

We are working on a revamp of both RCDB and Extension Library just to isolate the extensions from unnecessary dependencies like React - will come back to update this answer once that's done. 我们正在对RCDB和扩展库进行改进，只是为了将扩展与不必要的依赖（如React）隔离开来-完成后会回来更新此答案。

如何将来自github的现有扩展包含到我的主要index.html代码中？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-30 04:46:45

如何将来自github的现有扩展包含到我的主要index.html代码中？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-30 04:46:45

解决方案1
1 已采纳 2019-08-30 04:46:45