Vue.js - 加载并展示3DGS高斯泼溅模型教程1（使用GaussianSplats3D库）

作者：hangge | 2026-05-30 09:56

随着三维重建与实时渲染技术的发展，3D Gaussian Splatting（3DGS，高斯泼溅）逐渐成为摄影测量与数字孪生领域的重要技术方向。相比传统三角网格模型，3DGS 以高斯点的形式表达真实场景，具有加载速度快、细节表现好、适合大场景展示等优势，广泛应用于实景扫描、设备巡检和数字孪生可视化等场景。

在 Web 端，我们可以借助社区开源的 GaussianSplats3D（Three.js 实现）来加载并展示 3D Gaussian Splatting（3DGS）场景，显著降低了实现成本，使其更容易融入现有前端工程。本文将演示在 Vue 项目中如何使用 GaussianSplats3D 库加载并展示 3DGS 高斯泼溅模型。

一、使用 GaussianSplats3D 库加载 3DGS 模型

1，GaussianSplats3D 库介绍

（1）GaussianSplats3D 是一个面向 Web 端的 3D Gaussian Splatting（3DGS）高性能渲染库。它基于浏览器原生能力，结合 WebGL / WebGPU、Web Worker 与 SharedArrayBuffer，实现了在网页中高效加载与实时渲染大规模 3DGS 模型的能力。

GitHub 主页：https://github.com/mkkellogg/GaussianSplats3D
官方在线演示：https://projects.markkellogg.org/threejs/demo_gaussian_splats_3d.php

（2）GaussianSplats3D 支持如下三种数据源格式：

.ply：3DGS 专用 PLY 格式数据，来自 3D Gaussian Splatting 训练结果。
.splat：二进制 splat 格式，官方推荐的高效格式。
.ksplat：.splat 的压缩版本，网络传输成本更低，加载速度更快。

（3）GaussianSplats3D 内部使用了 Three.js 的相机（Camera）、场景（Scene）、渲染循环（Render Loop），同时提供 Viewer / GaussianSplatMesh 等高级封装，可与 Three.js 现有对象混合使用（地面、标注、辅助线等）。

2，安装配置

（1）进入 Vue 项目目录后执行如下命令安装 GaussianSplats3D 库。

npm install @mkkellogg/gaussian-splats-3d

（2）我们将需要加载的 ply、splat 或者 ksplat 格式的 3DGS 文件放置项目的 public/models/3dgs 目录下。

（3）最后我们还需要开启“跨域隔离”crossOriginIsolated 环境。

提示：GaussianSplats3D 在加载和渲染 3DGS 时，使用了 Web Worker 在 Worker 和主线程之间传递 SharedArrayBuffer。而 SharedArrayBuffer 默认在浏览器中是被禁用的，只有当页面处于“跨域隔离（crossOriginIsolated）”状态时，浏览器才允许使用 SharedArrayBuffer。

如果是 Vite（Vue 3 / Vue 2 + Vite）项目，则在 vite.config.js 中添加如下相关代码：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
  preview: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
})

如果是 Vue CLI（webpack）项目，则在 vue.config.js 中添加如下相关代码：

module.exports = {
  devServer: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
}

如果是生产环境部署，则需要在 Nginx 配置文件中添加如下配置：

add_header Cross-Origin-Opener-Policy same-origin always;
add_header Cross-Origin-Embedder-Policy require-corp always;

3，样例代码

（1）下面代码我使用 GaussianSplats3D 加载并渲染一个 ply 格式的 3D Gaussian Splat 模型。

<template>
    <!--
      3DGS Viewer 的挂载容器,Viewer 会在这个 div 内部自动创建 <canvas> 并进行渲染
    -->
    <div ref="root" class="viewer-root"></div>
</template>

<script>
// 引入 Gaussian Splats 3D Viewer（用于渲染 3D Gaussian Splat 模型）
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d'

export default {
    name: 'GaussianSplatViewer',
    data() {
        return {
            // 3DGS Viewer 实例
            viewer: null,
        }
    },
    mounted() {
        // 初始化 3DGS Viewer
        this.init()
    },
    beforeDestroy() {
        if (this.viewer) {
            try {
                // 停止内部 requestAnimationFrame
                this.viewer.stop()
                // 释放内部 WebGL / GPU 资源（存在则调用）
                this.viewer.dispose?.()
            } catch (e) {
                console.warn('Viewer destroy error:', e)
            }
            this.viewer = null
        }
        // 兜底：清空容器，移除 canvas
        if (this.$refs.root) {
            this.$refs.root.innerHTML = ''
        }
    },
    methods: {
        /**
         * 初始化 GaussianSplats3D Viewer
         * Viewer 内部会：
         *  - 创建 WebGL Renderer
         *  - 创建 Camera 和 Controls
         *  - 创建 Canvas 并挂载到 rootElement
         */
        init() {
            // 创建 Viewer 实例
            const viewer = new GaussianSplats3D.Viewer({
                // 指定 Viewer 挂载的 DOM 容器（Vue ref）
                rootElement: this.$refs.root,
                // 相机“向上”方向（部分 3DGS 数据坐标系需要特殊设置）
                cameraUp: [0, -1, -0.6],
                // 初始相机位置（世界坐标）
                initialCameraPosition: [-1, -4, 6],
                // 初始相机观察目标点
                initialCameraLookAt: [0, 4, 0]
            });

            // 加载 3D Gaussian Splat 模型（.ply / .splat / .ksplat）
            viewer.addSplatScene('/models/3dgs/demo.ply', {
                // 剔除透明度过低的 splat（减少噪点、提升性能）
                splatAlphaRemovalThreshold: 5,
                // 显示内置加载进度 UI
                showLoadingUI: true,
                // 模型在世界坐标中的平移
                position: [0, 1, 0],
                // 模型旋转（四元数格式 [x, y, z, w]）
                rotation: [0, 0, 0, 1],
                // 模型缩放
                scale: [1.5, 1.5, 1.5]
            }).then(() => {
                // 模型加载完成后启动 Viewer 的内部渲染循环
                // Viewer 会自动调用 requestAnimationFrame
                viewer.start()
            })
            // 保存 viewer 实例，便于后续销毁或扩展
            this.viewer = viewer
        },
    }
}
</script>

<style scoped>
/* Viewer 根容器必须有明确尺寸，否则 canvas 无法显示 */
.viewer-root {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* 去除 canvas 默认 inline 行为，避免出现空白边距 */
canvas {
    display: block;
}
</style>

（2）页面加载后可以看到 3DGS 模型已经被加载并渲染出来了。

（3）按住鼠标左键拖动可以将视图绕点云旋转，使用滚轮可以缩放视图，按住右键拖动则可平移视角。

附：GaussianSplats3D 与 Spark 对比

1，技术对比

（1）GaussianSplats3D：

与 Three.js 关系方面，可以选择使用 Three.js 做场景管理，但核心渲染是自研 WebGL/WebGPU Shader，直接处理 GPU 数据。
性能方面，Web Worker + SharedArrayBuffer 做 CPU-GPU 异步，支持 WebGPU 加速。

（2）Spark：

与 Three.js 关系方面，完全依赖 Three.js，SplatMesh 是 Object3D，SparkRenderer 注入渲染循环和管线，所有渲染都走 Three.js renderer。
性能方面，主要依赖 GPU 渲染和 Three.js 的性能优化，内部也有 PackedSplats 内存布局优化，但没有直接使用 Web Worker 或 WebGPU。

2，使用建议

（1）GaussianSplats3D 更适合独立渲染大规模 splat、高性能优化。

（2）Spark 更适合工程集成、与普通 Mesh 混合、后处理和 UI 叠加