aiden/VR-Web-Player
1
0
Fork 0
forked from EXT/VR180-Web-Player
Code Actions Activity

carosel images
All checks were successful
Test / test (push) Successful in 9m32s
Details

Browse Source
This commit is contained in:
Aiden
2026-06-10 15:12:25 +10:00
parent c28386ccdd
commit 857c9ac980
14 changed files with 466 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -39,7 +39,16 @@ Use an `img` element for a static SBS image:
</div>
```
Only one player is supported per page in this version. The player logs a clear console message and does not initialize if no `[data-vr-web-player]` container is found, if multiple containers are found, if the container does not contain exactly one supported media element, or if `data-projection` is not `vr180` or `plane`.
Add `data-carousel` to an image player when you want previous/next controls for multiple SBS still images in one immersive session:
```html
<div data-vr-web-player data-projection="vr180" data-carousel>
<img src="first-sbs-image.png" alt="First image" title="First Image" crossorigin="anonymous">
<img src="second-sbs-image.png" alt="Second image" title="Second Image" crossorigin="anonymous">
</div>
```
Only one player is supported per page in this version. The player logs a clear console message and does not initialize if no `[data-vr-web-player]` container is found, if multiple containers are found, if the container does not contain exactly one supported video/image element, if an image carousel does not contain at least two images and no videos, or if `data-projection` is not `vr180` or `plane`.
## Media format
This version supports side-by-side media only:
@@ -56,11 +65,12 @@ When the page loads, the media is embedded normally with an entry button over it
- In WebXR, `plane` maps the left and right halves onto the matching eyes of a floating 16:9 plane.
- Outside WebXR, both modes render only the left half of the SBS media so viewers do not see the raw double image.
- Static images show only applicable controls; playback, seek, and mute controls are video-only.
- Image carousels replace skip buttons with previous/next image controls, so you can change stills without leaving the immersive session.
- Controller pointers and lightweight hand/controller overlays appear after controller interaction, then fade away after a short idle period so they do not distract from viewing.
- Control icons are embedded from [Lucide](https://lucide.dev/) SVG definitions, so no PNG icon assets are required.
## Demo
Run `npm run build`, then open `test-pages/index.html` through a local web server. The test hub links to focused pages for flat 3D image, VR180 3D image, flat 3D video, and VR180 3D video. The root `index.html` redirects there for convenience.
Run `npm run build`, then open `test-pages/index.html` through a local web server. The test hub links to focused pages for flat 3D image, VR180 3D image, image carousels, flat 3D video, and VR180 3D video. The root `index.html` redirects there for convenience.
For local experimentation, run: