Skip to content

案例展示

在场景中导入外部模型

模型格式

支持 gltfglbfbxobjstljsonziptextassemble等格式。

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

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

onMounted(() => {
  let TO = new ThingOrigin(
    "fileModel",
    document.getElementById("TO")) /*  {helper:{grid:{active:false}}} */

  TO.model.initFileModel(
    {
      modelName: "fileModel-" + new Date().getTime(), //模型名称
      base: {
        modelUrl: `${import.meta.env.BASE_URL}models/abb.gltf`, //模型地址
      },
      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.scene);
  });

});


</script>

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

API 介绍

model.initFileModel

方法签名返回值描述
initFileModel(modelInfo?: modelInfoParams)Promise<Object3D<Object3DEventMap>>导入模型文件

参数说明:

参数名类型是否必选描述
modelInfomodelInfoParams模型参数