@cds.id/splat-viewer v3.8.6

@cds.id/splat-viewer

A React component and Web Component for viewing Gaussian Splats using Three.js. Built on top of @mkkellogg/gaussian-splats-3d.

Features

• 🎨 React Component and Web Component support
• 🔄 Animation support
• 📱 Responsive design
• 🛠️ Built with React and TypeScript
• 🎯 Lazy loading with Intersection Observer

Installation

npm install @cds.id/splat-viewer

Usage

As React Component

import { SplatViewer } from '@cds.id/splat-viewer';

function App() {
  return (
    <div style={{ width: '800px', height: '600px' }}>
      <SplatViewer src="https://example.com/your-splat.splat" isAnimate={true} />
    </div>
  );
}

As Web Component

First, register the web component:

import '@cds.id/splat-viewer/web-component';

Then use it in your HTML:

<div style="width: 800px; height: 600px;">
  <splat-viewer src="https://example.com/your-splat.splat" animate></splat-viewer>
</div>

Props/Attributes

Container Sizing

The component will adapt to its container size. Always wrap it in a container with defined dimensions:

// React
<div style={{ width: '90vw', height: '400px' }}>
  <SplatViewer src="path/to/splat.splat" />
</div>

<!-- Web Component -->
<div style="width: 90vw; height: 400px;">
  <splat-viewer src="path/to/splat.splat"></splat-viewer>
</div>

Development

1. Clone the repository:

git clone https://github.com/yourusername/splat-viewer.git

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build for npm:

npm run build:lib

Testing Locally

Test the package locally before publishing:

# In the package directory
npm run build:lib
npm link

# In your test project
npm link @cds.id/splat-viewer

Scripts

• npm run dev - Start development server
• npm run build:lib - Build for npm
• npm run clean - Clean build directory
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

Dependencies

Core:

• React
• React DOM
• @mkkellogg/gaussian-splats-3d

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Known Issues

• Type declarations might need manual refresh in some IDEs
• Web Component requires modern browser support

License

MIT License

Credits

Built with @mkkellogg/gaussian-splats-3d