建立View and Data – 3D模型

最新推荐文章于 2025-05-07 21:08:56 发布

转载最新推荐文章于 2025-05-07 21:08:56 发布 · 516 阅读

webgl 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用Autodesk提供的API实现3D模型在线展示的方法。通过创建HTML页面并引入必要的CSS和JS文件，可以成功展示3D模型。此外，还提供了一个具体的示例代码，演示如何使用JavaScript进行3D模型的加载与展示。

View and Data – 3D模型

(转自：blog.youkuaiyun.com/zzzh2088/article/details/64921162)

1、创建展示3D模型的容器，引入必要的css和js文件

<!DOCTYPE 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">
    </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.js"></script>
        <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.js"></script>
    </body>
</html>

2、编写扩展js，来展示自己的3D模型

var viewerApp;
// view对象
var viewer;
// 扩展对象
var extension;
var _mainViewerSubToolbar = null;
var controlGroup;
// 配置初始化选项
// 这里的accessToken和urn都是上传模型文件到官方服务器返回的
var options = {
        env: 'AutodeskProduction',
        getAccessToken: function (onGetAccessToken) {
            var accessToken = '0E5yQLZxN4rddupcbDydhcRa6auQ';
            var expireTimeSeconds = 60 * 30;
            onGetAccessToken(accessToken, expireTimeSeconds);
        }

    };
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGVzdGFuZG9zdGVjYXp6b2RpYXBpLWFydGh1cjQ1Ni9EaXNuZXltZXAucnZ0';

// 3D模型的初始化
Autodesk.Viewing.Initializer(options, function onInitialized() {
    var config = {
        extensions: ["Autodesk.Viewing.MarkupsCore","Autodesk.Viewing.MarkupRectangle"]
    };
    viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config);
    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

// 文档加载成功的回调
function onDocumentLoadSuccess(doc) {
    var viewables = viewerApp.bubble.search({'type': 'geometry'});
    if (viewables.length === 0) {
        return;
    }
    viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);
}

// 文档加载失败的回调
function onDocumentLoadFailure(viewerErrorCode) {
    // ...
}

// 模型加载成功的回调
function onItemLoadSuccess(viewer, item) {
    // ...
}

// 模型加载失败的回调
function onItemLoadFail(errorCode) {
    // ...
}