<template>
  <div ref="containerRef" class="middle3D"></div>
</template>

<script lang="ts" setup>
import ThreeHelper from "@/hooks/ThreeHelper";
import * as THREE from "three";

const containerRef = ref<HTMLDivElement>(null);

const threeHelper = new ThreeHelper();

onMounted(() => {
  threeHelper.creatRenderer(containerRef.value);

  threeHelper.loadFBX("/black_box.fbx", () => {
    threeHelper.scene.traverse((child) => {
      if (child instanceof THREE.Mesh) {
        console.log("traverse", child.material);
        if (child.material.length > 1) {
          child.material[0].color.set(0x00ff00);
          child.material[1].color.set(0x00ff00);
          child.material[2].color.set(0x00ff00);
          child.material[3].color.set(0x00ff00);
          threeHelper.resizeRender(containerRef.value);
        }
      }
    });
  });

  // threeHelper.addOutline();
});

window.addEventListener("resize", () => {
  threeHelper.resizeRender(containerRef.value);
  // threeHelper.addOutline();
});
</script>

<style lang="scss" scoped>
.middle3D {
  height: 29vh;
  width: 100%;
  padding: 0 !important;
  border: 2px solid red;
}
</style>
