@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

npm install @ntalmagor/3drize

Or using yarn:

yarn add @ntalmagor/3drize

Peer Dependencies

Make sure you have React installed:

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

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

<ProjectLoader 
  projectId='your-project-id'
  onObjectClick={(object) => {
    console.log('Clicked:', object.id);
  }}
/>

Dependencies

This package is built on top of:

• Three.js - 3D graphics library
• @react-three/fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for react-three-fiber
• @react-three/rapier - Physics engine integration
• 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.

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.

Author

3drise

Built with ❤️ using Three.js and React Three Fiber