案例展示

创建坐标轴、删除坐标轴

<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
onMounted(() => {
    //初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            //场景
            background: {
                //背景颜色
                type: 'color',
                color: {
                    alpha: 1,
                    color: '#000000'
                }
            },
            ground: {
                //地面
                active: false
            }
        },
        helper: {
            // 坐标轴
            axes: {
                length: 10,
                active: true
            }
        }
    })
    show()
})

//显示
function show() {
    TO.helper.initAxes(10)
}

//删除
function hide() {
    TO.helper.removeAxes()
}
</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.initAxes

方法签名	返回值	描述
initAxes(len: number = 50)	void	创建坐标轴

参数说明：

参数名	说明	类型	必填	默认值
len	长度	number	-	50

helper.removeAxes

方法签名	返回值	描述
removeAxes()	void	删除坐标轴