一套「由浅入深」的 WPS 演示（WPS PPT）插件开发开源工程，配套教学视频逐集讲解。五个示例从纯形状 API 一路做到网页/画布/摄像头/WebGL 实时元素，每一集都独立成目录、可单独安装运行。
环境基线：Windows + WPS Office（个人版 2021 之后 / 专业版），无需编译工具链。首次使用请先读 INSTALL.md。
| 序号 | 目录 | 一句话 | 学习要点 |
|---|---|---|---|
| 01 | 01_basic_shape | 插件创建一个矩形色块，颜色/透明度可调 | 工程骨架、功能区、任务窗格、Shapes.AddShape 与 Fill 填充 |
| 02 | 02_canvas_draw | 幻灯片里的实时画布元素：任意绘制，换色/粗细/橡皮，可保存 PNG | AddWebShapeEx 网页形状、HTML5 Canvas、事件与保存 |
| 03 | 03_camera_element | 摄像头画面作为幻灯片元素显示，可设名称/宽高/重启 | getUserMedia、元素属性（Name/几何）与“重启=重建”思想 |
| 04 | 04_webgl_3d | 基于 WebGL 的 3D 元素：旋转立方体 + 三维曲线动画 | WebGL 基础管线、顶点缓冲、MVP 矩阵、rAF 动画 |
| 05 | 05_web_content | 把任意网页作为元素插入幻灯片，可交互、可调透明度 | 综合示例：远端/本地网页、尺寸预设、透明探测、异常处理 |
建议观看/学习顺序就是 01 → 05。01、02 的 addin 目录结构完全一致，后面的示例都在同一套骨架上做加法。
# 1) 安装 Node（可选）后，给示例元素页起本地服务（02/03/04/05 需要）
node tools/serve.js 8011 .\02_canvas_draw\element
# 2) 把某个示例安装进 WPS（会合并注册并复制到 jsaddons）
.\tools\install.ps1 -Demo 01_basic_shape
# 02 → -Demo 02_canvas_draw；03 → 03_camera_element；04 → 04_webgl_3d；05 → 05_web_content
# 3) 完全重启 WPS，打开任意 .pptx，点击功能区出现的示例标签即可详细步骤见 INSTALL.md。
ppt_plugin_tutorials/
├── INSTALL.md # 从零安装：软件下载 + 装进 WPS（必读）
├── tools/
│ ├── install.ps1 # 一键安装某个示例到 WPS
│ └── serve.js # 本地静态服务器（网页类元素页使用）
├── 01_basic_shape/
│ ├── README.md
│ └── addin/ # WPS 插件包：publish.xml + BASIC_RECT_1.0/
├── 02_canvas_draw/
│ ├── README.md
│ ├── addin/CANVAS_DRAW_1.0/ # 插件（任务窗格：插入画布元素）
│ └── element/canvas.html # 画布元素本体（在幻灯片里运行）
├── 03_camera_element/
│ ├── README.md
│ ├── addin/CAMERA_ELM_1.0/
│ └── element/camera.html # 摄像头元素本体
├── 04_webgl_3d/
│ ├── README.md
│ ├── addin/WEBGL_3D_1.0/
│ └── element/3d.html # WebGL 3D 元素本体
└── 05_web_content/
├── README.md
├── addin/WEB_CONTENT_1.0/ # 综合示例（迁移自 wps_html 工程）
└── element/dashboard.html # 可交互示例网页
每个 addin 内的插件包结构完全一致，是所有案例的统一骨架：
ribbon.xml（功能区） +js/main.js（按钮回调，打开任务窗格） +index_TaskPane.html（任务窗格 UI） +js/core.js（与宿主无关的核心逻辑） +js/host.js（宿主探测） +js/taskpane.js（窗格交互）。
- 插件壳 vs 元素内容：插件（任务窗格）负责“在哪页、多大、插入什么”，元素内容（
element/*.html）负责“长什么样、怎么交互”。02~04 演示的都是同一模式：把自建网页作为元素插进幻灯片。 - WPS 网页形状：较新版本 WPS 提供
Shapes.AddWebShapeEx(url)/AddWebShape(url)，用自带内核渲染页面，放映时可交互。它是 02~05 的载体；01 则演示更传统的AddShape自选图形。
MIT，可自由用于教学/商业（见 LICENSE）。