Skip to content

Commit

Permalink
feat: allow passing CameraInitialPosition
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabotechs
gabotechs committed Dec 11, 2023
1 parent f72640b commit 2bc02ad
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 29 deletions.
5 changes: 5 additions & 0 deletions .storybook/stories/FromUrl.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ function FromUrl(props: Omit<StlViewerProps, "url">) {
shadows
showAxes
orbitControls
cameraInitialPosition={{
latitude: Math.PI / 8,
longitude: -Math.PI / 8,
distance: 1
}}
modelProps={{
positionX: 150,
positionY: 150,
Expand Down
59 changes: 36 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ React component for visualizing STLs using Three.js.
```shell
npm install --save react-stl-viewer
```

or

```shell
yarn add react-stl-viewer
```
Expand Down Expand Up @@ -43,7 +45,7 @@ function App() {
);
}

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<App/>, document.getElementById('root'));
```

## Demo
Expand All @@ -52,18 +54,20 @@ You can see working the examples from `.storybook/stories` [here](https://gabote

## Props

| Prop | Type | Required | Notes |
| ---------------------- | :------------------------: | :----------: | :----------------------------------------------------------: |
| `url` | `string` | `true` | url of the Stl file |
| `modelProps` | `ModelProps` | `false` | 3d model properties, see below |
| `floorProps` | `FloorProps` | `false` | floor properties, see below |
| `shadows` | `boolean` | `false` | render shadows projected by the model on the ground |
| `showAxes` | `boolean` | `false` | show x y z axis |
| `orbitControls` | `boolean` | `false` | enable camera orbit controls|
| `extraHeaders` | `Record<string, string>` | `false` | custom headers for making the http query |
| `onFinishLoading` | `(ev: ModelDimensions) => any`| `false` | callback triggered when Stl is fully loaded |
| `onError` | `(err: Error) => any` | `false` | callback triggered when an error occurred while loading Stl|
| `canvasId` | `string` | `false` | id of the canvas element used for rendering the model |
| Prop | Type | Required | Notes |
|-------------------------|:------------------------------:|:--------:|:----------------------------------------------------------------------------------------------------------------:|
| `url` | `string` | `true` | url of the Stl file |
| `modelProps` | `ModelProps` | `false` | 3d model properties, see below |
| `floorProps` | `FloorProps` | `false` | floor properties, see below |
| `shadows` | `boolean` | `false` | render shadows projected by the model on the ground |
| `showAxes` | `boolean` | `false` | show x y z axis |
| `orbitControls` | `boolean` | `false` | enable camera orbit controls |
| `cameraInitialPosition` | `CameraInitialPosition` | `false` | set the initial position of the camera in geographic coordinates. The origin of coordinates is the object itself |
| `extraHeaders` | `Record<string, string>` | `false` | custom headers for making the http query |
| `onFinishLoading` | `(ev: ModelDimensions) => any` | `false` | callback triggered when Stl is fully loaded |
| `onError` | `(err: Error) => any` | `false` | callback triggered when an error occurred while loading Stl |
| `canvasId` | `string` | `false` | id of the canvas element used for rendering the model |

The component also accepts ```<div/>``` props

## Interfaces
Expand All @@ -83,16 +87,25 @@ The component also accepts ```<div/>``` props
| `geometryProps` | `(geometry: BufferGeometry) => BufferGeometry` | `false` | Perform some processing to the models geometry |

### FloorProps
| Prop | Type | Required | Notes |
| ---------------------- | :------------------------: | :----------: | :----------------------------------------------------------: |
| `gridWidth` | `number` | `false` | if specified, a grid will be drawn in the floor with this width |
| `gridLength` | `number` | `false` | if specified, a grid will be drawn in the floor with this length |

| Prop | Type | Required | Notes |
|--------------|:--------:|:--------:|:----------------------------------------------------------------:|
| `gridWidth` | `number` | `false` | if specified, a grid will be drawn in the floor with this width |
| `gridLength` | `number` | `false` | if specified, a grid will be drawn in the floor with this length |

### ModelDimensions
| Prop | Type | Notes |
| ---------------------- | :------------------------: | :----------------------------------------------------------: |
| `boundingRadius` | `number` | the radius of the bounding sphere of the 3d model before scaling |
| `width` | `number` | width of the 3d object |
| `height` | `number` | height of the 3d object |
| `length` | `number` | length of the 3d object |

| Prop | Type | Notes |
|------------------|:--------:|:----------------------------------------------------------------:|
| `boundingRadius` | `number` | the radius of the bounding sphere of the 3d model before scaling |
| `width` | `number` | width of the 3d object |
| `height` | `number` | height of the 3d object |
| `length` | `number` | length of the 3d object |

### CameraInitialPosition

| Prop | Type | Required | Notes |
|-------------|:--------:|:--------:|:------------------------------------------------------------------------------------------------------------------------------------------------:|
| `latitude` | `number` | `false` | camera's position latitude, it should be a number between `- Math.PI / 2` and `Math.PI / 2`, if the number exceeds the limits it will be clamped |
| `longitude` | `number` | `false` | camera's position longitude, it should be a number between `- Math.PI` and `Math.PI`, if the number exceeds the limits it will be clamped |
| `distance` | `number` | `false` | the distance factor between the object and the camera. This is a factor relative to the object size or the grid size if it's specified |
19 changes: 14 additions & 5 deletions src/StlViewer/SceneSetup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface ModelProps {

export interface SceneSetupProps {
url: string
cameraInitialPosition?: Partial<CameraInitialPosition>
extraHeaders?: Record<string, string>
shadows?: boolean
showAxes?: boolean
Expand All @@ -57,6 +58,11 @@ const SceneSetup: React.FC<SceneSetupProps> = (
showAxes = false,
orbitControls = false,
onFinishLoading = () => {},
cameraInitialPosition: {
latitude = INITIAL_LATITUDE,
longitude = INITIAL_LONGITUDE,
distance: distanceFactor
} = {},
modelProps: {
ref,
scale = 1,
Expand Down Expand Up @@ -108,12 +114,15 @@ const SceneSetup: React.FC<SceneSetupProps> = (
setMeshDims(dims)
setModelCenter([positionX ?? width/2, positionY ?? length/2, height/2])
const maxGridDimension = Math.max(gridWidth ?? 0, gridLength ?? 0)
const distance = maxGridDimension > 0
? maxGridDimension
: boundingRadius * CAMERA_POSITION_DISTANCE_FACTOR
let distance
if (maxGridDimension > 0) {
distance = maxGridDimension * (distanceFactor ?? 1)
} else {
distance = boundingRadius * (distanceFactor ?? CAMERA_POSITION_DISTANCE_FACTOR)
}
setCameraInitialPosition({
latitude: INITIAL_LATITUDE,
longitude: INITIAL_LONGITUDE,
latitude,
longitude,
distance
})
onFinishLoading(dims)
Expand Down
4 changes: 3 additions & 1 deletion src/StlViewer/StlViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const StlViewer: React.FC<StlViewerProps> = (
shadows,
showAxes,
orbitControls,
cameraInitialPosition,
...otherProps
}
) => {
Expand All @@ -35,7 +36,8 @@ const StlViewer: React.FC<StlViewerProps> = (
onFinishLoading,
shadows,
showAxes,
orbitControls
orbitControls,
cameraInitialPosition
}

return (
Expand Down

0 comments on commit 2bc02ad

Please sign in to comment.