LEMingTinyViewer
This project created for easy displaying 3D scenes in React applications using three.js
Installation and Usage (CLI)
npm install tiny-viewer
The Viewer can be imported like this:
import {Viewer} from 'tiny-viewer';and then used as a JSX element in a React application:
const SmallPreview = () => {
const modelUrl = './data/banana.glb'; // A url to a local or remote file
const object3D = viewerUtils.loadGLB(modelUrl) // A promise of object3D
return (
<div className="small-preview-wrapper">
<Viewer object3D={object3D}/>
</div>
)
}The component takes all available space inside a wrapper and adjusts the Renderer with resize. It should be placed inside a wrapper with defined size.
.small-preview-wrapper {
width: 1080px;
height: 610px;
}Extra properties
The Viewer includes several optional properties for controlling the scene:
<Viewer
animationRunner={animationRunner}
dispatchers={{setScene}}
object3D={object3D}
onSceneReady={onSceneReady}
options={options}/>The animationRunner is a function for animation loop.
The object3D is a promise of THREE.Object3D.
Dispatchers allow you to get access to internal objects, such as Scene, Camera, Controls and Renderer
For example, you can define a state in your app and pass the setScene to dispatchers to set the scene
const [scene, setScene] = useState<THREE.Scene | null>(null);
onSceneReady is a simple flag that will be set to true when everything is loaded and ready to be displayed.
options allow us to use some pre-defined features, such as default light and helpers.
export const DEFAULT_VIEWER_OPTIONS: ViewerOptions = {
addDefaultHelpers: true,
addDefaultLight: true,
environment: DEFAULT_ENVIRONMENT,
}environment is a TypeScript object that defines the default options for an "Environment" in the 3D Scene.
The
clientHeightandclientWidthproperties specify the dimensions of the environment in pixels.The
lightOptionsobject contains properties for configuring the lighting in the environment:lightIntensityis a number that specifies the intensity of the light,skyColoris a hexadecimal color code that specifies the color of the sky,groundColoris a hexadecimal color code that specifies the color of the ground.
The
sceneOptionsobject contains properties for configuring the scene:fogis an object with properties for configuring fog in the scene,sceneColoris a hexadecimal color code that specifies the overall color of the scene,envMapUrlis a string that specifies the URL of a high dynamic range (HDR) image to use as an environment map for the scene.