# 3dgs-threejs

**Repository Path**: guhunjun/3dgs-threejs

## Basic Information

- **Project Name**: 3dgs-threejs
- **Description**: threejs渲染3dgs模型的简单demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-13
- **Last Updated**: 2026-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Blender 中用 KIRI Engine 修剪 3DGS 模型 → 导出 PLY
用 SuperSplat 在线工具转换并优化 → 导出 SPLAT
在 Three.js 中用@lumaai/three库加载.splat 文件

![alt text](images/readme/截图.png)

参考资料
https://zhuanlan.zhihu.com/p/2031668794393890987

cdn坑太多，并且项目容量不小，使用nodejs的npm方案
GaussianSplats3D和Spark建议我用哪个?
大型场景，混合模型，使用spark

基于 Node.js 创建 Three.js 项目并使用 spark 库加载 3DGS 的 .splat 文件，你可以按照以下步骤进行：
初始化 Node.js 项目
创建一个新文件夹，进入该目录，并运行 npm init -y 生成 package.json 文件。
安装依赖
安装 Three.js 核心库以及 spark 库（通常包名为 @forge-gfx/forge 或相关 spark 包）。
配置开发环境
安装并配置 Vite 作为本地开发服务器和打包工具，并在 package.json 中配置启动脚本。
搭建基础 Three.js 场景
在代码中引入 Three.js，初始化场景（Scene）、相机（Camera）和 WebGL 渲染器（Renderer），并设置好基础的渲染循环。
引入 spark 库与 SplatMesh
在代码中引入 spark 库，并导入用于渲染 3DGS 模型的核心类 SplatMesh。
加载 .splat 模型文件
实例化 SplatMesh，传入 .splat 文件的路径或 URL 进行加载，并将其添加到 Three.js 的场景中。
启动与调试
运行本地开发服务器，在浏览器中查看渲染效果，并根据需要调整相机位置或模型缩放。

# 初始化项目
npm init -y
# 安装spark
npm install three @sparkjsdev/spark

npm install --save-dev vite


# 如果已经有项目如何运行

安装好nodejs环境
命令行进入项目目录
安装依赖包

npm install

运行代码

npm run dev