storysplat-viewer 2.2.2 → 2.2.3
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 +167 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/storysplat-viewer.umd.js +1 -1
- package/dist/storysplat-viewer.umd.js.map +1 -1
- package/dist/types/dynamic-viewer/CameraControls.d.ts +10 -2
- package/dist/types/dynamic-viewer/viewerUI.d.ts +10 -1
- package/dist/types/transformers/sceneToConfig.d.ts +7 -0
- package/dist/types/types/index.d.ts +147 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -431,6 +431,173 @@ StorySplat Viewer requires:
|
|
|
431
431
|
- Modern JavaScript (ES2015+)
|
|
432
432
|
- Recommended browsers: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
|
|
433
433
|
|
|
434
|
+
## Native App Integration
|
|
435
|
+
|
|
436
|
+
StorySplat Viewer can be embedded in native mobile apps using WebView components.
|
|
437
|
+
|
|
438
|
+
### React Native
|
|
439
|
+
|
|
440
|
+
```jsx
|
|
441
|
+
import { WebView } from 'react-native-webview';
|
|
442
|
+
|
|
443
|
+
function StorySplatViewer({ sceneId }) {
|
|
444
|
+
const html = `
|
|
445
|
+
<!DOCTYPE html>
|
|
446
|
+
<html>
|
|
447
|
+
<head>
|
|
448
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
449
|
+
<style>
|
|
450
|
+
* { margin: 0; padding: 0; }
|
|
451
|
+
html, body, #app { width: 100%; height: 100%; }
|
|
452
|
+
</style>
|
|
453
|
+
</head>
|
|
454
|
+
<body>
|
|
455
|
+
<div id="app"></div>
|
|
456
|
+
<script src="https://unpkg.com/storysplat-viewer@2/dist/storysplat-viewer.umd.js"></script>
|
|
457
|
+
<script>
|
|
458
|
+
StorySplatViewer.createViewerFromSceneId(
|
|
459
|
+
document.getElementById('app'),
|
|
460
|
+
'${sceneId}'
|
|
461
|
+
);
|
|
462
|
+
</script>
|
|
463
|
+
</body>
|
|
464
|
+
</html>
|
|
465
|
+
`;
|
|
466
|
+
|
|
467
|
+
return (
|
|
468
|
+
<WebView
|
|
469
|
+
source={{ html }}
|
|
470
|
+
style={{ flex: 1 }}
|
|
471
|
+
allowsInlineMediaPlayback
|
|
472
|
+
mediaPlaybackRequiresUserAction={false}
|
|
473
|
+
/>
|
|
474
|
+
);
|
|
475
|
+
}
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
### Flutter
|
|
479
|
+
|
|
480
|
+
```dart
|
|
481
|
+
import 'package:webview_flutter/webview_flutter.dart';
|
|
482
|
+
|
|
483
|
+
class StorySplatViewer extends StatefulWidget {
|
|
484
|
+
final String sceneId;
|
|
485
|
+
const StorySplatViewer({required this.sceneId});
|
|
486
|
+
|
|
487
|
+
@override
|
|
488
|
+
_StorySplatViewerState createState() => _StorySplatViewerState();
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
class _StorySplatViewerState extends State<StorySplatViewer> {
|
|
492
|
+
late final WebViewController controller;
|
|
493
|
+
|
|
494
|
+
@override
|
|
495
|
+
void initState() {
|
|
496
|
+
super.initState();
|
|
497
|
+
controller = WebViewController()
|
|
498
|
+
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
|
499
|
+
..loadHtmlString(_getHtml());
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
String _getHtml() {
|
|
503
|
+
return '''
|
|
504
|
+
<!DOCTYPE html>
|
|
505
|
+
<html>
|
|
506
|
+
<head>
|
|
507
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
508
|
+
<style>* { margin: 0; } html, body, #app { width: 100%; height: 100%; }</style>
|
|
509
|
+
</head>
|
|
510
|
+
<body>
|
|
511
|
+
<div id="app"></div>
|
|
512
|
+
<script src="https://unpkg.com/storysplat-viewer@2/dist/storysplat-viewer.umd.js"></script>
|
|
513
|
+
<script>
|
|
514
|
+
StorySplatViewer.createViewerFromSceneId(
|
|
515
|
+
document.getElementById('app'),
|
|
516
|
+
'${widget.sceneId}'
|
|
517
|
+
);
|
|
518
|
+
</script>
|
|
519
|
+
</body>
|
|
520
|
+
</html>
|
|
521
|
+
''';
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
@override
|
|
525
|
+
Widget build(BuildContext context) {
|
|
526
|
+
return WebViewWidget(controller: controller);
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
### iframe Embedding
|
|
532
|
+
|
|
533
|
+
For simple web integration, use an iframe:
|
|
534
|
+
|
|
535
|
+
```html
|
|
536
|
+
<iframe
|
|
537
|
+
src="https://discover.storysplat.com/api/v2-html/YOUR_SCENE_ID"
|
|
538
|
+
width="100%"
|
|
539
|
+
height="500"
|
|
540
|
+
frameborder="0"
|
|
541
|
+
allow="accelerometer; gyroscope; xr-spatial-tracking"
|
|
542
|
+
allowfullscreen>
|
|
543
|
+
</iframe>
|
|
544
|
+
```
|
|
545
|
+
|
|
546
|
+
### Self-Hosting
|
|
547
|
+
|
|
548
|
+
To self-host the viewer bundle instead of using a CDN:
|
|
549
|
+
|
|
550
|
+
1. Download the UMD bundle from npm:
|
|
551
|
+
```bash
|
|
552
|
+
npm pack storysplat-viewer
|
|
553
|
+
# Extract storysplat-viewer-x.x.x.tgz
|
|
554
|
+
# Copy dist/storysplat-viewer.umd.js to your server
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
2. Reference your self-hosted bundle:
|
|
558
|
+
```html
|
|
559
|
+
<script src="/path/to/storysplat-viewer.umd.js"></script>
|
|
560
|
+
```
|
|
561
|
+
|
|
562
|
+
### CDN Alternatives
|
|
563
|
+
|
|
564
|
+
The viewer is available on multiple CDNs:
|
|
565
|
+
|
|
566
|
+
```html
|
|
567
|
+
<!-- unpkg (default) -->
|
|
568
|
+
<script src="https://unpkg.com/storysplat-viewer@2/dist/storysplat-viewer.umd.js"></script>
|
|
569
|
+
|
|
570
|
+
<!-- jsDelivr -->
|
|
571
|
+
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.umd.js"></script>
|
|
572
|
+
|
|
573
|
+
<!-- Specific version -->
|
|
574
|
+
<script src="https://unpkg.com/storysplat-viewer@2.0.0/dist/storysplat-viewer.umd.js"></script>
|
|
575
|
+
```
|
|
576
|
+
|
|
577
|
+
### Standalone HTML Generation
|
|
578
|
+
|
|
579
|
+
Generate standalone HTML files programmatically:
|
|
580
|
+
|
|
581
|
+
```javascript
|
|
582
|
+
import { generateHTML, generateHTMLFromUrl } from 'storysplat-viewer';
|
|
583
|
+
|
|
584
|
+
// From scene data object
|
|
585
|
+
const html = generateHTML(sceneData, {
|
|
586
|
+
title: 'My Scene',
|
|
587
|
+
description: 'An interactive 3D experience'
|
|
588
|
+
});
|
|
589
|
+
|
|
590
|
+
// From scene JSON URL
|
|
591
|
+
const html = await generateHTMLFromUrl(
|
|
592
|
+
'https://example.com/scene.json',
|
|
593
|
+
{ title: 'My Scene' }
|
|
594
|
+
);
|
|
595
|
+
|
|
596
|
+
// Save to file (Node.js)
|
|
597
|
+
import fs from 'fs';
|
|
598
|
+
fs.writeFileSync('scene.html', html);
|
|
599
|
+
```
|
|
600
|
+
|
|
434
601
|
## Support
|
|
435
602
|
|
|
436
603
|
- GitHub Issues: [github.com/SonnyC56/storysplat-viewer/issues](https://github.com/SonnyC56/storysplat-viewer/issues)
|