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>
  <div id="J-Container"></div>
  <el-button @click="handleplay" type="primary">播放</el-button>
</template>

<script setup>
import { Player } from "@galacean/effects";
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 Player({ container, env: "PC" });
    player.value.loadScene(
      "https://file.jsopy.com/MOCK/GEJSON/test1/test1.json",
      {
        autoplay: false,
      }
    );
  });
};

const handleplay = () => {
  player.value.play();
};
</script>

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