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

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:

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 } |