TvT.js
目录
主题颜色

单个插件

单个插件目录、配置与展示方式的说明，已同步 icegl-three-vue-tres 在 2026-09-30 的预览分类、“我的插件”与单插件模式更新。

目录结构分两部分

  • 静态资源：./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。以下以本地自建插件 mydemo 为例：

export default {
    name: 'mydemo',                  // 唯一标识，与插件目录名一致
    title: '我的演示插件',
    intro: '插件描述',
    version: '0.0.1',
    author: '作者',
    website: 'https://example.com',
    state: 'active',
    creatTime: '2026-09-30',          // 创建时间；字段名保持 creatTime
    updateTime: '2026-09-30',
    require: [],                     // 依赖的其他插件目录名
    tvtstore: 'LOCAL',               // 本地插件，自动进入“我的插件”
    preview: [
        {
            src: 'plugins/mydemo/preview/index.png',
            type: 'img',
            name: 'index',          // 对应 pages/index.vue
            title: '首页演示',
            disableFPSGraph: false,
            disableSrcBtn: false,
        },
    ],
}

preview.name 应与页面文件名对应。例如 pages/index.vue 的预览名为 index，路由为 /plugins/mydemo/index。页面也可放在一层子目录，如 pages/group/demo.vue，对应 /plugins/mydemo/group/demo，并通过 child 分组配置预览；不要继续增加页面目录层级。

require 列出实际依赖的其他插件，例如 require: ['UIdemo', 'industry4']。完整预览模式会检查依赖是否安装；单插件网站构建也用它决定保留哪些插件的静态资源。打包插件 ZIP 时不会自动包含这些依赖，详见插件管理。

预览分类与我的插件

完整预览页使用“内容类型 → 能力或行业”的目录，案例以卡片展示。常用内容类型有 block（基础能力）、scene（场景案例）、application（行业应用）、tool（创作与工程）。插件的源码目录、路由和静态资源路径不随内容分类迁移。

tvtstore 表示插件的分发属性；内容分类使用独立的 catalog 配置。LOCAL 本地插件自动进入左侧固定的“我的插件”，无需填写 catalog。它们也会在“全部内容”中优先展示，按 creatTime 倒序排列。卡片主标题显示插件 name，同时显示案例标题和“本地插件”标识。

其他内容可在插件级设置默认 catalog，或在每个 preview 中分别设置。例如地面组件案例：

catalog: { type: 'block', category: 'environment' },
preview: [
    {
        src: 'plugins/mydemo/preview/index.png',
        type: 'img',
        name: 'index',
        title: '地面组件演示',
        catalog: {
            type: 'block',
            category: 'environment',
            tags: ['地面', '反射'],
        },
    },
],
  • 分类字段逐级合并，preview.catalog 优先于 child 分组的 catalog，再优先于插件级 catalog。
  • 分类字典由社区后台接口提供，完整预览页会更新并缓存在浏览器中，离线时复用已缓存的字典。type 与 category 使用接口支持的键；缺少有效分类的非 LOCAL 内容进入“待分类”。
  • 线上同名插件可同步插件级与同名案例的 catalog 字段，以线上返回的同字段值为准；本地页面和资源路径仍按本地配置使用。
  • catalog.tags 参与搜索；可选的 sourceUrl、promptUrl、studioUrl 分别提供源码、Prompt、Studio 入口，填写有效地址后显示。源码入口同时受 disableSrcBtn 控制。
  • 新分类链接使用 #类型/分类，本地插件入口使用 #my-plugins；原有 #插件名 或 #basic子目录 链接仍会定位到对应来源的分类。

只要展示单个插件

只展示某个案例或插件时，可以选择以下两种方式。

1、普通dev，首页引用

# 开发自己的项目
yarn dev
yarn build

把对应插件的页面 .vue 文件引入 src/pages/index.vue，自行组织首页和业务路由。详情请阅读： 单个插件/案例在普通项目模式下的展示方法open in new window

2、单插件/案例的自动化处理

这种方式适用于一个插件包含多个案例页面，需要保留预览首页和自动生成的案例路由。

先修改 .env.predev.one，指定目标插件目录名：

FES_APP_PLUGINS=true
FES_APP_PREINDEX=true
FES_APP_PLSNAME='mydemo'

再检查 src/plugins/mydemo/config.js 中的 require，填写所有实际依赖的插件目录名，无依赖时使用空数组：

require: ['UIdemo', 'industry4'],

然后根据需要启动或构建：

# 只预览 mydemo 的案例与页面路由
yarn pre.dev.one

# 生成可部署的网站 dist
yarn pre.build.one

2026-09-30 更新后的单插件预览页：

  • 隐藏左侧“全部内容”“我的插件”和内容分类目录，直接展示当前插件的案例卡片。
  • 页标题优先显示插件 title，未设置时使用 name 或目标插件名，数量按“个案例”显示。
  • 保留搜索、状态筛选和黑白风格切换；清空筛选时可“查看全部案例”。
  • 不请求线上插件菜单与分类，不混入其他插件的预览卡片，也不要求先配置内容分类。

网站构建时，public/plugins 下仅复制目标插件与其 require 直接列出的依赖目录，public 下的公共资源仍会复制到 dist。依赖目录不会递归推导，需要一并列出实际使用的资源所属插件。这个过程不删除源项目中的资源，也不会把依赖插件的案例加入当前预览页。

网站构建与插件打包

yarn pre.build.one 生成可部署的网站 dist。如果要交付可安装的插件包，请使用 yarn plugin.marker package mydemo，输出为 pluginMaker/packages/mydemo.zip，详见插件管理。

本页目录