ThingOrigin.js

案例展示 ​

给模型加上包围盒

<template>
    <div style="position: relative;">
        <div id="TO"></div>

        <el-button type="primary" size="small" id="show" @click="show()">显示</el-button>
        <el-button type="primary" size="small" id="hide" @click="hide()">删除</el-button>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ElButton, ElInput, ElCard } from 'element-plus'
let TO = null, sphere = null;
onMounted(() => {
    //初始化场景
    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: 200
            }
        }
    });
    createSphere()
})

function createSphere() {
    //创建一个球体
    sphere = TO.model.initSphere({
        modelName: 'Sphere-1',
        position: {//位置
            x: 0,
            y: 5,
            z: 0,
        },
        scale:{ //缩放
            x: 4,
            y: 4,
            z: 4
        }
    });
    TO.scene.add(sphere);
    show();
}

//显示
function show() {
    TO.helper.initBox(sphere);
}

//删除
function hide() {
    TO.helper.removeBox("Sphere-1");
}


</script>

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

#show {
    position: absolute;
    top: 10px;
    right: 70px;
}

#hide {
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>

API 介绍 ​

helper.initBox ​

方法签名返回值描述
initBox(uuid: string)void给模型创建包围盒

参数说明：

参数名说明类型必填默认值
uuid模型uuidstring是-

helper.removeBox ​

方法签名返回值描述
removeBox(modelName?: string)void移除包围盒

参数说明：

参数名说明类型必填默认值
modelName模型名称string--