@heliguy-xyz/splat-viewer 1.0.0-rc.27 → 1.0.0-rc.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -336
- package/package.json +5 -12
- package/CHANGELOG.md +0 -78
package/README.md
CHANGED
|
@@ -1,382 +1,98 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @heliguy-xyz/splat-viewer
|
|
2
2
|
|
|
3
|
-
A
|
|
4
|
-
rendering of point cloud data. Framework-agnostic and embeddable in any web application with zero
|
|
5
|
-
external dependencies.
|
|
3
|
+
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.
|
|
6
4
|
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
- 🎯 **Gaussian Splat Rendering**: Native support for `.splat` files using PlayCanvas
|
|
10
|
-
- 📊 **PLY Support**: Traditional point cloud rendering for `.ply` and `.ply.compressed` formats
|
|
11
|
-
- 📦 **SOG Support**: Native support for `.sog` (Spatially Ordered Gaussians) files
|
|
12
|
-
- 🎮 **Interactive Controls**: Smooth camera navigation and manipulation
|
|
13
|
-
- 🧭 **Navigation Cube**: Interactive 3D cube for quick camera orientation control
|
|
14
|
-
- 📈 **Performance Monitoring**: Real-time rendering statistics
|
|
15
|
-
- ⚡ **High Performance**: WebGL2-powered rendering with PlayCanvas engine
|
|
16
|
-
- 📱 **Responsive Design**: Full-screen immersive viewing experience
|
|
17
|
-
- 🔧 **Self-Contained**: Single file with bundled PlayCanvas engine (2MB)
|
|
18
|
-
- 🎨 **Built-in Loading**: Professional loading spinner with orange/black theme
|
|
19
|
-
- 🚀 **Zero Dependencies**: No external scripts required
|
|
20
|
-
|
|
21
|
-
### Enhanced Features (v1.0.0)
|
|
22
|
-
|
|
23
|
-
- 🎭 **Multi-Model Support**: Load and manage multiple models in the same scene
|
|
24
|
-
- 🔄 **Transform System**: Programmatically position, rotate, and scale models
|
|
25
|
-
- 🎥 **Fly Camera Mode**: First-person WASD + mouse-look navigation with configurable controls
|
|
26
|
-
- 🎨 **Scene Configuration**: Adjust FOV and background color with smooth animations
|
|
27
|
-
- 👁️ **Preview Mode**: Disable camera controls for product previews with programmatic rotation
|
|
28
|
-
- 📡 **Comprehensive Events**: React to model lifecycle, transforms, camera changes, and more
|
|
29
|
-
- 📘 **TypeScript Support**: Full type definitions for all APIs
|
|
30
|
-
|
|
31
|
-
## Quick Start
|
|
32
|
-
|
|
33
|
-
### Installation
|
|
34
|
-
|
|
35
|
-
#### Via npm (Recommended)
|
|
5
|
+
## Installation
|
|
36
6
|
|
|
37
7
|
```bash
|
|
38
|
-
npm install @heliguy/
|
|
8
|
+
npm install @heliguy-xyz/splat-viewer
|
|
39
9
|
```
|
|
40
10
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
```html
|
|
44
|
-
<!-- UMD Bundle -->
|
|
45
|
-
<script src="https://unpkg.com/@heliguy/web-viewer@1.0.0/dist/web-component/splat-viewer.min.js"></script>
|
|
46
|
-
|
|
47
|
-
<!-- ESM Bundle -->
|
|
48
|
-
<script type="module">
|
|
49
|
-
import '@heliguy/web-viewer/esm'
|
|
50
|
-
</script>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### Prerequisites
|
|
54
|
-
|
|
55
|
-
- Modern browser with WebGL2 support
|
|
56
|
-
- Node.js ≥18.0.0 (for development only)
|
|
57
|
-
|
|
58
|
-
### Usage
|
|
11
|
+
## Quick Start
|
|
59
12
|
|
|
60
|
-
|
|
13
|
+
### Vanilla JavaScript / HTML
|
|
61
14
|
|
|
62
15
|
```html
|
|
63
16
|
<!DOCTYPE html>
|
|
64
17
|
<html>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<!-- Import from npm package -->
|
|
78
|
-
<script src="node_modules/@heliguy/web-viewer/dist/web-component/splat-viewer.min.js"></script>
|
|
79
|
-
|
|
80
|
-
<script>
|
|
81
|
-
const viewer = document.getElementById('viewer')
|
|
82
|
-
viewer.addEventListener('ready', () => {
|
|
83
|
-
viewer.load('path/to/model.splat')
|
|
84
|
-
})
|
|
85
|
-
</script>
|
|
86
|
-
</body>
|
|
18
|
+
<head>
|
|
19
|
+
<script type="module" src="node_modules/@heliguy-xyz/splat-viewer/dist/splat-viewer.esm.js"></script>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<splat-viewer
|
|
23
|
+
src="path/to/model.splat"
|
|
24
|
+
width="800"
|
|
25
|
+
height="600"
|
|
26
|
+
auto-focus
|
|
27
|
+
></splat-viewer>
|
|
28
|
+
</body>
|
|
87
29
|
</html>
|
|
88
30
|
```
|
|
89
31
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
Use the provided `viewer.html` page that reads query parameters and configures the web component.
|
|
93
|
-
Host `viewer.html` alongside `dist/web-component/splat-viewer.min.js`.
|
|
94
|
-
|
|
95
|
-
Supported query params:
|
|
96
|
-
|
|
97
|
-
- `src` (required): URL to your model (encode it!)
|
|
98
|
-
- `width` (optional): CSS width (e.g. `100%`, `800px`)
|
|
99
|
-
- `height` (optional): CSS height (e.g. `100vh`, `600px`)
|
|
100
|
-
- `autoFocus` (optional): `true` | `false` (default: `true`)
|
|
101
|
-
- `stats` (optional): `true` | `false`
|
|
102
|
-
|
|
103
|
-
Example:
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
<iframe
|
|
107
|
-
src="https://your-domain.com/viewer.html?src=https%3A%2F%2Fcdn.yourdomain.com%2Fmodels%2FRyhope.ply&width=100%25&height=100vh&autoFocus=true"
|
|
108
|
-
width="100%"
|
|
109
|
-
height="600"
|
|
110
|
-
style="border:0; background:#000"
|
|
111
|
-
allowfullscreen
|
|
112
|
-
></iframe>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
Notes:
|
|
116
|
-
|
|
117
|
-
- Ensure CORS allows the viewer origin to fetch the model (`Access-Control-Allow-Origin`).
|
|
118
|
-
- Prefer hosting `viewer.html`, the bundle, and models on the same domain to avoid CORS.
|
|
119
|
-
- URL-encode the `src` value.
|
|
120
|
-
|
|
121
|
-
#### React / Next.js
|
|
32
|
+
### React
|
|
122
33
|
|
|
123
34
|
```tsx
|
|
124
|
-
import
|
|
125
|
-
import '
|
|
35
|
+
import '@heliguy-xyz/splat-viewer';
|
|
36
|
+
import { useRef, useEffect } from 'react';
|
|
126
37
|
|
|
127
38
|
function App() {
|
|
128
|
-
const viewerRef = useRef
|
|
39
|
+
const viewerRef = useRef(null);
|
|
129
40
|
|
|
130
41
|
useEffect(() => {
|
|
131
|
-
const viewer = viewerRef.current
|
|
132
|
-
if (!viewer) return
|
|
42
|
+
const viewer = viewerRef.current;
|
|
43
|
+
if (!viewer) return;
|
|
133
44
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
viewer.addEventListener('ready', handleReady)
|
|
139
|
-
return () => viewer.removeEventListener('ready', handleReady)
|
|
140
|
-
}, [])
|
|
45
|
+
viewer.addEventListener('loaded', (e) => {
|
|
46
|
+
console.log('Model loaded:', e.detail);
|
|
47
|
+
});
|
|
48
|
+
}, []);
|
|
141
49
|
|
|
142
50
|
return (
|
|
143
51
|
<splat-viewer
|
|
144
52
|
ref={viewerRef}
|
|
53
|
+
src="/model.splat"
|
|
145
54
|
width="100%"
|
|
146
55
|
height="600px"
|
|
147
56
|
auto-focus
|
|
148
57
|
/>
|
|
149
|
-
)
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
**TypeScript:** Add to your `global.d.ts`:
|
|
154
|
-
```typescript
|
|
155
|
-
declare namespace JSX {
|
|
156
|
-
interface IntrinsicElements {
|
|
157
|
-
'splat-viewer': React.DetailedHTMLProps<
|
|
158
|
-
React.HTMLAttributes<HTMLElement> & {
|
|
159
|
-
ref?: React.Ref<any>
|
|
160
|
-
src?: string
|
|
161
|
-
width?: string
|
|
162
|
-
height?: string
|
|
163
|
-
'auto-focus'?: boolean
|
|
164
|
-
'enable-stats'?: boolean
|
|
165
|
-
'preview-mode'?: boolean
|
|
166
|
-
},
|
|
167
|
-
HTMLElement
|
|
168
|
-
>
|
|
169
|
-
}
|
|
58
|
+
);
|
|
170
59
|
}
|
|
171
60
|
```
|
|
172
61
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
```vue
|
|
176
|
-
<template>
|
|
177
|
-
<splat-viewer
|
|
178
|
-
ref="viewerRef"
|
|
179
|
-
width="100%"
|
|
180
|
-
height="600px"
|
|
181
|
-
auto-focus
|
|
182
|
-
/>
|
|
183
|
-
</template>
|
|
184
|
-
|
|
185
|
-
<script setup>
|
|
186
|
-
import { ref, onMounted } from 'vue'
|
|
187
|
-
import '@heliguy/web-viewer'
|
|
188
|
-
|
|
189
|
-
const viewerRef = ref(null)
|
|
190
|
-
|
|
191
|
-
onMounted(() => {
|
|
192
|
-
const viewer = viewerRef.value
|
|
193
|
-
const handleReady = () => {
|
|
194
|
-
viewer.load('/models/scene.splat')
|
|
195
|
-
}
|
|
196
|
-
viewer.addEventListener('ready', handleReady)
|
|
197
|
-
})
|
|
198
|
-
</script>
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## Commands
|
|
202
|
-
|
|
203
|
-
| Command | Description |
|
|
204
|
-
| ----------------------------- | ---------------------------------- |
|
|
205
|
-
| `npm run web-component:serve` | Start development server |
|
|
206
|
-
| `npm run web-component:build` | Build self-contained web component |
|
|
207
|
-
| `npm run web-component:clean` | Clean build artifacts |
|
|
208
|
-
| `npm run lint` | Check code quality with ESLint |
|
|
209
|
-
| `npm run lint:fix` | Fix linting issues automatically |
|
|
210
|
-
| `npm run format` | Format code with Prettier |
|
|
211
|
-
| `npm run format:check` | Check code formatting |
|
|
212
|
-
|
|
213
|
-
## Web Component API
|
|
214
|
-
|
|
215
|
-
### Attributes
|
|
216
|
-
|
|
217
|
-
#### Basic Configuration
|
|
218
|
-
|
|
219
|
-
- `src` - Model file path or URL
|
|
220
|
-
- `width` - Canvas width (default: "100%")
|
|
221
|
-
- `height` - Canvas height (default: "400px")
|
|
222
|
-
- `auto-focus` - Auto-focus on load (default: true)
|
|
223
|
-
- `enable-stats` - Show performance stats (default: false)
|
|
224
|
-
- `max-splats` - Maximum splat count (default: 2000000)
|
|
225
|
-
- `preview-mode` - Disable camera controls for preview use (default: false)
|
|
226
|
-
|
|
227
|
-
#### Camera Controls
|
|
228
|
-
|
|
229
|
-
- `orbit-sensitivity` - Mouse orbit sensitivity (default: 0.3)
|
|
230
|
-
- `pan-sensitivity` - Mouse pan sensitivity (default: 0.5)
|
|
231
|
-
- `zoom-sensitivity` - Mouse zoom sensitivity (default: 0.1)
|
|
232
|
-
- `min-distance` - Minimum camera distance (default: 1)
|
|
233
|
-
- `max-distance` - Maximum camera distance (default: 100)
|
|
234
|
-
|
|
235
|
-
#### Navigation Cube
|
|
236
|
-
|
|
237
|
-
- `enable-navigation-cube` - Show interactive navigation cube (default: false)
|
|
238
|
-
- `navigation-cube-size` - Cube size in pixels (default: 120)
|
|
239
|
-
- `navigation-cube-transition` - Camera transition duration in ms (default: 800)
|
|
240
|
-
|
|
241
|
-
### Preview Mode
|
|
242
|
-
|
|
243
|
-
Preview mode disables all camera controls (mouse/touch interactions) while maintaining programmatic rotation capabilities. This is ideal for:
|
|
244
|
-
|
|
245
|
-
- Product configurators with UI-controlled rotation
|
|
246
|
-
- Model previews with custom control interfaces
|
|
247
|
-
- Embedded viewers where you want to control all interactions
|
|
248
|
-
|
|
249
|
-
**Usage:**
|
|
250
|
-
|
|
251
|
-
```html
|
|
252
|
-
<splat-viewer src="model.splat" preview-mode></splat-viewer>
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
**Features in Preview Mode:**
|
|
256
|
-
- ✅ Camera controls are completely disabled
|
|
257
|
-
- ✅ Model is automatically centered and framed on load
|
|
258
|
-
- ✅ Programmatic rotation via `setModelRotation()` API still works
|
|
259
|
-
- ✅ All other APIs remain functional (visibility, transforms, etc.)
|
|
260
|
-
|
|
261
|
-
**Example with Rotation Controls:**
|
|
262
|
-
|
|
263
|
-
```javascript
|
|
264
|
-
const viewer = document.getElementById('viewer');
|
|
265
|
-
|
|
266
|
-
viewer.addEventListener('loaded', () => {
|
|
267
|
-
const models = viewer.getModels();
|
|
268
|
-
const modelId = models[0].id;
|
|
269
|
-
|
|
270
|
-
// Programmatically set rotation
|
|
271
|
-
viewer.setModelRotation(modelId, { x: 0, y: 45, z: 0 });
|
|
272
|
-
});
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
See `examples/preview-mode.html` for a complete working example.
|
|
276
|
-
|
|
277
|
-
### Events
|
|
278
|
-
|
|
279
|
-
#### Core Events
|
|
280
|
-
- `ready` - Component initialized
|
|
281
|
-
- `loading-start` - Model loading started
|
|
282
|
-
- `loading-progress` - Model loading progress update
|
|
283
|
-
- `loaded` - Model loaded successfully
|
|
284
|
-
- `error` - Loading error occurred
|
|
285
|
-
- `stats-update` - Performance statistics update
|
|
286
|
-
- `camera-change` - Camera position/target changed
|
|
287
|
-
- `interaction-start` / `interaction-end` - User interaction with orbit controls
|
|
288
|
-
|
|
289
|
-
#### Multi-Model Events (v1.0.0)
|
|
290
|
-
- `model-added` - Model added to scene
|
|
291
|
-
- `model-removed` - Model removed from scene
|
|
292
|
-
- `scene-cleared` - All models cleared
|
|
293
|
-
|
|
294
|
-
#### Transform Events (v1.0.0)
|
|
295
|
-
- `model-transform-changed` - Model transform updated
|
|
296
|
-
|
|
297
|
-
#### Camera Events (v1.0.0)
|
|
298
|
-
- `camera-mode-changed` - Camera mode switched (orbit/fly)
|
|
299
|
-
- `fly-camera-move` - Fly camera position changed
|
|
300
|
-
- `fly-camera-look` - Fly camera rotation changed
|
|
301
|
-
|
|
302
|
-
#### Scene Config Events (v1.0.0)
|
|
303
|
-
- `camera-fov-changed` - Camera FOV changed
|
|
304
|
-
- `background-color-changed` - Background color changed
|
|
305
|
-
|
|
306
|
-
## Project Structure
|
|
307
|
-
|
|
308
|
-
```
|
|
309
|
-
src/
|
|
310
|
-
├── web-component/ # Main web component implementation
|
|
311
|
-
│ ├── SplatViewerElement.ts # Web component class
|
|
312
|
-
│ ├── SplatViewerCore.ts # Core rendering engine
|
|
313
|
-
│ ├── NavigationCubeController.ts # Navigation cube controller
|
|
314
|
-
│ ├── OrbitCameraScript.ts # Camera controls
|
|
315
|
-
│ ├── navigation-cube/ # Navigation cube modules
|
|
316
|
-
│ │ ├── CubeRenderer.ts # 3D cube visual rendering
|
|
317
|
-
│ │ ├── ControlPointManager.ts # Control point UI elements
|
|
318
|
-
│ │ └── CameraTransitionController.ts # Camera animations
|
|
319
|
-
│ ├── types/ # TypeScript definitions
|
|
320
|
-
│ ├── loader/ # File loading system (.ply, .sog, .splat)
|
|
321
|
-
│ └── utils/ # Utility functions
|
|
322
|
-
├── build/ # Build configuration
|
|
323
|
-
├── dist/web-component/ # Built self-contained web component
|
|
324
|
-
│ └── splat-viewer.min.js # Single 2MB file with PlayCanvas
|
|
325
|
-
├── test-web-component.html # Basic test page
|
|
326
|
-
└── test-navigation-cube.html # Navigation cube test page
|
|
327
|
-
|
|
328
|
-
assets/ # 3D model assets for testing
|
|
329
|
-
docs/ # Documentation
|
|
330
|
-
```
|
|
331
|
-
|
|
332
|
-
## Supported File Formats
|
|
333
|
-
|
|
334
|
-
- **.sog** - Spatially Ordered Gaussians (PlayCanvas native support)
|
|
335
|
-
- **.splat** - Gaussian Splat files (PlayCanvas native support)
|
|
336
|
-
- **.ply** - Point cloud files (standard format)
|
|
337
|
-
- **.ply.compressed** - Compressed PLY files (gzip/deflate)
|
|
338
|
-
|
|
339
|
-
## Self-Contained Bundle
|
|
340
|
-
|
|
341
|
-
The web component is distributed as a single 2MB file (`splat-viewer.min.js`) that includes:
|
|
62
|
+
## Features
|
|
342
63
|
|
|
343
|
-
-
|
|
344
|
-
-
|
|
345
|
-
-
|
|
346
|
-
-
|
|
347
|
-
-
|
|
64
|
+
- 🎨 **Multi-Model Support** - Load and manage multiple models in one scene
|
|
65
|
+
- 🎥 **Dual Camera Modes** - Orbit and fly camera controls
|
|
66
|
+
- 🔧 **Transform System** - Position, rotate, and scale models programmatically
|
|
67
|
+
- 📦 **Multiple Formats** - Support for PLY, SPLAT, and SOG files
|
|
68
|
+
- ⚡ **High Performance** - Optimized rendering with PlayCanvas
|
|
69
|
+
- 🎯 **Selection Tools** - Box and sphere selection for splats
|
|
70
|
+
- 🎨 **Scene Configuration** - Background, grid, FOV, and more
|
|
71
|
+
- 📱 **Responsive** - Works on desktop, tablet, and mobile
|
|
348
72
|
|
|
349
|
-
|
|
73
|
+
## API
|
|
350
74
|
|
|
351
|
-
-
|
|
352
|
-
- Version consistency guaranteed
|
|
353
|
-
- Easy embedding in any web application
|
|
354
|
-
- Offline functionality
|
|
75
|
+
See the full [API documentation](https://github.com/Heliguy-com/3d-web-viewer/tree/main/packages/core/docs) for detailed information.
|
|
355
76
|
|
|
356
77
|
## Development
|
|
357
78
|
|
|
79
|
+
This package is part of the `@heliguy-xyz/splat-viewer` monorepo.
|
|
80
|
+
|
|
358
81
|
```bash
|
|
359
|
-
#
|
|
360
|
-
npm run
|
|
82
|
+
# Build
|
|
83
|
+
npm run build
|
|
361
84
|
|
|
362
|
-
#
|
|
363
|
-
npm run
|
|
85
|
+
# Development server
|
|
86
|
+
npm run dev
|
|
364
87
|
|
|
365
|
-
#
|
|
366
|
-
npm run
|
|
88
|
+
# Type check
|
|
89
|
+
npm run type-check
|
|
367
90
|
```
|
|
368
91
|
|
|
369
|
-
##
|
|
370
|
-
|
|
371
|
-
### Netlify
|
|
372
|
-
|
|
373
|
-
- Publish directory: `dist`
|
|
374
|
-
- Build command: `npm run build`
|
|
375
|
-
- Node version: 18 (configured in `netlify.toml`)
|
|
92
|
+
## License
|
|
376
93
|
|
|
377
|
-
|
|
378
|
-
(`build/copy-viewer-to-index.mjs`). Rollup uses an ESM config at `build/rollup.config.mjs`.
|
|
94
|
+
MIT © Heliguy
|
|
379
95
|
|
|
380
|
-
##
|
|
96
|
+
## Related Packages
|
|
381
97
|
|
|
382
|
-
|
|
98
|
+
- [@heliguy-xyz/splat-viewer-react-ui](https://www.npmjs.com/package/@heliguy-xyz/splat-viewer-react-ui) - Full-featured React UI component
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@heliguy-xyz/splat-viewer",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.28",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A standalone 3D Gaussian Splat viewer web component with multi-model support, transform system, fly camera, and scene configuration",
|
|
6
6
|
"keywords": [
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"repository": {
|
|
21
21
|
"type": "git",
|
|
22
|
-
"url": "https://github.com/Heliguy-com/3d-web-viewer.git"
|
|
22
|
+
"url": "https://github.com/Heliguy-com/3d-web-viewer.git",
|
|
23
|
+
"directory": "packages/core"
|
|
23
24
|
},
|
|
24
25
|
"bugs": {
|
|
25
26
|
"url": "https://github.com/Heliguy-com/3d-web-viewer/issues"
|
|
@@ -51,8 +52,7 @@
|
|
|
51
52
|
],
|
|
52
53
|
"scripts": {
|
|
53
54
|
"dev": "npm run web-component:serve",
|
|
54
|
-
"build": "npm run web-component:build:rollup
|
|
55
|
-
"prepublishOnly": "npm run clean && npm run build",
|
|
55
|
+
"build": "npm run web-component:build:rollup",
|
|
56
56
|
"preview": "npm run web-component:serve",
|
|
57
57
|
"test": "echo 'No tests configured yet'",
|
|
58
58
|
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
@@ -60,12 +60,11 @@
|
|
|
60
60
|
"format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
|
|
61
61
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,css,md}\"",
|
|
62
62
|
"clean": "rimraf dist",
|
|
63
|
-
"prepare": "husky install",
|
|
64
63
|
"web-component:dev": "webpack --mode development --config build/webpack.config.js --watch",
|
|
65
64
|
"web-component:build": "webpack --mode production --config build/webpack.config.js",
|
|
66
65
|
"web-component:build:rollup": "rollup -c build/rollup.config.mjs",
|
|
67
66
|
"web-component:serve": "node build/dev-server.cjs",
|
|
68
|
-
"web-component:type-check": "tsc --noEmit --project tsconfig.
|
|
67
|
+
"web-component:type-check": "tsc --noEmit --project tsconfig.json",
|
|
69
68
|
"web-component:clean": "rimraf dist/web-component dist/types"
|
|
70
69
|
},
|
|
71
70
|
"dependencies": {
|
|
@@ -85,13 +84,8 @@
|
|
|
85
84
|
"@types/node": "^20.8.0",
|
|
86
85
|
"@types/three": "^0.157.0",
|
|
87
86
|
"babel-loader": "^9.1.3",
|
|
88
|
-
"eslint": "^8.53.0",
|
|
89
|
-
"eslint-plugin-react": "^7.37.5",
|
|
90
87
|
"express": "^4.18.2",
|
|
91
88
|
"http-proxy-middleware": "^2.0.6",
|
|
92
|
-
"husky": "^8.0.3",
|
|
93
|
-
"lint-staged": "^15.0.2",
|
|
94
|
-
"prettier": "^3.0.3",
|
|
95
89
|
"rimraf": "^5.0.5",
|
|
96
90
|
"rollup": "^4.0.0",
|
|
97
91
|
"terser-webpack-plugin": "^5.3.9",
|
|
@@ -101,7 +95,6 @@
|
|
|
101
95
|
"webpack": "^5.89.0",
|
|
102
96
|
"webpack-cli": "^5.1.4"
|
|
103
97
|
},
|
|
104
|
-
"lint-staged": {},
|
|
105
98
|
"engines": {
|
|
106
99
|
"node": ">=18.0.0",
|
|
107
100
|
"npm": ">=9.0.0"
|
package/CHANGELOG.md
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
|
|
5
|
-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
-
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
-
|
|
8
|
-
## [1.0.0] - 2025-01-XX
|
|
9
|
-
|
|
10
|
-
### Added
|
|
11
|
-
|
|
12
|
-
#### Multi-Model Support
|
|
13
|
-
- Add multiple models to the same scene with `addModel()`
|
|
14
|
-
- Remove models individually with `removeModel()`
|
|
15
|
-
- Query all loaded models with `getModels()`
|
|
16
|
-
- Get per-model statistics with `getModelStats()`
|
|
17
|
-
- Get scene-wide statistics with `getSceneStats()`
|
|
18
|
-
- Events: `model-added`, `model-removed`, `scene-cleared`
|
|
19
|
-
|
|
20
|
-
#### Transform System
|
|
21
|
-
- Apply 4x4 transformation matrices to models
|
|
22
|
-
- Set/get position, rotation, and scale independently
|
|
23
|
-
- Reset transforms to identity
|
|
24
|
-
- Event: `model-transform-changed`
|
|
25
|
-
|
|
26
|
-
#### Fly Camera Mode
|
|
27
|
-
- Switch between orbit and fly camera modes with `setCameraMode()`
|
|
28
|
-
- First-person WASD + mouse-look navigation with pointer lock
|
|
29
|
-
- Configurable movement speed, sensitivity, and key bindings
|
|
30
|
-
- Speed modifiers (Shift for fast, Ctrl for slow)
|
|
31
|
-
- Height constraints and collision detection options
|
|
32
|
-
- Events: `camera-mode-changed`, `fly-camera-move`, `fly-camera-look`
|
|
33
|
-
|
|
34
|
-
#### Scene Configuration
|
|
35
|
-
- Set and animate camera FOV with `setCameraFOV()` and `animateCameraFOV()`
|
|
36
|
-
- Set and animate background color with `setBackgroundColor()` and `animateBackgroundColor()`
|
|
37
|
-
- Support for multiple color formats (hex, RGB, RGBA, named colors)
|
|
38
|
-
- Events: `camera-fov-changed`, `background-color-changed`
|
|
39
|
-
|
|
40
|
-
#### TypeScript Support
|
|
41
|
-
- Full type definitions for all public APIs
|
|
42
|
-
- Export types for models, transforms, camera, and scene config
|
|
43
|
-
- IntrinsicElements declaration support for React/JSX
|
|
44
|
-
|
|
45
|
-
#### Documentation
|
|
46
|
-
- Comprehensive integration guide for frontend developers
|
|
47
|
-
- API quick reference
|
|
48
|
-
- Migration guide
|
|
49
|
-
- React/Next.js integration examples
|
|
50
|
-
|
|
51
|
-
### Changed
|
|
52
|
-
- Package name changed to `@heliguy/web-viewer` (scoped package)
|
|
53
|
-
- Made package public for npm publishing
|
|
54
|
-
- Updated README with npm installation instructions
|
|
55
|
-
- Enhanced event system with more granular events
|
|
56
|
-
- Removed legacy `_supersplat_tmp/` sources; the viewer is now **SuperSplat-core only**
|
|
57
|
-
|
|
58
|
-
### Fixed
|
|
59
|
-
- Improved type safety across all APIs
|
|
60
|
-
- Better error handling for model operations
|
|
61
|
-
- Consistent event emission patterns
|
|
62
|
-
- Fly camera mouse-look now works reliably when the SuperSplat controller uses pointer events (mouse events can be suppressed by `preventDefault()`)
|
|
63
|
-
|
|
64
|
-
## [0.1.0] - 2024-XX-XX
|
|
65
|
-
|
|
66
|
-
### Added
|
|
67
|
-
- Initial release
|
|
68
|
-
- Basic 3D Gaussian Splat viewer web component
|
|
69
|
-
- Support for .splat, .ply, .ply.compressed, and .sog formats
|
|
70
|
-
- PlayCanvas-based rendering engine
|
|
71
|
-
- Orbit camera controls
|
|
72
|
-
- Navigation cube for camera orientation
|
|
73
|
-
- Performance monitoring
|
|
74
|
-
- Loading states and error handling
|
|
75
|
-
- Self-contained bundle with zero external dependencies
|
|
76
|
-
|
|
77
|
-
[1.0.0]: https://github.com/Heliguy-com/3d-web-viewer/releases/tag/v1.0.0
|
|
78
|
-
[0.1.0]: https://github.com/Heliguy-com/3d-web-viewer/releases/tag/v0.1.0
|