案例展示

自动生成货架

行数:

列数:

<template>
    <div style="position: relative">
        <div id="TO"></div>
        <div>
            <el-form label-width="80px" size="small">
                <el-form-item label="行数:">
                    <el-input-number v-model="rows" />
                </el-form-item>
                <el-form-item label="列数:">
                    <el-input-number v-model="columns" />
                </el-form-item>
                <el-form-item label=" ">
                    <el-button @click="updateShelf" size="small" type="primary">更新货架尺寸</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElInput, ElCard, ElForm, ElFormItem, ElInputNumber } from 'element-plus'

const rows = ref(6) //行数
const columns = ref(4) //列数
let shelf
let TO

onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('shelfTest', document.getElementById('TO'), {
        scene: {
            //场景
            background: {
                //背景颜色
                type: 'color',
                color: {
                    alpha: 1,
                    color: '#aaaaaa'
                }
            },
            ground: {
                //地面
                active: false
            }
        },
        helper: {
            //辅助工具
            axes: {
                //坐标轴
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 200
            }
        }
    })
    // 初始化货架
    initShelf()
})

const initShelf = () => {
    //创建货架
    TO.model
        .initShelf({
            position: {
                x: -30,
                y: 0,
                z: 0
            },
            base: {
                rows: rows.value,
                columns: columns.value,
                height: 7.9,
                depth: 9,
                width: 9
            }
        })
        .then((shelfModel) => {
            console.log('🚀 ~ initShelf ~ shelfModel:', shelfModel)
            //移除旧的货架
            if (shelf) {
                TO.scene.remove(shelf)
            }
            //添加新的货架
            TO.scene.add(shelfModel)
            shelf = shelfModel // 更新货架引用
        })
        .catch((error) => {
            console.error(error)
        })
}
const updateShelf = () => {
    initShelf() // 更新货架
}
</script>

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

#TO + div {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.input-control {
    width: 150px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.button-control {
    width: 150px;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    color: white;
    background-color: cadetblue;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-control:hover {
    background-color: #a2c4c9;
}
</style>

API 介绍

model.initShelf

方法签名	返回值	描述
initShelf(modelInfo?: modelInfoParams)	Promise<Object3D>	创建货架

参数说明：

参数名	说明	类型	必填	默认值
modelInfo	模型参数	modelInfoParams	-	-