react-3d-model-component

A react component to view a single 3D model in STL format using three.js.

Check it out here!

Features

The 3D model viewer has a lot of configurations!

• Unlimited point lights and directional lights
• Full camera positioning customization
• Built-in object inspector
• Built-in auto-rotation
• Single React component

Usage

Install react-3d-model-component through npm

npm i react-3d-model-component

Use ModelViewer component

import ModelViewer from "react-3d-model-component";

Properties

| Property | Type | Default | Description | | :-------------------- | :------------------ | :------------------- | :--------------------------------------------------------------------------------- | | url | string | none | The url of the STL file, can also be a URL object | | width | string | "1000px" | The width of the canvas | | height | string | "500px" | The height of the canvas | | backgroundColor | string | "lightgray" | The canvas color | | color | string | "lightblue" | The object color | | objectPosition | integer array | [0, 0, 0] | The position of the object [x, y, z] | | initObjectRotation | integer array | [-MATH.pi / 2, 0, 0] | The initial rotation of the object | | rotate | boolean | true | Object auto-rotation | | rotationSpeeds | integer array | [0, 0, 0.005] | Object auto-rotation speeds [x, y, z] | | cameraPosition | array | [100, 100, 100] | Camera position | | fov | integer | 30 | Field of view | | returnCamera | boolean | true | Return camera on orbit controls camera movement | | pointLights | integer array array | [[100, 100, 100]] | Array of arrays where each sub-array is the coordinates for the point lights | | directionalLights | integer array array | [] | Array of arrays where each sub-array is the coordinates for the directional lights | | ambientLightIntensity | float | 0.3 | Intensity of ambient light | | axes | boolean | false | Show threejs AxesHelper |