Vue 使用 GE

第一种方式引入外部 js

引入 js

找到 index.html，在 head 标签中引入 js

<script src="https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/dianyuanwang/GE/GE.js"></script>

使用

<template>
  <div id="J-Container"></div>
</template>

<script setup>
const player = ref(null);
onMounted(() => {
  init();
});

const init = () => {
  nextTick(() => {
    const container = document.getElementById("J-Container");
    container.style.height = "600px";
    container.style.width = "800px";
    container.style.backgroundColor = "red";
    container.style.margin = "0 auto";
    container.style.marginTop = "400px";
    player.value = new window.ge.Player({ container, env: "PC" });
    player.value.loadScene(
      "https://file.jsopy.com/MOCK/GEJSON/test1/test1.json"
    );
  });
};
</script>

<style lang="scss" scoped></style>

第二种 使用 npm 包

安装

npm i @galacean/effects -S

使用

• template

<template>
  <div class="demo1content">
    <el-button @click="handleplay" type="primary" class="buttonplay"
      >播放</el-button
    >
  </div>
  <!--动画遮罩层-->
  <div class="mask" v-show="maskVisible" @click="closemask">
    <div id="GE-Container"></div>
  </div>
  <!--动画遮罩层-->
</template>

<script setup>
// 引入动画需要的
import { useGe } from "./hooks/useGe.js";
const { init, handleplay, maskVisible, closemask } = useGe();
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
</style>

• hooks/useGe.js

// 引入控制器
import { Player } from "@galacean/effects";
export function useGe() {
  // 页面控制器
  const player = ref(null);
  // 初始化
  const init = () => {
    nextTick(() => {
      const container = document.getElementById("GE-Container");
      container.style.height = "800px";
      container.style.width = "800px";
      // container.style.backgroundColor = 'red';
      container.style.margin = "0 auto";
      container.style.marginTop = "400px";
      // 赋值动画容器
      player.value = new Player({ container, env: "PC" });
      player.value.loadScene("https://你的地址", {
        autoplay: false,
      });
    });
  };
  // 播放
  const handleplay = () => {
    maskVisible.value = true;

    player.value.play();
  };
  // 遮罩层
  const maskVisible = ref(false);
  // 关闭
  const closemask = () => {
    maskVisible.value = false;
    player.value.pause();
  };
  onMounted(() => {
    init();
    console.log("动画开始");
  });
  onUnmounted(() => {
    player.value.dispose(); // player销毁
    console.log("动画结束");
  });
  return {
    init,
    handleplay,
    player,
    maskVisible,
    closemask,
  };
}