3dgs+gsbox+forge web 端渲染 3dgs

最近公众号刷到一个 3dgs 面向 threejs 的框架，做了个 web demo，虽然现在 3dgs 伪影有些严重，但 NeurlPS 2024 3dgs-enhancer 这一篇 或 CVPR 2025 的 这一篇 difix3d+ 估计开源后能解决不少伪影问题，就先把 threejs 相关的接好，方便后续开发

步骤：
1.3dgs 这个建议 直接 参考 中恩实验室，算是无脑跑通了，跑出来是一个这样的 ply 文件 

2.文件转换
gsbox 这个主要是做生成格式转换，用 3dgs 生成的 ply 文件可以通过这个工具，命令行转为 spz 文件

3.参照官网代码，把第 2 步生成的文件路径修改下即可

<style> body {margin: 0;} </style>
<script type="importmap">
  {
    "imports": {
      "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.module.js",
      "@forge-gfx/forge": "https://forge.dev/releases/forge/0.1.0/forge.module.js"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { SplatMesh } from "@forge-gfx/forge";

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement)

// 文件路径修改为自己的
  const splatURL = "./output.spz";
  const butterfly = new SplatMesh({ url: splatURL });
  butterfly.quaternion.set(1, 0, 0, 0);
  butterfly.position.set(0, 0, -3);
  scene.add(butterfly);

  renderer.setAnimationLoop(function animate(time) {
    renderer.render(scene, camera);
    butterfly.rotation.y += 0.01;
  });
</script>

4.实际效果

手动描述：按照 threejs 的方式旋转起来

这样之后就可以通过 threejs 操作 3dgs 了，最后希望 difix3d+ 和 3dgs-enhancer 早点开源 ~