
React-Markerless-Ar-Rendering-Component
React-Markerless-Ar is a React-based library for rendering 3D models in a markerless AR
CowTheGreat
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Links
Newsletter
Stay Updated with Three.js Resources!
- Weekly curated Three.js resources and tools.
No spam, unsubscribe at any time.
Description
# React-Markerless-Ar
React-Markerless-Ar is a React-based library for rendering 3D models in a markerless augmented reality environment. It provides two main components: ModelViewer
and AnimationViewer
, which allow you to display static and animated 3D models, respectively.
This library was created by CowTheGreat and is now open source, allowing the community to contribute and improve it.
---
## Installation
Install the package via npm:
```bash
npm install @cow-the-great/react-markerless-ar
```
---
## Components
### 1. ModelViewer
The ModelViewer
component is used to render static 3D models.
#### Props
| Prop Name | Type | Default Value | Description |
| ----------------- | ------------------ | -------------- | ---------------------------------------------------------------- |
| modelPath
| string
| Required | Path to the 3D model file (e.g., .glb
or .gltf
). |
| width
| string \| number
| "100%"
| Width of the viewer container. |
| height
| string \| number
| "400px"
| Height of the viewer container. |
| cameraProps
| object
| {}
| Camera configuration (position, fov, near, far). |
| lightingProps
| object
| {}
| Lighting configuration (ambient and directional light settings). |
| modelProps
| object
| {}
| Model configuration (scale and position). |
| controlsProps
| object
| {}
| OrbitControls configuration (zoom, pan, rotate, etc.). |
| backgroundProps
| object
| {}
| Background configuration (camera feed, plane size, etc.). |
| id
| string
| Auto-generated | Unique identifier for the viewer instance. |
---
### 2. AnimationViewer
The AnimationViewer
component is used to render animated 3D models.
#### Props
| Prop Name | Type | Default Value | Description |
| ----------------- | ------------------ | ------------- | ---------------------------------------------------------------- |
| modelPath
| string
| Required | Path to the animated 3D model file (e.g., .glb
or .gltf
). |
| width
| string \| number
| "100%"
| Width of the viewer container. |
| height
| string \| number
| "400px"
| Height of the viewer container. |
| cameraProps
| object
| {}
| Camera configuration (position, fov, near, far). |
| lightingProps
| object
| {}
| Lighting configuration (ambient and directional light settings). |
| modelProps
| object
| {}
| Model configuration (scale and position). |
| controlsProps
| object
| {}
| OrbitControls configuration (zoom, pan, rotate, etc.). |
| backgroundProps
| object
| {}
| Background configuration (camera feed, plane size, etc.). |
---
## Usage
Here is an example of how to use the components:
```tsx
import React from "react";
import {
ModelViewer,
AnimationViewer,
} from "@cow-the-great/react-markerless-ar";
function App() {
return (
<>
<AnimationViewer
modelPath="animated_model.glb"
width="100vw"
height="100vh"
cameraProps={{
position: [0, 2, 5],
fov: 60,
}}
lightingProps={{
ambientLightIntensity: 0.8,
directionalLightPosition: [5, 5, 5],
}}
modelProps={{
scale: 2,
position: [0, 0, 0],
}}
backgroundProps={{
enableCamera: true,
planeSize: 30,
}}
/>
<ModelViewer
modelPath="static_model.glb"
width="700px"
height="600px"
cameraProps={{
position: [0, 2, 7],
fov: 45,
}}
lightingProps={{
ambientLightIntensity: 0.8,
directionalLightPosition: [5, 5, 5],
}}
modelProps={{
scale: 2.0,
position: [0, -1.5, 0],
}}
controlsProps={{
enableZoom: true,
zoomSpeed: 1.0,
}}
backgroundProps={{
enableCamera: true,
planeSize: 25,
}}
/>
</>
);
}
export default App;
```
---
## Contributing
Contributions are welcome! If you'd like to contribute:
1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes and commit them with clear messages.
4. Submit a pull request.
Please ensure your code follows the project's coding standards and includes relevant tests.
---
## License
This project is licensed under the MIT License.
---
## Author
This library was created by CowTheGreat. If you have any questions or suggestions, feel free to reach out or open an issue on the repository.