verge-blocks

Verge3D + vue3 + vite 模块化开发

安装

npm install verge-blocks

用法

App.vue:

<template>
  <div :id="containerId" class="v3d-container">
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { CONTAINER_ID, createApp, onAppRun } from 'verge-blocks'

const containerId = CONTAINER_ID;
const url = '/gltf/Cube.gltf';

let app = null;
onMounted(()=>{
  app = createApp(url, {
    useBkgTransp: true,
    preloader:{
      background:'#ffffff'
    }
  });
});
onBeforeUnmount(()=>{
  if (app) {
    app.dispose();
    app = null;
  }
});

onAppRun(()=>{
  // do something
});

</script>

<style>
@import "css/app.css";
</style>

blocks

_pGlob

全局变量。

CONTAINER_ID

用于挂载canvas元素的ID。

createApp(sceneURL, options)

用于创建verge3d应用实例。

参数：

• sceneURL - 必须，要加载的.gltf地址
• options - 可选，app初始化参数

onSceneLoaded(callback)

三维场景加载完成时的钩子函数。

onAppRun(callback)

app运行时的钩子函数，在场景加载完成之后。

onAppDispose(callback)

app被销毁时的钩子函数。