# open-react-3d-viewer

> This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

Latest version **0.1.9** (published 2021-11-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install open-react-3d-viewer
pnpm add open-react-3d-viewer
yarn add open-react-3d-viewer
bun add open-react-3d-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2021-11-08 |
| First published | 2021-11-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 17.6 MB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | shozonraj143 |

## Links

- npm: https://www.npmjs.com/package/open-react-3d-viewer
- Repository: https://github.com/Studio-23-xyz/react-3d-viewer
- Homepage: http://Studio-23-xyz.github.io/react-3d-viewer
- Issues: https://github.com/Studio-23-xyz/react-3d-viewer/issues
- npm.io page: https://npm.io/package/open-react-3d-viewer

## Dependencies (21)

- [drei](https://npm.io/package/drei.md) ^1.5.3
- [axios](https://npm.io/package/axios.md) ^0.21.3
- [react](https://npm.io/package/react.md) ^17.0.2
- [three](https://npm.io/package/three.md) 0.122.0
- [valtio](https://npm.io/package/valtio.md) ^1.2.1
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [use-cannon](https://npm.io/package/use-cannon.md) ^0.5.3
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.3.2
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [react-colorful](https://npm.io/package/react-colorful.md) ^5.3.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.0.0-beta.5
- [@react-three/drei](https://npm.io/package/@react-three/drei.md) ^7.5.0
- [react-three-fiber](https://npm.io/package/react-three-fiber.md) 5.3.1
- [@react-three/fiber](https://npm.io/package/@react-three/fiber.md) ^7.0.6
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.7
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.3

## Recent versions

- 0.1.9 (latest) — 2021-11-08
- 0.1.8 — 2021-11-08
- 0.1.7 — 2021-11-08
- 0.1.5 — 2021-11-08
- 0.1.3 — 2021-11-08
- 0.1.2 — 2021-11-08
- 0.1.1 — 2021-11-08
- 0.1.0 — 2021-11-08

## README

# Open-React-3d-Viewer

A 3d viewer for your React app.

- No react 3d library needed.
- Simple control process.

# tl;dr

- Install by executing npm install open-react-3d-viewer or yarn add open-react-3d-viewer.
- Import by adding import Visualaizer from 'open-react-3d-viewer/dist/Visualaizer'.
- Use by adding `<Visualaizer /> ` . use `controlVisualaizer` prop for getting new values'


# Demo

Live demo is available.

[Online demo](https://studio-23-xyz.github.io/react-3d-viewer/) 

# Getting started

## Installation
Add Open-React-3d-Viewer to your project by executing 
> npm install open-react-3d-viewer 

or 
> yarn add open-react-3d-viewer.


## Usage

Here's an example of basic usage:

```javascript
import React, { useState } from 'react';
import Visualaizer from 'open-react-3d-viewer/dist/Visualaizer';

function MyApp() {
 const [controlVisualaizer, setControlVisualaizer] = useState({
			rotationSpeed: 10,
		});

  return (
    <div>
      <Visualaizer
			controlVisualaizer={controlVisualaizer}
			setControlVisualaizer={setControlVisualaizer}
		/>
    </div>
  );
}
```
## Custom styling
Custom styling added automatically when you install the package


# User guide

| State Object Value name | Description | Default value | Example Values|
| ----------- | ----------- | ----------- | ----------- |
| enableRotation | For enable or disable rotation | true | false |
| rotationSpeed | its change rotation speed | 10 | -10 or 20 |
| rotationTopLimit | For change rotation top angle view | 1 | 1 to 32 |
| rotationBottomLimit | For change rotation bottom angle view | 2 | 1 to 32 |
| zoomEnable | For enable or disable zoom | true | false |
| zoomInLimit | For how mouch zoom in  | 30 | 10 to unlimited |
| zoomOutLimit | For how mouch zoom out | 9 | 1 to 10 |
| background | For background change | { value: '#0dcaf0', type: 'plainBackground' } | { value: 'red', type: 'plainBackground' } |
| loading | For loading animation | true | false |
| model | For Change model | '' | { url:  glb/gltf/fbx/obj model url, extension: glb/gltf/fbx/obj } |

---
_Source: https://npm.io/package/open-react-3d-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._