cione-comp-lib/es/packages/co-model-viewer/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, reactive, computed, onMounted, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
import { ModelViewerElement } from "../../node_modules/_@google_model-viewer@3.0.2@@google/model-viewer/lib/model-viewer.mjs";
import Props from "./props.mjs";
import "./index3.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoModelViewer",
  props: Props,
  components: { ModelViewerElement },
  setup(props) {
    const element = ref();
    const state = reactive({});
    function clickFn() {
    }
    function hotspotBtnFn(item) {
      if (item.actionType === "none")
        return;
      if (item.actionType === "show")
        return item.elementShow = !item.elementShow;
      if (item.actionType === "scale") {
        const model = element.value;
        model.cameraTarget = item.dataTarget;
        model.cameraOrbit = item.dataOrbit;
        model.fieldOfVIew = item.fieldOfView;
        model.zoom(item.zoom);
      }
    }
    function changeHotspot() {
      const model = element.value;
      const list = props.data;
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        model.updateHotspot({ name: item.slot, position: item.position, normal: item.normal });
      }
    }
    function mounted() {
      const model = element.value;
      if (props.initData.orbit)
        model.cameraOrbit = props.initData.orbit;
      if (props.initData.target)
        model.initTarget = props.initData.target;
    }
    const mainContainerStyle_c = computed(() => {
      return {
        "background-color": props.mainContainerStyle.backgroundColor,
        "--width": `${props.mainContainerStyle.width}%`,
        "--height": `${props.mainContainerStyle.height}%`
      };
    });
    const btnStyle_c = computed(() => {
      return {
        "--size": `${props.btnStyle.size}px`,
        "--bgColor": props.btnStyle.backgroundColor
      };
    });
    const containerStyle_c = computed(() => {
      return {
        "--width": `${props.containerStyle.width}px`,
        "--bgColor": props.containerStyle.backgroundColor,
        "--color": props.containerStyle.color,
        "--fontSize": `${props.containerStyle.fontSize}px`,
        "--fontWeight": props.containerStyle.fontWeight,
        "--fontFamily": props.containerStyle.fontFamily
      };
    });
    onMounted(mounted);
    watch(
      () => props.data,
      changeHotspot
    );
    return {
      element,
      state,
      clickFn,
      hotspotBtnFn,
      mainContainerStyle_c,
      btnStyle_c,
      containerStyle_c,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = ["slot", "data-surface", "data-position", "data-normal", "data-orbit", "data-target", "onClick"];
const _hoisted_2 = ["textContent"];
const _hoisted_3 = ["src"];
const _hoisted_4 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_model_viewer = resolveComponent("model-viewer");
  return openBlock(), createElementBlock("div", {
    class: "co-model-viewer-main-container",
    style: normalizeStyle({ ..._ctx.mainContainerStyle_c })
  }, [
    createVNode(_component_model_viewer, {
      ref: "element",
      style: normalizeStyle([{ "width": "var(--width)", "height": "var(--height)" }, { ..._ctx.mainContainerStyle_c }]),
      src: _ctx.url,
      "environment-image": _ctx.envImage,
      "camera-controls": "",
      onClick: _ctx.clickFn
    }, {
      default: withCtx(() => [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
          return openBlock(), createElementBlock("button", {
            class: "hotspot",
            style: normalizeStyle({ ..._ctx.btnStyle_c }),
            slot: item.slot,
            "data-surface": item.surface,
            "data-position": item.position,
            "data-normal": item.normal,
            "data-orbit": item.dataOrbit,
            "data-target": item.dataTarget,
            "data-visibility-attribute": "visible",
            onClick: ($event) => _ctx.hotspotBtnFn(item)
          }, [
            item.type === "text" && item.data ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: "hotspot-annotation-text",
              style: normalizeStyle({ ..._ctx.containerStyle_c, display: item.elementShow ? "block" : "none" }),
              textContent: toDisplayString(item.data)
            }, null, 12, _hoisted_2)) : createCommentVNode("", true),
            item.type === "img" ? (openBlock(), createElementBlock("div", {
              key: 1,
              class: "hotspot-annotation-img",
              style: normalizeStyle({ ..._ctx.containerStyle_c, display: item.elementShow ? "block" : "none" })
            }, [
              item.data ? (openBlock(), createElementBlock("img", {
                key: 0,
                src: item.data
              }, null, 8, _hoisted_3)) : createCommentVNode("", true)
            ], 4)) : createCommentVNode("", true),
            item.type === "video" ? (openBlock(), createElementBlock("div", {
              key: 2,
              class: "hotspot-annotation-video",
              style: normalizeStyle({ ..._ctx.containerStyle_c, display: item.elementShow ? "block" : "none" })
            }, [
              item.data ? (openBlock(), createElementBlock("video", {
                key: 0,
                src: item.data,
                controls: ""
              }, null, 8, _hoisted_4)) : createCommentVNode("", true)
            ], 4)) : createCommentVNode("", true)
          ], 12, _hoisted_1);
        }), 256))
      ]),
      _: 1
    }, 8, ["style", "src", "environment-image", "onClick"])
  ], 4);
}
var CoModelViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CoModelViewer as default };