@heliguy-xyz/splat-viewer
v1.0.0-rc.41
Published
A standalone 3D Gaussian Splat viewer web component with multi-model support, transform system, fly camera, and scene configuration
Downloads
231
Readme
@heliguy-xyz/splat-viewer
A standalone 3D Gaussian Splat viewer web component with multi-model support, transform system, fly camera, and scene configuration. Framework-agnostic and works with vanilla JavaScript, React, Vue, Angular, and any other framework.
Installation
npm install @heliguy-xyz/splat-viewerQuick Start
Vanilla JavaScript / HTML
<!DOCTYPE html>
<html>
<head>
<script type="module" src="node_modules/@heliguy-xyz/splat-viewer/dist/splat-viewer.esm.js"></script>
</head>
<body>
<splat-viewer
src="path/to/model.splat"
width="800"
height="600"
auto-focus
></splat-viewer>
</body>
</html>React
import '@heliguy-xyz/splat-viewer';
import { useRef, useEffect } from 'react';
function App() {
const viewerRef = useRef(null);
useEffect(() => {
const viewer = viewerRef.current;
if (!viewer) return;
viewer.addEventListener('loaded', (e) => {
console.log('Model loaded:', e.detail);
});
}, []);
return (
<splat-viewer
ref={viewerRef}
src="/model.splat"
width="100%"
height="600px"
auto-focus
/>
);
}Features
- 🎨 Multi-Model Support - Load and manage multiple models in one scene
- 🎥 Dual Camera Modes - Orbit and fly camera controls
- 🔧 Transform System - Position, rotate, and scale models programmatically
- 📦 Multiple Formats - Support for PLY, SPLAT, and SOG files
- ⚡ High Performance - Optimized rendering with PlayCanvas
- 🎯 Selection Tools - Box and sphere selection for splats
- 🎨 Scene Configuration - Background, grid, FOV, and more
- 📱 Responsive - Works on desktop, tablet, and mobile
API
See the full API documentation for detailed information.
Development
This package is part of the @heliguy-xyz/splat-viewer monorepo.
# Build
npm run build
# Development server
npm run dev
# Type check
npm run type-checkLicense
MIT © Heliguy
Related Packages
- @heliguy-xyz/splat-viewer-react-ui - Full-featured React UI component