建立View and Data – 3D模型

View and Data – 3D模型

(转自:blog.csdn.net/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) {
    // ...
}这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp是一个基于Vue.js的跨平台应用开发框架,它支持使用WebGL技术在不同平台上渲染3D模型。要实现在UniApp中展示3D模型,你可以遵循以下步骤: 1. **安装依赖**: 首先,在UniApp项目中安装Three.js库,这是一个流行的JavaScript库,用于处理3D图形。在`main.js`或项目的配置文件中添加Three.js的引入和使用: ```javascript import Vue from 'vue'; import * as THREE from 'three'; // 引入Three.js Vue.prototype.$THREE = THREE; ``` 2. **创建3D场景**: 创建一个新的组件,如`My3DModel.vue`,并在其中初始化Three.js的场景、相机和渲染器: ```javascript <template> <view class="container"> <canvas ref="canvas"></canvas> </view> </template> <script> export default { data() { return { scene: null, camera: null, renderer: null, mesh: null, }; }, mounted() { this.createScene(); }, methods: { createScene() { // 初始化场景、相机和渲染器 this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas }); this.renderer.setSize(window.innerWidth, window.innerHeight); // 加载3D模型(如.obj或.gltf) const loader = new THREE.GLTFLoader(); loader.load('path/to/your/model.gltf', (gltf) => { this.mesh = gltf.scene.children; this.scene.add(this.mesh); }); }, }, }; </script> ``` 3. **动画和交互**: 根据需求添加动画、事件监听等,例如旋转、缩放或鼠标交互。 4. **性能优化**: 如果模型比较大,考虑使用LOD(Level of Detail)技术或纹理压缩来优化性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值