ThingOrigin.js

案例展示 ​

给模型添加2D元素

标题:
内容:
显示:
<template>
    <div style="position: relative">
        <div id="TO"></div>
        <el-form id="formMarker" ref="formRef" :model="form" label-width="40px">
            <el-form-item label="标题:">
                <el-input v-model="form.title" size="small" />
            </el-form-item>
            <el-form-item label="内容:">
                <el-input type="textarea" v-model="form.content" size="small" />
            </el-form-item>
            <el-form-item label="显示:">
                <el-switch v-model="form.visible" size="small"></el-switch>
            </el-form-item>
            <div style="display: flex; justify-content: center">
                <el-button type="primary" size="small" @click="updateMarker">确定</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElButton, ElInput, ElForm, ElFormItem, ElSwitch } from 'element-plus'
import { merge } from 'lodash-es'
// @ts-ignore
declare const ThingOrigin: any

const form = ref({
    title: 'ABB机械臂',
    content: 'ABB 机械臂，高精度、强性能的工业好帮手',
    visible: true
})
const formRef = ref()
let TO: any = null
let model = null
let markerInfo = {
    name: '', //标签列表的标签名称，可选
    modelName: 'marker-abb', //标签绑定的模型名称
    id: 'marker', //标签id
    type: 'text', //标签类型
    bg: 'bg1', //标签背景图片
    configs: {
        //标签配置项
        title: form.value.title,
        content: form.value.content,
        visible: form.value.visible,
        html: ''
    },
    markerName: '', // 标签名称
    position: { x: 0, y: 40, z: 0 }, //标签位置
    base: {
        //标签基础信息
        relative: 'model', //标签相对于模型的位置
        offset: { x: 0, y: 15, z: 0 }, //标签相对于模型的偏移量
        ratio: 1.1, //标签相对于模型的比例
        intervalY: 40 //标签之间的间隔距离
    },
    width: 350, //标签元素宽度（px）
    height: 100 //标签元素高度（px）
}

onMounted(() => {
    //初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        camera: {
            lookAt: {
                x: 25.62454680418967,
                y: -2.3106037456621856,
                z: -66.99965038950995
            },
            position: {
                x: 41.87976418982612,
                y: 78.50564268979477,
                z: 117.31701183506453
            }
        }
    })
    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-abb', //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403' //模型地址
            },
            modelType: 'gltf' //模型类型
        })
        .then((model) => {
            TO.scene.add(model) //添加模型
            addMarker() //添加标记
        })

    function addMarker() {
        //创建HTML
        let htmlContent = createHTML(markerInfo)

        //找到fileModel-abb模型
        model = TO.scene.getObjectByProperty('name', 'fileModel-abb')
        //添加标签
        const marker = TO.marker.addMarker(model, htmlContent, markerInfo)
        //获取标签名称
        markerInfo.markerName = marker.name
    }
})
//创建HTML
function createHTML(markerInfo) {
    //背景图片
    const imageUrl = 'https://124.70.30.193:8443/image/load/10'
    // 使用模板字符串创建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>
    `
    return mainHtml
}

//更新标记
function updateMarker() {
    //创建HTML
    let newMarkerInfo = merge(markerInfo, {
        configs: {
            //标签配置项
            title: form.value.title,
            content: form.value.content,
            visible: form.value.visible,
            html: ''
        }
    })
    let htmlContent = createHTML(newMarkerInfo)
    TO.marker.setMarkerInfo(model.name, newMarkerInfo, htmlContent)
}
</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>
<style scoped>
#formMarker {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 260px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 12px;
}

#formMarker :deep(.el-form-item__label) {
    color: #fff !important;
    font-size: 12px;
}
</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是-