threedviewer 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/dist/SimpleViewer.d.ts +7 -0
- package/dist/index.d.ts +2 -0
- package/dist/main.d.ts +1 -0
- package/dist/setupTests.d.ts +0 -0
- package/dist/simple-viewer.es.js +1112 -0
- package/dist/simple-viewer.umd.js +30 -0
- package/dist/simpleViewerUtils.d.ts +23 -0
- package/package.json +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# ThreeDViewer
|
|
2
|
+
|
|
3
|
+
ThreeDViewer is a React component library for easily integrating Three.js-based 3D viewers into your web applications. It provides a simple and customizable way to display and interact with 3D objects in your React projects.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Easy integration with React applications
|
|
8
|
+
- Customizable viewer settings
|
|
9
|
+
- Support for various 3D object formats
|
|
10
|
+
- Built-in camera controls
|
|
11
|
+
- Responsive design
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
To install ThreeDViewer, run the following command in your project directory:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install threedviewer
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
or if you're using yarn:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add threedviewer
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
Here's a basic example of how to use the SimpleViewer component:
|
|
30
|
+
|
|
31
|
+
```jsx
|
|
32
|
+
import React from 'react';
|
|
33
|
+
import { SimpleViewer } from 'threedviewer';
|
|
34
|
+
import * as THREE from 'three';
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
// Create a simple cube
|
|
38
|
+
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
39
|
+
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
|
40
|
+
const cube = new THREE.Mesh(geometry, material);
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div style={{ width: '100%', height: '400px' }}>
|
|
44
|
+
<SimpleViewer object={cube} />
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export default App;
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## API
|
|
53
|
+
|
|
54
|
+
### SimpleViewer
|
|
55
|
+
|
|
56
|
+
The main component for displaying 3D objects.
|
|
57
|
+
|
|
58
|
+
Props:
|
|
59
|
+
- `object` (required): A Three.js Object3D to be displayed in the viewer.
|
|
60
|
+
|
|
61
|
+
## Development
|
|
62
|
+
|
|
63
|
+
To set up the project for development:
|
|
64
|
+
|
|
65
|
+
1. Clone the repository:
|
|
66
|
+
```
|
|
67
|
+
git clone https://github.com/your-username/ThreeDViewer.git
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
2. Install dependencies:
|
|
71
|
+
```
|
|
72
|
+
cd ThreeDViewer
|
|
73
|
+
npm install
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
3. Run the development server:
|
|
77
|
+
```
|
|
78
|
+
npm run dev
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
4. Build the project:
|
|
82
|
+
```
|
|
83
|
+
npm run build
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Testing
|
|
87
|
+
|
|
88
|
+
Run the test suite with:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npm test
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Contributing
|
|
95
|
+
|
|
96
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
101
|
+
|
|
102
|
+
## Acknowledgments
|
|
103
|
+
|
|
104
|
+
- Three.js for providing the 3D rendering capabilities
|
|
105
|
+
- React for the component-based architecture
|
package/dist/index.d.ts
ADDED
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
File without changes
|