Galacean Editor 项目导出功能可以将当前编辑器项目作为一个前端项目下载到本地。你可以在编辑器中配置项目导出的参数,如资产导出配置、渲染导出配置、物理导出配置等。基于这些配置,编辑器会生成出项目所需的代码、资产,生成对应的 package.json
,并最终打包成一个 zip 包供你下载。
资产导出配置可以用来控制导出的资源类型和质量等参数。在资产导出配置中,你可以选择导出的资源类型,例如模型、纹理、HDR 等等,以及选择每种类型的导出质量和格式等参数。在导出模型时,你可以选择是否导出模型的网格信息、骨骼信息、动画信息等。
配置 | 描述 |
---|---|
glTF Quantize | glTF 压缩算法,详见这里 |
glTF Meshopt | glTF 压缩算法,详见这里 |
纹理类型 | 勾选 KTX2 开启纹理压缩优化选项 |
纹理压缩格式 | 勾选 KTX2 后可见,不同压缩格式会影响纹理的尺寸和渲染质量 |
纹理压缩质量 | 勾选 KTX2 后可见,可以一定限度上调整纹理的尺寸和渲染质量 |
主场景 | 选择 资产面板 中的某个场景作为项目加载后的主场景 |
渲染导出配置可以用来控制项目的渲染效果和性能等参数。
配置 | 描述 |
---|---|
WebGL Mode | WebGL 的版本,Auto 值表示根据设备能力自动选择 WebGL 版本 |
WebGL Context 的配置 | Anti-Alias、Alpha、Preserve Drawing Buffer 等 |
Device Pixel Ratio | 设备的像素比,用来控制画布的尺寸 |
在点击导出面板中的下载按钮后,你将得到一个项目的压缩包。解压缩后进入文件夹,目录结构(以 React 项目为例)如下:
├── example # 📁 示例目录
│ ├── main.tsx # 示例组件
├── public # 📁 公共资源目录
│ ├── scene.json # 场景文件
│ └── ... # 其他
├── src # 📁 源代码目录
│ └── ... # 其他
├── index.tsx # ⚙️ 组件代码入口
├── index.html # ⚙️ 示例项目入口文件
├── project.json # ⚙️ 编辑器导出工程配置
|── tsconfig.json # ⚙️ TypeScript 配置文件
├── vite.config.ts # ⚙️ vite 配置文件
├── package.json # ⚙️ 项目配置文件
└── ... # 其他
接下来就可以在本地进行项目的调试与预览了,依次在文件夹目录里的 Terminal 中运行以下命令,看看本地效果是否与编辑器中的效果一致吧:
npm install
npm run dev
一切准备完毕后就将项目构建并部署上去吧,在文件夹目录里的 Terminal 中运行以下命令:
npm run build
可以发现,当 build
完毕后,文件目录(左上角)多出了一个 dist
文件夹,里面即包含了运行所需的所有代码与资源,接下来只需要将这个文件内的所有内容上传 CDN 即可。
随后访问对应地址:
导出项目为 vite 工程,更多部署方案参考 vite 官网
请参照 小程序项目