ThingOrigin.js

案例展示 ​

给模型添加2D元素

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

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

onMounted(() => {
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"))
   TO.model.initFileModel(
    {
      modelName: "fileModel-abb" ,
      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);
    addMarker();
  })

  function addMarker() { 
    let markerInfo ={
      name: '',
      modelName: '',
      id: '',
      type: 'text',
      bg: 'bg1',
      configs: {
        title: 'ABB机械臂',
        content: 'ABB 机械臂，高精度、强性能的工业好帮手'
      },
      markerName: '',
      position: {x: 0, y: 40, z: 0},
      base: {
          offset: {x: 0, y: 0, z: 0},
          ratio: 1.1,
          intervalY: 40,
      },
      width: 460,
      height: 180,
      code:``
    };
    //创建html
    const imageUrl = `${import.meta.env.BASE_URL}img/materials/bg-1.png`;

    let innerHtml = `<div class="marker-text-title" style="">`+markerInfo.configs.title+`</div>
                                <div class="marker-text-content">`+markerInfo.configs.content+`</div>`

    const mainHtml = `<div id="markerDiv" style="width:`+markerInfo.width+`px;height:`+markerInfo.height+`px;position:relative">`+
            `<img src="`+imageUrl+`" alt="" style="width: 100%">`+
    `<div class="marker-innerDiv">`+
            innerHtml+
            `</div></div>`
    //找到模型
    let model = TO.scene.getObjectByProperty('name', 'fileModel-abb');
    const marker = TO.marker.addMarker(model, mainHtml, {position: markerInfo.position, base: markerInfo.base});
  }
})
</script>

<style>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
.marker-innerDiv{
    position: absolute;
    left: 4%;
    right: 6%;
    top: 10%;
    bottom: 10%;
    width: 92%;
    height: 80%;
}
.marker-text-title{
    font-weight: bold;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 2px;
}

.marker-text-content{
    line-height: 25px;
    font-size: 14px;
    text-indent: 2em;
    letter-spacing: 1px;
}
</style>

API 介绍 ​

model.initMarker ​

方法签名返回值描述
addMarker(model: Object3D<Object3DEventMap> | Group<Object3DEventMap>, html: string | HTMLElement, markerInfo?: markerInfoParams)any (string)给模型添加2D元素

参数说明：

参数名类型是否必选描述
modelObject3D<Object3DEventMap> | Group<Object3DEventMap>是模型对象
htmlstring | HTMLElement是DOM元素内容（HTML字符串或DOM元素）
markerInfomarkerInfoParams否标记信息参数