gsplat.js
gsplat.jsはthree.jsと同様の機能に加え、3DガウススプラッティングもサポートしたオープンソースのJavaScriptライブラリです。基本的には3Dガウススプラッティングライブラリとして提供しているみたいです。
上記は動作サンプルの1つですが、メモリに問題なければ更にリアルな描写のサンプルがHugging Faceにあります。
3Dガウススプラッティングとは何か?については以下をご参照下さい。


3D Gaussian SplattingはNeRFをこえるかトレンドになるか?複数視点の画像から3D空間を再現する最新手法論文解説! - Qiita
...
流れとしては、gsplat.jsコンポーネントをインポート、.splat
ファイルを読み込み、レンダリングループ開始、という感じみたいです。
import * as SPLAT from "gsplat" ; const scene = new SPLAT.Scene(); const camera = new SPLAT.Camera(); const renderer = new SPLAT.WebGLRenderer(); const controls = new SPLAT.OrbitControls(camera, renderer.domElement); async function main() { const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat" ; await SPLAT.Loader.LoadAsync(url, scene, () => {}); const frame = () => { controls.update(); renderer.render(scene, camera); requestAnimationFrame(frame); }; requestAnimationFrame(frame); } main(); |
.ply
ファイルもサポートしているそうですが、.splat
の方が基本的には読み込みが早いみたいなのでコンバーター等を使って.splat
に変換すると良いとの事です。