@liveroom-tech/react-immersive 1.3.5 → 1.4.0
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 +33 -0
- package/dist/index.d.mts +6 -3
- package/dist/index.d.ts +6 -3
- package/dist/index.js +191 -12
- package/dist/index.mjs +194 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,11 +41,13 @@ It also exports types for `ObjectBinding`, `ObjectBindingMaterial`, `ObjectActio
|
|
|
41
41
|
- optional custom right scene objects panel through `customSceneObjectsPanel`
|
|
42
42
|
- optional hiding of either built-in panel through `showObjectBindingDataPanel` and `showSceneObjectsPanel`
|
|
43
43
|
- optional model export button through `showDownloadButton` and `downloadFilename`, plus an independent `showResetButton` toggle for the rest of that action bar
|
|
44
|
+
- an optional UV Checker toolbar button through `showUvCheckerButton`, for inspecting UV scale, stretching, seams, orientation, and missing UV0 coordinates directly in `ModelViewer`
|
|
44
45
|
- click-to-measure distance tool and a bounding-box dimensions overlay through `showMeasureTools` and `measurementUnit`
|
|
45
46
|
- an exploded-view slider that slides each bound part outward from the model center to reveal interior/assembly structure through `showExplodeControls`
|
|
46
47
|
- a cinematic auto-camera that glides the camera along authored waypoints (or a zero-config showcase orbit), like a film, through `cinematic` — with a play/pause control that yields the moment you touch the camera
|
|
47
48
|
- a guided-tour control cluster (Previous/Stop/Next) for stepping through annotations, toggleable via `showAnnotationNavigation`
|
|
48
49
|
- optional annotation detail popups on marker hover via `showAnnotationOnHover`
|
|
50
|
+
- PBR, Matcap, and UV Checker renderer modes, with the checker exposing UV stretching, seams, rotation, and missing UV0 data directly on the model
|
|
49
51
|
- a `sceneConfig` prop accepting the same scene-wide config (lighting, environment, background, post-processing, animations, annotations) authored by `BindingBuilder`'s Scene tab
|
|
50
52
|
- render-loop and perf tuning through `renderMode`, `maxDpr`, `performanceProfile`, and compressed-asset decoder options (`dracoDecoderPath`, `ktx2TranscoderPath`, `meshopt`)
|
|
51
53
|
- WebXR "View in your space" (AR) and "Enter VR" through `enableXR`, with tap-to-place, pinch-to-resize, and twist-to-rotate AR placement gestures
|
|
@@ -697,6 +699,7 @@ type Props = {
|
|
|
697
699
|
ktx2TranscoderPath?: string | false;
|
|
698
700
|
meshopt?: boolean;
|
|
699
701
|
showMeasureTools?: boolean;
|
|
702
|
+
showUvCheckerButton?: boolean;
|
|
700
703
|
showExplodeControls?: boolean;
|
|
701
704
|
cinematic?: boolean | CinematicConfig;
|
|
702
705
|
measurementUnit?: string;
|
|
@@ -1258,6 +1261,22 @@ Optional scene-wide configuration object (`SceneConfig`) covering model, camera,
|
|
|
1258
1261
|
|
|
1259
1262
|
`sceneConfig.animations` drives autoplay and per-clip playback settings, and `sceneConfig.annotations` seeds the annotation markers rendered on the model.
|
|
1260
1263
|
|
|
1264
|
+
`sceneConfig.model.renderer` accepts `"pbr"`, `"matcap"`, or `"uv-checker"`.
|
|
1265
|
+
UV Checker temporarily replaces every mesh material with an unlit numbered test
|
|
1266
|
+
chart without changing `objectBindings` or uploaded textures. Switching back
|
|
1267
|
+
restores the original material references. Meshes without UV0 coordinates appear
|
|
1268
|
+
magenta and trigger an explanatory notice.
|
|
1269
|
+
|
|
1270
|
+
```tsx
|
|
1271
|
+
<ModelViewer
|
|
1272
|
+
{...props}
|
|
1273
|
+
sceneConfig={{
|
|
1274
|
+
...sceneConfig,
|
|
1275
|
+
model: { ...sceneConfig.model, renderer: "uv-checker" },
|
|
1276
|
+
}}
|
|
1277
|
+
/>
|
|
1278
|
+
```
|
|
1279
|
+
|
|
1261
1280
|
### `disableZoom`
|
|
1262
1281
|
|
|
1263
1282
|
Optional boolean. When `true`, the viewer never zooms the camera to an object on selection (selection still highlights and fires callbacks).
|
|
@@ -1375,6 +1394,20 @@ meshopt?: boolean;
|
|
|
1375
1394
|
|
|
1376
1395
|
DRACO, Meshopt, and KTX2 decoding are enabled by default via hosted decoder/transcoder bundles, fetched lazily only when the model needs them. Pass a path to self-host the decoder/transcoder files, or `false` to disable that decoder.
|
|
1377
1396
|
|
|
1397
|
+
### `showUvCheckerButton`
|
|
1398
|
+
|
|
1399
|
+
Optional boolean that shows a UV Checker toggle button over the canvas. Turning it on temporarily replaces the model's materials with the numbered diagnostic texture; turning it off restores the renderer configured by `sceneConfig`. Missing UV0 coordinates are shown in magenta.
|
|
1400
|
+
|
|
1401
|
+
```tsx
|
|
1402
|
+
<ModelViewer showUvCheckerButton {...props} />
|
|
1403
|
+
```
|
|
1404
|
+
|
|
1405
|
+
Default:
|
|
1406
|
+
|
|
1407
|
+
```ts
|
|
1408
|
+
false;
|
|
1409
|
+
```
|
|
1410
|
+
|
|
1378
1411
|
### `showMeasureTools`
|
|
1379
1412
|
|
|
1380
1413
|
Optional boolean that shows a click-to-measure toolbar over the canvas: click two points on the model for a distance readout, plus a toggleable bounding-box dimensions overlay.
|
package/dist/index.d.mts
CHANGED
|
@@ -26,10 +26,12 @@ type SceneLightingConfig = {
|
|
|
26
26
|
};
|
|
27
27
|
lights: SceneLight[];
|
|
28
28
|
};
|
|
29
|
+
declare const SCENE_MODEL_RENDERERS: readonly ["pbr", "matcap", "uv-checker"];
|
|
30
|
+
type SceneModelRenderer = (typeof SCENE_MODEL_RENDERERS)[number];
|
|
29
31
|
type SceneModelConfig = {
|
|
30
32
|
rotation: [number, number, number];
|
|
31
33
|
showAdvancedRotation: boolean;
|
|
32
|
-
renderer:
|
|
34
|
+
renderer: SceneModelRenderer;
|
|
33
35
|
shading: "lit" | "unlit" | "normals";
|
|
34
36
|
};
|
|
35
37
|
type SceneCameraConfig = {
|
|
@@ -610,6 +612,7 @@ type ModelViewerProps = {
|
|
|
610
612
|
ktx2TranscoderPath?: string | false;
|
|
611
613
|
meshopt?: boolean;
|
|
612
614
|
showMeasureTools?: boolean;
|
|
615
|
+
showUvCheckerButton?: boolean;
|
|
613
616
|
showExplodeControls?: boolean;
|
|
614
617
|
cinematic?: boolean | CinematicConfig;
|
|
615
618
|
measurementUnit?: string;
|
|
@@ -620,7 +623,7 @@ type ModelViewerProps = {
|
|
|
620
623
|
showAnnotationNavigation?: boolean;
|
|
621
624
|
showAnnotationOnHover?: boolean;
|
|
622
625
|
};
|
|
623
|
-
declare function ModelViewer({ modelUrl, licenseKey, objectBindings, selectedObject, panelHoveredObject, onObjectBindingsChange, onObjectSelect, onObjectHover, onModelLoaded, onLoadError, onAction, onHiddenObjectsChange, onCameraChange, onViewerReady, onTextureUpload, onAnimationsReady, onAnnotationsChange, activeAnnotation: controlledActiveAnnotation, onActiveAnnotationChange, lights, camera, backgroundColor, shadows, showObjectBindingDataPanel, customObjectBindingDataPanel, customSceneObjectsPanel, showSceneObjectsPanel, showDownloadButton, downloadFilename, showResetButton, showLoadingOverlay, showMouseController, mouseControllerPosition, mouseControllerOpacity, moveSensitivity, zoomSensitivity, sceneConfig, disableZoom, zoomOnSelected, highlightOnHover, onAutoFit, refitOnResize, renderMode, maxDpr, performanceProfile, dracoDecoderPath, ktx2TranscoderPath, meshopt, showMeasureTools, showExplodeControls, cinematic, measurementUnit, enableXR, usdzUrl, arScaleMode, mobileHandoffUrl, showAnnotationNavigation, showAnnotationOnHover, }: ModelViewerProps): react_jsx_runtime.JSX.Element;
|
|
626
|
+
declare function ModelViewer({ modelUrl, licenseKey, objectBindings, selectedObject, panelHoveredObject, onObjectBindingsChange, onObjectSelect, onObjectHover, onModelLoaded, onLoadError, onAction, onHiddenObjectsChange, onCameraChange, onViewerReady, onTextureUpload, onAnimationsReady, onAnnotationsChange, activeAnnotation: controlledActiveAnnotation, onActiveAnnotationChange, lights, camera, backgroundColor, shadows, showObjectBindingDataPanel, customObjectBindingDataPanel, customSceneObjectsPanel, showSceneObjectsPanel, showDownloadButton, downloadFilename, showResetButton, showLoadingOverlay, showMouseController, mouseControllerPosition, mouseControllerOpacity, moveSensitivity, zoomSensitivity, sceneConfig, disableZoom, zoomOnSelected, highlightOnHover, onAutoFit, refitOnResize, renderMode, maxDpr, performanceProfile, dracoDecoderPath, ktx2TranscoderPath, meshopt, showMeasureTools, showUvCheckerButton, showExplodeControls, cinematic, measurementUnit, enableXR, usdzUrl, arScaleMode, mobileHandoffUrl, showAnnotationNavigation, showAnnotationOnHover, }: ModelViewerProps): react_jsx_runtime.JSX.Element;
|
|
624
627
|
|
|
625
628
|
declare function BindingBuilder({ licenseKey }: {
|
|
626
629
|
licenseKey: string;
|
|
@@ -725,4 +728,4 @@ type ShareableViewerStateProps = {
|
|
|
725
728
|
};
|
|
726
729
|
declare function useShareableViewerState({ cameraState, setCameraState, objectBindings, onObjectBindingsChange, selectedObjectBinding, setSelectedObjectBinding, paramKey, debounceMs, autoSync, }: UseShareableViewerStateOptions): ShareableViewerStateProps;
|
|
727
730
|
|
|
728
|
-
export { type AnimationClipInfo, type AnimationControls, type AnimationLoopMode, type AnimationPlaybackState, BindingBuilder, type CaptureImageOptions, type CinematicConfig, type CinematicWaypoint, type CustomObjectBindingDataPanelProps, type CustomSceneObjectsPanelProps, type HiddenObjectsState, type HomeCameraState, MATERIAL_BLENDING_MODES, MATERIAL_SIDES, ModelViewer, type ModelViewerProps, type ObjectActionEvent, type ObjectBinding, type ObjectBindingAction, type ObjectBindingMaterial, type ObjectBindingMaterialBlendingMode, type ObjectBindingMaterialSide, type ObjectBindingTextureSlot, type ObjectVisibilityProps, type SceneAnimationClipConfig, type SceneAnimationConfig, type SceneCinematicConfig, type SceneCinematicWaypoint, type SceneConfig, SimpleModelViewer, type SimpleModelViewerProps, type ViewerActionsOptions, type ViewerActionsProps, type ViewerAnimationsProps, type ViewerCameraProps, type ViewerCameraState, type ViewerModelBounds, type ViewerModelProps, type ViewerReadyState, type ViewerSelectionProps, type XRScaleMode, useObjectBinding, useObjectBindingIds, useObjectVisibility, useShareableViewerState, useViewerActions, useViewerAnimations, useViewerCamera, useViewerHover, useViewerModel, useViewerSelection };
|
|
731
|
+
export { type AnimationClipInfo, type AnimationControls, type AnimationLoopMode, type AnimationPlaybackState, BindingBuilder, type CaptureImageOptions, type CinematicConfig, type CinematicWaypoint, type CustomObjectBindingDataPanelProps, type CustomSceneObjectsPanelProps, type HiddenObjectsState, type HomeCameraState, MATERIAL_BLENDING_MODES, MATERIAL_SIDES, ModelViewer, type ModelViewerProps, type ObjectActionEvent, type ObjectBinding, type ObjectBindingAction, type ObjectBindingMaterial, type ObjectBindingMaterialBlendingMode, type ObjectBindingMaterialSide, type ObjectBindingTextureSlot, type ObjectVisibilityProps, type SceneAnimationClipConfig, type SceneAnimationConfig, type SceneCinematicConfig, type SceneCinematicWaypoint, type SceneConfig, type SceneModelRenderer, SimpleModelViewer, type SimpleModelViewerProps, type ViewerActionsOptions, type ViewerActionsProps, type ViewerAnimationsProps, type ViewerCameraProps, type ViewerCameraState, type ViewerModelBounds, type ViewerModelProps, type ViewerReadyState, type ViewerSelectionProps, type XRScaleMode, useObjectBinding, useObjectBindingIds, useObjectVisibility, useShareableViewerState, useViewerActions, useViewerAnimations, useViewerCamera, useViewerHover, useViewerModel, useViewerSelection };
|
package/dist/index.d.ts
CHANGED
|
@@ -26,10 +26,12 @@ type SceneLightingConfig = {
|
|
|
26
26
|
};
|
|
27
27
|
lights: SceneLight[];
|
|
28
28
|
};
|
|
29
|
+
declare const SCENE_MODEL_RENDERERS: readonly ["pbr", "matcap", "uv-checker"];
|
|
30
|
+
type SceneModelRenderer = (typeof SCENE_MODEL_RENDERERS)[number];
|
|
29
31
|
type SceneModelConfig = {
|
|
30
32
|
rotation: [number, number, number];
|
|
31
33
|
showAdvancedRotation: boolean;
|
|
32
|
-
renderer:
|
|
34
|
+
renderer: SceneModelRenderer;
|
|
33
35
|
shading: "lit" | "unlit" | "normals";
|
|
34
36
|
};
|
|
35
37
|
type SceneCameraConfig = {
|
|
@@ -610,6 +612,7 @@ type ModelViewerProps = {
|
|
|
610
612
|
ktx2TranscoderPath?: string | false;
|
|
611
613
|
meshopt?: boolean;
|
|
612
614
|
showMeasureTools?: boolean;
|
|
615
|
+
showUvCheckerButton?: boolean;
|
|
613
616
|
showExplodeControls?: boolean;
|
|
614
617
|
cinematic?: boolean | CinematicConfig;
|
|
615
618
|
measurementUnit?: string;
|
|
@@ -620,7 +623,7 @@ type ModelViewerProps = {
|
|
|
620
623
|
showAnnotationNavigation?: boolean;
|
|
621
624
|
showAnnotationOnHover?: boolean;
|
|
622
625
|
};
|
|
623
|
-
declare function ModelViewer({ modelUrl, licenseKey, objectBindings, selectedObject, panelHoveredObject, onObjectBindingsChange, onObjectSelect, onObjectHover, onModelLoaded, onLoadError, onAction, onHiddenObjectsChange, onCameraChange, onViewerReady, onTextureUpload, onAnimationsReady, onAnnotationsChange, activeAnnotation: controlledActiveAnnotation, onActiveAnnotationChange, lights, camera, backgroundColor, shadows, showObjectBindingDataPanel, customObjectBindingDataPanel, customSceneObjectsPanel, showSceneObjectsPanel, showDownloadButton, downloadFilename, showResetButton, showLoadingOverlay, showMouseController, mouseControllerPosition, mouseControllerOpacity, moveSensitivity, zoomSensitivity, sceneConfig, disableZoom, zoomOnSelected, highlightOnHover, onAutoFit, refitOnResize, renderMode, maxDpr, performanceProfile, dracoDecoderPath, ktx2TranscoderPath, meshopt, showMeasureTools, showExplodeControls, cinematic, measurementUnit, enableXR, usdzUrl, arScaleMode, mobileHandoffUrl, showAnnotationNavigation, showAnnotationOnHover, }: ModelViewerProps): react_jsx_runtime.JSX.Element;
|
|
626
|
+
declare function ModelViewer({ modelUrl, licenseKey, objectBindings, selectedObject, panelHoveredObject, onObjectBindingsChange, onObjectSelect, onObjectHover, onModelLoaded, onLoadError, onAction, onHiddenObjectsChange, onCameraChange, onViewerReady, onTextureUpload, onAnimationsReady, onAnnotationsChange, activeAnnotation: controlledActiveAnnotation, onActiveAnnotationChange, lights, camera, backgroundColor, shadows, showObjectBindingDataPanel, customObjectBindingDataPanel, customSceneObjectsPanel, showSceneObjectsPanel, showDownloadButton, downloadFilename, showResetButton, showLoadingOverlay, showMouseController, mouseControllerPosition, mouseControllerOpacity, moveSensitivity, zoomSensitivity, sceneConfig, disableZoom, zoomOnSelected, highlightOnHover, onAutoFit, refitOnResize, renderMode, maxDpr, performanceProfile, dracoDecoderPath, ktx2TranscoderPath, meshopt, showMeasureTools, showUvCheckerButton, showExplodeControls, cinematic, measurementUnit, enableXR, usdzUrl, arScaleMode, mobileHandoffUrl, showAnnotationNavigation, showAnnotationOnHover, }: ModelViewerProps): react_jsx_runtime.JSX.Element;
|
|
624
627
|
|
|
625
628
|
declare function BindingBuilder({ licenseKey }: {
|
|
626
629
|
licenseKey: string;
|
|
@@ -725,4 +728,4 @@ type ShareableViewerStateProps = {
|
|
|
725
728
|
};
|
|
726
729
|
declare function useShareableViewerState({ cameraState, setCameraState, objectBindings, onObjectBindingsChange, selectedObjectBinding, setSelectedObjectBinding, paramKey, debounceMs, autoSync, }: UseShareableViewerStateOptions): ShareableViewerStateProps;
|
|
727
730
|
|
|
728
|
-
export { type AnimationClipInfo, type AnimationControls, type AnimationLoopMode, type AnimationPlaybackState, BindingBuilder, type CaptureImageOptions, type CinematicConfig, type CinematicWaypoint, type CustomObjectBindingDataPanelProps, type CustomSceneObjectsPanelProps, type HiddenObjectsState, type HomeCameraState, MATERIAL_BLENDING_MODES, MATERIAL_SIDES, ModelViewer, type ModelViewerProps, type ObjectActionEvent, type ObjectBinding, type ObjectBindingAction, type ObjectBindingMaterial, type ObjectBindingMaterialBlendingMode, type ObjectBindingMaterialSide, type ObjectBindingTextureSlot, type ObjectVisibilityProps, type SceneAnimationClipConfig, type SceneAnimationConfig, type SceneCinematicConfig, type SceneCinematicWaypoint, type SceneConfig, SimpleModelViewer, type SimpleModelViewerProps, type ViewerActionsOptions, type ViewerActionsProps, type ViewerAnimationsProps, type ViewerCameraProps, type ViewerCameraState, type ViewerModelBounds, type ViewerModelProps, type ViewerReadyState, type ViewerSelectionProps, type XRScaleMode, useObjectBinding, useObjectBindingIds, useObjectVisibility, useShareableViewerState, useViewerActions, useViewerAnimations, useViewerCamera, useViewerHover, useViewerModel, useViewerSelection };
|
|
731
|
+
export { type AnimationClipInfo, type AnimationControls, type AnimationLoopMode, type AnimationPlaybackState, BindingBuilder, type CaptureImageOptions, type CinematicConfig, type CinematicWaypoint, type CustomObjectBindingDataPanelProps, type CustomSceneObjectsPanelProps, type HiddenObjectsState, type HomeCameraState, MATERIAL_BLENDING_MODES, MATERIAL_SIDES, ModelViewer, type ModelViewerProps, type ObjectActionEvent, type ObjectBinding, type ObjectBindingAction, type ObjectBindingMaterial, type ObjectBindingMaterialBlendingMode, type ObjectBindingMaterialSide, type ObjectBindingTextureSlot, type ObjectVisibilityProps, type SceneAnimationClipConfig, type SceneAnimationConfig, type SceneCinematicConfig, type SceneCinematicWaypoint, type SceneConfig, type SceneModelRenderer, SimpleModelViewer, type SimpleModelViewerProps, type ViewerActionsOptions, type ViewerActionsProps, type ViewerAnimationsProps, type ViewerCameraProps, type ViewerCameraState, type ViewerModelBounds, type ViewerModelProps, type ViewerReadyState, type ViewerSelectionProps, type XRScaleMode, useObjectBinding, useObjectBindingIds, useObjectVisibility, useShareableViewerState, useViewerActions, useViewerAnimations, useViewerCamera, useViewerHover, useViewerModel, useViewerSelection };
|