zjbcool / verge-blocks

blocks for verge3d

verge-blocks

verge3d+vue3+vite模块化开发

示例

App.vue:

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

<script setup>
import {onMounted, onBeforeUnmount} from 'vue'
import {CONTAINER_ID, createApp, loadScene, onSceneReady} from 'verge-blocks'
import {config} from './config'

const containerId = CONTAINER_ID;
const url = '/gltf/Cube.gltf'
const initOptions = config();
let app = null;
onMounted(()=>{
  app = createApp(initOptions);
  loadScene(url)
});
onBeforeUnmount(()=>{
  if (app) {
    app.dispose();
    app = null;
  }
});
onSceneReady(()=>{
  ...
})
</script>

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

verge模块

_pGlob

全局变量。

CONTAINER_ID

用于挂载canvas元素的ID。

createApp()

用于创建verge3d应用实例。

loadScene(sceneURL)

用于加载.gltf场景。

参数：

• sceneURL - 要加载的.gltf地址

onSceneReady(callback)

场景加载完成时的钩子函数，在这个函数中执行从block模块或其它模块导入的函数。

dispatchEvent(event)

派发事件。

参数：

• event - object e.g {type:'animate', message:'1'}

addEventListener(type, handler)

添加事件侦听器。

参数：

• type - string 事件类型 e.g 'animate'
• handler - function 回调函数

blocks模块

功能类似拼图模块。在钩子函数中调用。略。

相关库

tweenjs

安装：

npm i @tweenjs/tween.js@^18

Tweakpane

安装：

// npm
const pane = new Pane();

nipplejs

安装

npm install nipplejs --save

colorPickr

安装

npm install @simonwep/pickr

// One of the following themes
import '@simonwep/pickr/dist/themes/classic.min.css';   // 'classic' theme
import '@simonwep/pickr/dist/themes/monolith.min.css';  // 'monolith' theme
import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme

// Modern or es5 bundle (pay attention to the note below!)
import Pickr from '@simonwep/pickr';
import Pickr from '@simonwep/pickr/dist/pickr.es5.min';