npm package: @ntalmagor/3drize
Description: A framework-agnostic 3D scene builder library for creating interactive 3D scenes from configuration objects. Works with React, Vue, Angular, Svelte, or vanilla JavaScript.
Author: 3drise
Latest version: 2.0.25

# @ntalmagor/3drize

A framework-agnostic 3D scene builder library for creating interactive 3D scenes from configuration objects. Works with React, Vue, Angular, Svelte, or vanilla JavaScript.

## Installation

```bash
npm install @ntalmagor/3drize
```

Or using yarn:

```bash
yarn add @ntalmagor/3drize
```

## Peer Dependencies

Make sure you have React installed:

```bash
npm install react react-dom
```

## Features

- 🎨 **Framework-agnostic** - Works with React
- 🎮 **Interactive 3D Scenes** - Create rich, interactive 3D experiences
- 📦 **Configuration-based** - Build scenes from simple configuration objects
- ⚡ **Built on Three.js** - Leverages the power of Three.js ecosystem
- 🎭 **Animation Support** - Powered by GSAP for smooth animations
- 🎯 **Physics Ready** - Integrated with Rapier physics engine
- 📱 **Responsive** - Adapts to any screen size

## Quick Start

```jsx
import { ProjectLoader } from '@ntalmagor/3drize';

function App() {
  return (
    <div style={{ 
        width: '100vw', 
        height: '100vh',
        display: 'flex',
        flexDirection: 'row',
      }}
    >
      <ProjectLoader 
        projectId='<project-id>'
        onObjectClick={(object) => {
          console.log('Clicked object:', object.id, object);
        }}
      />
    </div>
  );  
}
```

## API Reference

### ProjectLoader

The main component for loading and rendering 3D projects.

#### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `projectId` | `string` | Yes | Unique identifier for the project to load |
| `onObjectClick` | `(object: Object3D) => void` | No | Callback function triggered when an object in the scene is clicked |

#### Example with Event Handlers

```jsx
<ProjectLoader 
  projectId='your-project-id'
  onObjectClick={(object) => {
    console.log('Clicked:', object.id);
  }}
/>
```

## Dependencies

This package is built on top of:

- [Three.js](https://threejs.org/) - 3D graphics library
- [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber) - React renderer for Three.js
- [@react-three/drei](https://github.com/pmndrs/drei) - Useful helpers for react-three-fiber
- [@react-three/rapier](https://github.com/pmndrs/react-three-rapier) - Physics engine integration
- [GSAP](https://greensock.com/gsap/) - Animation library

## Browser Support

Works in all modern browsers that support WebGL:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## TypeScript Support

This package includes TypeScript definitions out of the box.

```typescript
import { ProjectLoader } from '@ntalmagor/3drize';
import type { Object3D } from 'three';

const handleClick = (object: Object3D) => {
  console.log('Clicked object:', object.id);
};
```

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Issues

If you encounter any issues, please report them at [GitHub Issues](https://github.com/your-username/3drize-builder/issues).

## Author

3drise

---

Built with ❤️ using Three.js and React Three Fiber