<template>
  <!-- online_3d_viewer -->
  <div
    class="online_3d_viewer"
    :model="url"
    :backgroundcolor="backgroundcolor"
  ></div>
</template>

<script>
import * as ThreeEngine from "online-3d-viewer";
export default {
  props: {
    // 预览的3D文件的地址
    url: {
      type: String,
      default: "",
    },
    // 模型背景颜色
    backgroundcolor: {
      type: String,
      default: "0,0,0",
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化3D查看器
    init() {
      // tell the engine where to find the libs folder
      ThreeEngine.SetExternalLibLocation("libs");
      // init all viewers on the page
      ThreeEngine.Init3DViewerElements();
    },
  },
};
</script>

<style lang="scss" scoped>
.online_3d_viewer {
  width: 100%;
  height: 100%;
  min-height: 400px;
  min-width: 300px;
}
</style>
