# react-3d-model-component > React component to view a single 3D model in STL format using three.js Latest version **1.1.3** (published 2022-12-08) · MIT license · 0 weekly downloads ## Install ```sh npm install react-3d-model-component pnpm add react-3d-model-component yarn add react-3d-model-component bun add react-3d-model-component ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.3 | | Published | 2022-12-08 | | First published | 2022-11-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 12.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Maintainers | thomasjuhoonkim | | Keywords | react, components, threejs, stl | ## Links - npm: https://www.npmjs.com/package/react-3d-model-component - Repository: https://github.com/thomasjuhoonkim/react-3d-model-component - Homepage: https://github.com/thomasjuhoonkim/react-3d-model-component#readme - Issues: https://github.com/thomasjuhoonkim/react-3d-model-component/issues - npm.io page: https://npm.io/package/react-3d-model-component ## Dependencies (9) - [gsap](https://npm.io/package/gsap.md) ^3.11.3 - [react](https://npm.io/package/react.md) ^18.2.0 - [three](https://npm.io/package/three.md) ^0.146.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1 - [@react-three/drei](https://npm.io/package/@react-three/drei.md) ^9.40.0 - [@react-three/fiber](https://npm.io/package/@react-three/fiber.md) ^8.9.1 - [react-3d-model-component](https://npm.io/package/react-3d-model-component.md) ^0.1.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.3 (latest) — 2022-12-08 - 1.1.2 — 2022-11-09 - 1.1.1 — 2022-11-09 - 1.1.0 — 2022-11-09 - 1.0.0 — 2022-11-09 - 0.1.4 — 2022-11-09 - 0.1.3 — 2022-11-09 - 0.1.2 — 2022-11-09 - 0.1.1 — 2022-11-09 - 0.1.0 — 2022-11-09 ## README # react-3d-model-component [![](https://img.shields.io/npm/v/react-3d-model-component.svg)](https://www.npmjs.com/package/react-3d-model-component) A react component to view a single 3D model in STL format using three.js. ### [Check it out here!](https://react-3d-model-component.firebaseapp.com/) ## 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 ```bash npm i react-3d-model-component ``` Use `ModelViewer` component ```bash 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 | --- _Source: https://npm.io/package/react-3d-model-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._