案例展示

自动生成货架

行数:

列数:

<template>
  <div id="TO"></div>
  <div>
    <p style="margin: 0!important;">
      <label for="rows">行数:</label>
      <input type="number" placeholder="请输入行数" id="rows"  v-model.number="rows" class="input-control">
    </p>
    <p style="margin: 0!important;">
      <label for="columns">列数:</label>
      <input type="number" placeholder="请输入列数" id="columns" v-model.number="columns" class="input-control">
    </p>
    <button id="updateShelf" class="button-control" @click="updateShelf">更新货架尺寸</button>
  </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'));

  initShelf(); // 初始化货架
});

const initShelf = () => {
  TO.model.initShelf({
    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: 180px;
  /* 从顶部向下移动10px */
  right: 10px;
  /* 从右侧向左移动10px */
  z-index: 10;
  padding: 10px;
  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<Object3DEventMap>>	自动生成货架

参数说明：

参数名	类型	是否必选	描述
modelInfo	modelInfoParams	否	模型参数