TvT.js
目录
主题颜色

单个插件

单个插件目录和文件的说明。

目录结构分两部分

  • 静态资源：./public/plugins/pluginA/*
  • 代码资源：./src/plugins/pluginA/*
`icegl-three-vue-tres`
├── **** 						// 项目其他文件，这里不做描述，详细说明见：[基础/项目目录]
├── public		
	├── plugins					// 插件内所依赖的静态资源
		├── pluginA				// 插件名为：pluginA的静态资源
			├── image			// 图片
			├── model			// 模型
			├── preview			// 菜单预览图
			└── *****			// 其他类型的资源

		└── pluginB				// 插件名为：pluginsB的静态资源
└── src		
    ├── **** 					// 项目其他文件，这里不做描述，详细说明见：[基础/项目目录]
	├── plugins					// 插件目录 -- 只在预览模式下自动包含的文件和路由，项目模式下则只包含所依赖的
		├── pluginA				// 插件名为：pluginA的代码文件
			├── common			// 插件通用js / ts类
			├── components		// 插件通用vue组件
			├── lib				// 插件使用的其他库函数
			├── shaders			// 插件使用的着色器文件
			├── stores			// 插件使用的状态管理类
			└── pages			// 插件通用页面 -- 在预览模式自动把此目录下所有vue文件加入到默认路由中
				└── index.vue	// 插件调试下的index.vue文件
			├── index.js		// 插件的暴露的组件
			└── config.js		// 插件的配置文件 描述见下个小节

		└── pluginB		// 插件名为：pluginsB的代码文件
		└── preview.vue // 预览模式下的首页vue文件

插件暴露组件 index.js

每个插件除了，有自己的应用场景，在各个pages目录下的路由展示外。还会暴露出来一些通用组件，供其他插件或者场景使用。具体如下：

// floor 案例目录中的index.js
import reflectorDiffuse from './components/reflectorDiffuse.vue'
import reflectorDUDV from './components/reflectorDUDV.vue'
import reflectorShaderMesh from './components/reflectorShaderMesh.vue'
import reflectorMipMap from './components/reflectorMipMap.vue'
import whiteFloorMesh from './components/whiteFloorMesh.vue'
import gridPlus from './components/gridPlusCom.vue'
import videoFloor from './components/videoFloor.vue'

export { reflectorDiffuse, reflectorDUDV, reflectorShaderMesh, reflectorMipMap, whiteFloorMesh, gridPlus, videoFloor }

//暴露出这么多种 地板组件。那么在别的插件或者场景中，如何使用呢？

// .src/plugins/simpleGIS/pages/streamLines.vue 文件中这样引用
<template>
    <TresCanvas clearColor="#201919" window-size>
        <Suspense>
            <reflectorDUDV :position="[0, -0.5, 0]"/>
        </Suspense>
    </TresCanvas>
</template>
<script setup lang="ts">
import { reflectorDUDV } from 'PLS/floor'

// `PLS` 我们这里做了简写 实际上就是`./src/plugins/`
</script>

插件配置 config.js

每个插件都包含了自己的描述文件config.js,具体如下：

export default {
	"name": "AAA",					// 插件的唯一标识 英文
	"title": "插件名",		 		// 插件的中文名称
	"intro": "插件描述",				// 插件的描述
	"version": "0.0.1",			// 插件的版本
	"author": "作者",				// 插件的作者
	"website": "www.xxx.com",		// 插件的网站
	"state": "active",				// 状态
	"creatTime": '2024-08-09',		// 创建时间
	"updateTime": '2024-08-10',	// 更新时间
	"require": ['resourceManager'],// 这里描述插件所以依赖得其他插件，启动时会进行依赖检查
	"tvtstore": 'FREE',			// 类型：FREE:免费、LISENCE:收费、LOCAL:本地自建(若无此项则为案例中心的)
	"preview": [					// 预览的菜单
		{ "src": "plugins/AAA/preview/a.png", "type": "img", "name": "a", "title": "名"
			"disableFPSGraph": false, 	// 是否禁用fps图示
			"disableSrcBtn": false, 	// 是否禁用源码跳转按钮
		 },
	]
}
本页目录