3D Components

Scene3D

A general-purpose 3D scene container with configurable camera, field of view, and ambient lighting.

Prop	Type	Default	Description
`renderScene?`	`RenderSceneFn`	—	Renderer from `createR3FScene3D()`
`cameraPosition`	`[number, number, number]`	`[0, 0, 5]`	Camera x/y/z position
`fov`	`number`	`75`	Camera field of view in degrees
`ambientLightIntensity`	`number`	`1`	Ambient light intensity (0–2)
`loading`	`boolean`	`false`	Show a loading overlay
`error`	`string \| null`	`null`	Show an error message overlay
`accessibilityLabel?`	`string`	`'3D Scene'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { Scene3D } from '@objectifthunes/limestone-sdk';
import { createR3FScene3D } from '@objectifthunes/limestone-sdk/r3f';

<Scene3D
  renderScene={createR3FScene3D()}
  cameraPosition={[0, 2, 8]}
  fov={60}
  ambientLightIntensity={1.2}
/>

ModelViewer

Displays a 3D model (GLTF/GLB) with optional auto-rotation and loading progress feedback.

Prop	Type	Default	Description
`renderModel?`	`RenderModelFn`	—	Renderer from `createR3FModelViewer()`
`source`	`string`	—	URI of the GLTF or GLB model file
`autoRotate`	`boolean`	`false`	Continuously rotate the model on the Y axis
`autoRotateSpeed`	`number`	`1`	Rotation speed multiplier
`loadingProgress`	`number`	`0`	Loading progress 0–100 shown on overlay
`accessibilityLabel?`	`string`	`'3D Model'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { ModelViewer } from '@objectifthunes/limestone-sdk';
import { createR3FModelViewer } from '@objectifthunes/limestone-sdk/r3f';

<ModelViewer
  renderModel={createR3FModelViewer()}
  source="https://example.com/shoe.glb"
  autoRotate
  autoRotateSpeed={1.5}
/>

ObjectScanner

Displays a 3D scan of a real-world object with optional metadata overlay and auto-rotation.

Prop	Type	Default	Description
`renderScanner?`	`RenderScannerFn`	—	Renderer from `createR3FObjectScanner()`
`source`	`string`	—	URI of the scanned model file
`scanMetadata`	`Record<string, string>`	`{}`	Key-value pairs displayed in the metadata panel
`showMetadata`	`boolean`	`false`	Whether to show the metadata overlay
`autoRotate`	`boolean`	`false`	Auto-rotate the scanned model
`accessibilityLabel?`	`string`	`'Object Scanner'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { ObjectScanner } from '@objectifthunes/limestone-sdk';
import { createR3FObjectScanner } from '@objectifthunes/limestone-sdk/r3f';

<ObjectScanner
  renderScanner={createR3FObjectScanner()}
  source="https://example.com/scan.glb"
  scanMetadata={{ 'Material': 'Ceramic', 'Weight': '420 g' }}
  showMetadata
/>

BeforeAfter3D

Side-by-side or slider comparison between two 3D models (e.g. before and after a transformation).

Prop	Type	Default	Description
`renderBefore?`	`RenderModelFn`	—	Renderer for the “before” model
`renderAfter?`	`RenderModelFn`	—	Renderer for the “after” model
`sourceBefore`	`string`	—	URI of the “before” model
`sourceAfter`	`string`	—	URI of the “after” model
`mode`	`'side-by-side' \| 'slider'`	`'slider'`	Comparison display mode
`initialSplit`	`number`	`0.5`	Initial split position (0–1) for slider mode
`beforeLabel`	`string`	`'Before'`	Label for the before panel
`afterLabel`	`string`	`'After'`	Label for the after panel
`accessibilityLabel?`	`string`	`'Before/After 3D'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { BeforeAfter3D } from '@objectifthunes/limestone-sdk';
import { createR3FBeforeAfter3D } from '@objectifthunes/limestone-sdk/r3f';

const renderer = createR3FBeforeAfter3D();

<BeforeAfter3D
  renderBefore={renderer}
  renderAfter={renderer}
  sourceBefore="https://example.com/before.glb"
  sourceAfter="https://example.com/after.glb"
  mode="slider"
  initialSplit={0.4}
  beforeLabel="Original"
  afterLabel="Restored"
/>

Panorama360

An interactive 360-degree panoramic viewer with optional gyroscope control.

Prop	Type	Default	Description
`renderPanorama?`	`RenderPanoramaFn`	—	Renderer from `createR3FPanorama360()`
`source`	`string`	—	URI of the equirectangular panorama image
`enableGyroscope`	`boolean`	`false`	Use device orientation to control the view
`initialRotation`	`number`	`0`	Starting horizontal rotation in degrees
`accessibilityLabel?`	`string`	`'360 Panorama'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { Panorama360 } from '@objectifthunes/limestone-sdk';
import { createR3FPanorama360 } from '@objectifthunes/limestone-sdk/r3f';

<Panorama360
  renderPanorama={createR3FPanorama360()}
  source="https://example.com/panorama.jpg"
  enableGyroscope
  initialRotation={90}
/>

MapScene3D

A 3D map view that overlays georeferenced 3D objects on a terrain mesh.

Prop	Type	Default	Description
`renderMap?`	`RenderMapFn`	—	Renderer for the map terrain
`renderObject?`	`RenderModelFn`	—	Renderer for the overlay objects
`region`	`MapRegion`	—	`{ latitude, longitude, latitudeDelta, longitudeDelta }`
`objects`	`MapScene3DObject[]`	`[]`	Each object: `{ id, coordinate, modelUri, label? }`
`showLabels`	`boolean`	`true`	Show floating labels above objects
`accessibilityLabel?`	`string`	`'3D Map'`	Accessibility label
`testID?`	`string`	—	Test identifier

import { MapScene3D } from '@objectifthunes/limestone-sdk';
import { createR3FMapScene3D } from '@objectifthunes/limestone-sdk/r3f';

<MapScene3D
  renderMap={createR3FMapScene3D()}
  region={{ latitude: 48.8566, longitude: 2.3522, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
  objects={[
    { id: 'tower', coordinate: { latitude: 48.8584, longitude: 2.2945 }, modelUri: 'https://example.com/tower.glb', label: 'Eiffel Tower' },
  ]}
  showLabels
/>

Using the dev adapter

All six 3D components work without @react-three/fiber installed. Switch the import to ./dev for Expo Go, simulators, and CI:

import {
  createR3FScene3D,
  createR3FModelViewer,
  createR3FObjectScanner,
  createR3FBeforeAfter3D,
  createR3FPanorama360,
  createR3FMapScene3D,
} from '@objectifthunes/limestone-sdk/dev';

The factory names are identical. No other code changes required.

Screens

AR Components