案例展示

在场景中导入外部模型

模型格式

支持 gltf、glb、fbx、obj、stl、json、zip、text、assemble 等格式。

<template>
    <div id="TO"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    //初始化场景
    let TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            //场景
            background: {
                //背景颜色
                type: 'color',
                color: {
                    alpha: 1,
                    color: '#000000'
                }
            },
            ground: {
                //地面
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 100
            }
        }
    })
    console.log(import.meta)

    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-' + new Date().getTime(), //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403' //模型地址
            },
            modelType: 'gltf', //模型类型
            position: {
                //位置
                x: 0,
                y: 0,
                z: 0
            },
            scale: {
                //缩放大小
                x: 1,
                y: 1,
                z: 1
            },
            rotation: {
                //旋转角度
                x: 0,
                y: 0,
                z: 0
            }
        })
        .then((model) => {
            //添加到场景中
            TO.scene.add(model)
        })
})
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}
</style>

API 介绍

model.loadModel

方法签名	返回值	描述
loadModel(modelInfo: modelInfoParams, useIndexedDB: boolean = true)	Promise<Object3D>	导入外部三维模型

参数说明：

参数名	说明	类型	必填	默认值
modelInfo	模型参数	modelInfoParams	-	-
useIndexedDB	使用indexedDB存储	boolean	-	true