Open-Viewer

A 3D Model Viewer component library built to make prototyping with react-three faster

Story book documentation

• View online documentation built with Storybook here

Getting Started: Install with npm

• Install the package using NPM

• Link to NPM Package

npm i @s-brand5163/open-viewer

Getting Started: Dev Enviroment

• Clone Project

  git clone 

• CD into repo and install dependencies

  cd ./open-viewer
  npm i

• Start dev server

  npm run dev

Basic usage:

import {OpenViewer} from 'open-viewer';

Index

Controls:

Base Controls

Creates a Perspective Camera with Camera-Controls from Drei to give a basic controls set up. Double click to reset, re-centers on drag, auto rotate, and auto center.

type CameraControlsProps = {
    model: modelRefType; // required
    sceneCanvas: sceneEleType; // required
    camera?: PerspectiveCamera | OrthographicCamera;
    domElement?: HTMLElement;
    cameraOrbit?: boolean;
    cameraOrbitSpeed?: number;
    makeDefault?: boolean;
    disableZoom?: boolean;
    minZoom?: number;
    maxZoom?: number;
    onStart?: (e?: { type: "controlstart" }) => void;
    onEnd?: (e?: { type: "controlend" }) => void;
    onChange?: (e?: { type: "update" }) => void;
};

Default set up:

  <Controls
      model={modelRef} // required
      sceneCanvas={sceneEle} // required
      disableZoom={disable_zoom}
      minZoom={min_zoom}
      maxZoom={max_zoom}
      cameraOrbit={camera_orbit}
  />

Staging:

Open Viewer

Creates a 3D scene with a camera, lighting and controls to interact with the scene. Objects are centered, and shadows are preconfigured. Env maps, camera zoom, and camera position are configurable.

    type Props = {
      model_url: string;
      camera_controls?: boolean;
      camera_orbit?: boolean;
      camera_orbit_speed?: number;
      disable_zoom?: boolean;
      min_zoom?: number;
      max_zoom?: number;
      skybox?: string | Array<string>;
      bgColor?: string;
      initialCameraPosition?: [number, number, number];
    };

Default set up with only model url provided:

<OpenViewer model_url={'MODEL_URL'} />

For a more custom approach with a coloured background and updated camera position:

<OpenViewer 
  model_url={'MODEL_URL'}
  bgColor={'skyblue'}
  camera_orbit
  initialCameraPosition={[5, 10, 15]}
/>

Misc: