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",//模型类型
    }
  ).then((model) => {
    TO.scene.add(model.scene);//添加模型
    addMarker();//添加标记
  })

  function addMarker() {
    let markerInfo = {
      name: '', //标签列表的标签名称，可选
      modelName: 'fileModel-abb', //标签绑定的模型名称
      id: 'marker',//标签id
      type: 'text', //标签类型
      bg: 'bg1', //标签背景图片
      configs: { //标签配置项
        title: 'ABB机械臂',
        content: 'ABB 机械臂，高精度、强性能的工业好帮手',
        show: true,
        html: ''
      },
      markerName: '',// 标签名称
      position: { x: 0, y: 40, z: 0 },//标签位置
      base: {//标签基础信息
        offset: { x: 0, y: 15, z: 0 },
        ratio: 1.1,
        intervalY: 40,
      },
      width: 350,//标签元素宽度（px）
      height: 100, //标签元素高度（px）
      code: ``
    };
    //背景图片
    const imageUrl = `${import.meta.env.BASE_URL}img/materials/bg-1.png`;
    // 使用模板字符串创建html
    const innerHtml = `
      <div class="marker-text-title">
        ${markerInfo.configs.title || '无标题'}
      </div>
      <div class="marker-text-content">
        ${markerInfo.configs.content || '无内容'}
      </div>
    `;

    // 主HTML结构
    const mainHtml = `
      <div id="markerDiv" class="marker-container" 
          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>
    `;
    //找到fileModel-abb模型
    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 介绍 ​

marker.addMarker ​

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

参数说明：

参数名说明类型必填默认值
model模型对象Object3D | Group是-
htmlDOM元素内容（HTML字符串或DOM元素）string | HTMLElement是-
markerInfo标记信息参数markerInfoParam是-