3D 系统
介绍 KinoViz 基于浏览器的 3D 系统 — 导入 GLB/GLTF 模型、摄像机与材质、灯光与 HDRI 环境、SVG 转 3D 挤出及 3D 动画。
概述
KinoViz 内置完整的 3D 场景系统，完全在浏览器中通过 WebGL 运行。你可以导入 GLB/GLTF 模型、控制材质、调整灯光、制作摄像机动画——无需离开编辑器。
3D 编辑器所有套餐（含 Free）均可使用。部分高级功能需要 Pro 套餐：
| 功能 | 所需套餐 |
|---|---|
| 3D 编辑器（基础 GLB/GLTF 导入、摄像机、材质） | 所有套餐 |
| SVG → 3D 挤出 | Pro+ |
| 3D 动画与摄像机运动关键帧 | Pro+ |
| 高级 3D 素材库 | Pro+ |
| 高级材质（金属/清漆/透射预设） | Pro+ |
| 高级环境（自定义 HDRI、地面平面） | Pro+ |
| 高级特效（Liquid Metal 着色器、GLSL 图层） | Pro+ |
导入 GLB / GLTF 模型
通过工具栏导入
- 点击左侧工具栏中的 添加 → 3D 模型。
- 在弹出对话框中点击 上传 GLB，从本地选择
.glb或.gltf文件。 - 模型上传至项目后将自动放置到画布上。
通过素材库导入
内置素材库提供精选的 GLB 模型合集。点击 添加 → 3D 模型 → 浏览素材库 即可搜索并直接导入模型。高级 3D 素材库需要 Pro+ 套餐。
文件大小限制
每次导入的文件大小上限取决于你的套餐：
| 套餐 | 单次导入最大文件大小 |
|---|---|
| Free | 10 MB |
| Pro | 100 MB |
| Studio | 1 GB |
3D 画布与视口
选中 3D 模型后，画布会切换为 3D 视口，其控制方式与 2D 画布相互独立。
视口控制
| 操作 | 控制方式 |
|---|---|
| 轨道旋转（旋转视角） | 左键拖拽 |
| 平移 | 右键拖拽，或 Shift + 左键拖拽 |
| 缩放 | 滚轮 |
| 重置视角 | 按 F（聚焦模型） |
| 重置为默认摄像机 | 在属性面板中点击 重置摄像机 |
以上操作只移动摄像机，不移动模型本身。
摄像机属性
摄像机设置位于 属性 → 摄像机。所有摄像机属性均可添加关键帧（Pro+）。
| 属性 | 范围 | 说明 |
|---|---|---|
| cameraDistance | 1 – 20 | 摄像机到模型的距离 |
| cameraOrbitX | –90° 至 90° | 垂直轨道角度 |
| cameraOrbitY | –360° 至 360°（支持多圈） | 水平轨道角度 |
| cameraZoom | 0.5 – 3 | 缩放倍率 |
| cameraFocalLength | 24 – 200 mm | 镜头焦距（越小越广角） |
摄像机预设
使用 3D 工具栏中的 视角 下拉菜单可快速切换预设角度：
- 正面、背面、左视、右视、顶视、底视、等轴测
材质与纹理
选中 3D 模型后，在右侧属性面板中展开 材质 部分。
材质属性
| 属性 | 范围 / 说明 |
|---|---|
| 基础色 | 纯色或纹理贴图（漫反射） |
| 金属度 | 0 = 非金属，1 = 完全金属 |
| 粗糙度 | 0 = 镜面光滑，1 = 完全哑光 |
| 清漆层 | 0 – 1，漆面/清漆涂层（Pro+） |
| 透射 | 玻璃/折射效果（Pro+） |
| envMapIntensity | 0 – 5，环境反射强度 |
| 法线贴图 | 表面细节纹理 |
| 自发光颜色 | 自发光效果 |
| 不透明度 | 整体透明度 |
高级材质预设（金属、清漆、透射）需要 Pro+ 套餐。
逐网格材质
GLB 模型可能包含多个材质（每个网格对应一个）。在材质部分的 网格 下拉菜单中选择对应网格，可对每个网格的材质进行独立编辑。
上传纹理
点击纹理槽（例如 基础色 → 上传）并选择 PNG 或 JPG 文件。支持的贴图类型：漫反射、法线、粗糙度、金属度。
灯光与环境
每个 3D 场景都包含默认的灯光设置。可在 属性 → 灯光 中进行自定义。
灯光类型
| 类型 | 说明 |
|---|---|
| 环境光 | 均匀补光，无阴影，无方向 |
| 平行光 | 平行光线（类似太阳光） |
| 点光源 | 从单点向四周辐射 |
| 聚光灯 | 锥形光束 |
环境（HDRI）
从下拉菜单中选择 环境，即可使用 HDRI 图像作为 360° 光源和背景。KinoViz 内置多款 HDRI 预设。自定义 HDRI 上传和地面平面控制需要 Pro+ 套餐。
SVG 转 3D 挤出
KinoViz 可将任意 SVG 路径或形状挤出为 3D 对象，需要 Pro+ 套餐。
- 在设计模式下选择形状、路径或文字元素。
- 右键单击 → 挤出为 3D。
- 在属性面板中设置 挤出深度（单位为场景单位）。
- 调整 倒角 设置以获得平滑边缘。
挤出后的 3D 对象支持所有标准材质和灯光控制。
3D 模型动画
3D 模型可在时间轴中制作动画。摄像机运动和 3D 动画关键帧需要 Pro+ 套餐。
可关键帧的摄像机属性
参见上方摄像机属性表——所有摄像机属性均可添加关键帧，以实现随时间变化的摄像机动画。
内置模型动画（GLTF）
如果你的 GLB 文件包含内嵌动画（从 Blender 等工具导出），这些动画会出现在属性面板的 动画片段 下拉菜单中。选择片段后可使用播放/暂停/停止控件预览，也可通过关键帧控制时间轴播放状态。
Liquid Metal 与 GLSL 特效
Liquid Metal 材质特效预设可为 3D 模型实时应用着色器，属于 高级特效 功能，需要 Pro+ 套餐。
GLSL 特效 元素类型（着色器容器）的高级预设同样需要 Pro+ 套餐。
性能优化建议
- 将多边形数量控制在 20 万以下，以保证流畅的预览性能。更高的多边形数仍然受支持，但可能降低视口帧率。
- 使用压缩纹理（漫反射用 JPG，仅在需要透明度时使用 PNG）。
- 场景内灯光数量应尽量少，以保证实时性能。
- 使用 正交 摄像机可获得平面的等轴测风格渲染效果。