案例展示

自动生成货架

行数:

列数:

<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';

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

onMounted(() => {
  // 初始化场景
  TO = new ThingOrigin('shelfTest', document.getElementById('TO'),
    {
      helper: {
        axes: {
          active: false,
        }
      },
    }
  );
  // 初始化货架
  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 => {
      //移除旧的货架
      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	-	-