my-project/src/APP.vue

<template>
  <div id="three-dom" style="width: 500px; height: 500px"></div>
</template>

<script setup>
import ThreeConduit from "./js/threeConduit";
import { onMounted } from "vue";
onMounted(() => {
  let data = initData();
  let three = new ThreeConduit(document.getElementById("three-dom"), data, 3);
  three.init();
});

function initData() {
  // 生成4组每组8个数据，每个数据在32上下浮动8整数
  var data = [];

  for (var i = 0; i < 7; i++) {
    var group = [];

    for (var j = 0; j < 8; j++) {
      var base = 32;
      var noise = Math.floor(Math.random() * 17) - 8; // 生成-8到8之间的随机整数
      var value = base + noise;
      group.push(value);
    }

    data.push(group);
  }
  return data;
}
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
body {
  margin: 0;
}
canvas {
  display: block;
}
</style>