{"_id":"3drenderer","_rev":"9-ca07063ce358fa4776038e8067e7123a","name":"3drenderer","dist-tags":{"latest":"1.5.0"},"versions":{"1.1.0":{"name":"3drenderer","version":"1.1.0","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.1.0","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"dist":{"shasum":"cf3dc0576bb03398a4ea945da527487740978046","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.1.0.tgz","fileCount":4,"integrity":"sha512-rVd5/95u0sUeTtAsa2M1qEzEO0mu1gWoh+Te3V9R1lU/N6ToyoNewoq4BtuSYjPoi52PmRyRsdIhl81I+J5cUA==","signatures":[{"sig":"MEUCIQDKzNONybUlEZ1LESOrNSjVExP5GpSA/5zHXv2IdtZFGgIgF2H9OZUcmG22mxp9qTFWJPxMBCgQozmhMnt8CFQlVa8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8290},"main":"ModelsRenderer.jsx","type":"module","exports":{".":"./ModelsRenderer.jsx"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js. Render GLTF/GLB models with interactive controls, lighting, camera adjustments, and responsive design.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"leva":"^0.9.0","@react-three/drei":"^9.0.0","@react-three/fiber":"^8.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","three":"^r128.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.1.0_1763486684508_0.8175901649866784","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"3drenderer","version":"1.2.0","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.2.0","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"dist":{"shasum":"71a5b2cdfdac384dd711137736c846e50aaf24c7","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.2.0.tgz","fileCount":4,"integrity":"sha512-zGBKvK8YVle/a4vBNHiOCvMGPU0juDgsrIE+NIK3cWt6LYvncTokSJhpfOFUso2sGpZIr0J62Q+37QBAA1TCKg==","signatures":[{"sig":"MEUCIQCaPQ1gFQgUWUNhll+hu7X1Z2LXn9LRYk9iJ5PnCjBF/AIgcqoxeEMHewEKsF5DD1njzx5agv/brpJ0s86Tf12XpWs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13842},"main":"ModelsRenderer.jsx","type":"module","exports":{".":"./ModelsRenderer.jsx"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js and React Three Fiber. Features 20+ interactive controls for camera, lights (with position), rotation speeds (X/Y/Z), model transforms, and responsive mobile design with automatic state p","directories":{},"_nodeVersion":"23.7.0","dependencies":{"leva":"^0.9.0","@react-three/drei":"^9.0.0","@react-three/fiber":"^8.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","three":"^r128.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.2.0_1763497010547_0.001889196847816521","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"3drenderer","version":"1.3.0","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.3.0","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"bin":{"3drenderer-preview":"bin/preview.js"},"dist":{"shasum":"2660a3601b091643868aee1afc9be02e55665671","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.3.0.tgz","fileCount":4,"integrity":"sha512-+e9DhUZLI+aePV9eHu8J45K5x+7CygaoBv/JHMUPXowgvvCMk65iP5V+/Jb5r6Q43wYChBmKEBPLP4MngX8SlA==","signatures":[{"sig":"MEQCIFG1p8OR9ywBJUo5texwXDms6NVLEyZxpuvbvhBGhStaAiAZbqU+yycFzlzrUoBCfAzqUdSOh2cIixDBRtDuKRE9Sw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10691},"main":"ModelsRenderer.jsx","type":"module","exports":{".":"./ModelsRenderer.jsx"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js and React Three Fiber. Features 20+ interactive controls for camera, lights (with position), rotation speeds (X/Y/Z), model transforms, and responsive mobile design with automatic state p","directories":{},"_nodeVersion":"23.7.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"leva":"*","react":"*","three":"*","react-dom":"*","@react-three/drei":"*","@react-three/fiber":"*"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.3.0_1763498839870_0.7950148945003075","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"3drenderer","version":"1.3.1","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.3.1","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"dist":{"shasum":"0a733bad27ecb5591d149d60c1da9f4bdd9978fb","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.3.1.tgz","fileCount":4,"integrity":"sha512-sqx8b2Y29Do83Hm4xt/DcpanZ9KR+JWA1YCsDXO8uxy+5xfbFiyhvjXUiOETvWngtLDF4n9Rh51vWn8upvhWjw==","signatures":[{"sig":"MEUCIQDcrzggPeYS34qwCFOvZnopIEr/hKYi9dr/Pi7whxQ7mwIgT/rPYAfxJ+cg+NoNvOD3x0yQnqYo8uOqUcNtd00ERW4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4238524},"main":"dist/index.js","type":"module","exports":{".":"./dist/index.js"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"esbuild ModelsRenderer.jsx --bundle --platform=browser --format=esm --outfile=dist/index.js","prepare":"npm run build"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js and React Three Fiber. Features 20+ interactive controls for camera, lights (with position), rotation speeds (X/Y/Z), model transforms, and responsive mobile design with automatic state p","directories":{},"_nodeVersion":"23.7.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.27.0"},"peerDependencies":{"leva":"^0.9.0","react":"^18.0.0","three":"^0.152.0","react-dom":"^18.0.0","@react-three/drei":"^9.0.0","@react-three/fiber":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.3.1_1763499604716_0.6250672456595767","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"3drenderer","version":"1.4.0","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.4.0","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"dist":{"shasum":"3bb374b09199120084f9aba8b75bcbbdd3238566","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.4.0.tgz","fileCount":4,"integrity":"sha512-9xA07/l6Z1QcNTbfIvV/NhdujV7PM/YKtax5J4omxwWpupv3ORDRrgSRAsQc32YGYjx60KCht6uHUVKg40VMBA==","signatures":[{"sig":"MEYCIQCpPsJh8CHv/eSwfJ/KyqGF3/S4EFKbLcywdhXO5+vbyAIhAPecpozgkyeMpEaqvaDOEfulNrIDJMaryMg8ACIIvBju","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14783},"main":"ModelsRenderer.jsx","type":"module","exports":{".":"./ModelsRenderer.jsx"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js. Render GLTF/GLB models with interactive controls, lighting, camera adjustments, and responsive design.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"leva":"^0.9.0","@react-three/drei":"^9.0.0","@react-three/fiber":"^8.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","three":"^r128.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.4.0_1763500970447_0.9427510356722197","host":"s3://npm-registry-packages-npm-production"}},"1.4.1":{"name":"3drenderer","version":"1.4.1","keywords":["3d","react","three.js","renderer","model-viewer","gltf"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","_id":"3drenderer@1.4.1","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"bin":{"3drenderer-preview":"bin/preview.js"},"dist":{"shasum":"b5b30352cba4c6c864cf74ea6492ac01b4088df5","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.4.1.tgz","fileCount":4,"integrity":"sha512-XUNdV/91kMeFGMl2XeGye8R+NQhCTYtPg3XVykG3zXr7Eya6/unAnyinM3TuBX6ZXlyDAQ1Ndap5em6RKCxuwQ==","signatures":[{"sig":"MEQCIFjzK/sK09g+f54QKQ1/fm/tSrcpTvNsBe3a8qIfom8sAiAOxNtrGjjhBTvqnaon48TNU1xkdpFsbOCVKp8VPzOY5A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14930},"main":"ModelsRenderer.jsx","type":"module","exports":{".":"./ModelsRenderer.jsx"},"gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"repository":{"url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git","type":"git"},"_npmVersion":"10.9.2","description":"A professional 3D model renderer component for React using Three.js and React Three Fiber. Features 20+ interactive controls for camera, lights (with position), rotation speeds (X/Y/Z), model transforms, and responsive mobile design with automatic state p","directories":{},"_nodeVersion":"23.7.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"leva":"*","react":"*","three":"*","react-dom":"*","@react-three/drei":"*","@react-three/fiber":"*"},"_npmOperationalInternal":{"tmp":"tmp/3drenderer_1.4.1_1763501082130_0.8095968963004005","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"private":false,"name":"3drenderer","version":"1.5.0","type":"module","main":"ModelsRenderer.jsx","bin":{"3drenderer":"cli.mjs"},"exports":{".":"./ModelsRenderer.jsx"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["3d","react","three.js","renderer","model-viewer","gltf","cli"],"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","description":"A professional 3D model renderer component for React using Three.js. Render GLTF/GLB models with interactive controls, lighting, camera adjustments, and responsive design.","repository":{"type":"git","url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git"},"homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","peerDependencies":{"react":"*","react-dom":"*","three":"*"},"dependencies":{"@react-three/fiber":"*","@react-three/drei":"*","leva":"*","commander":"^12.0.0","inquirer":"^9.2.0","chalk":"^5.3.0"},"_id":"3drenderer@1.5.0","gitHead":"4a5c2b7094548a0efa9ee09e920b827554237eb1","bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"_nodeVersion":"23.7.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-7LqJaEVK7PqMgkiu1pH+3l5VKcoj3MkVm5PifeF90EbPk0L6jGhTpxTWEx087dZg5z7nFoXteogIHbUltKpmfw==","shasum":"976203619ea5f87ed13a9af923278f7dfa3a2dca","tarball":"https://registry.npmjs.org/3drenderer/-/3drenderer-1.5.0.tgz","fileCount":5,"unpackedSize":20252,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCT1+Mh/rdzsfVyRtbmnbkVfg7sbLr7QSVH8KxHxLJ9nAIgLt4RepfK13BaixtQ/Knar1mKG+lBJw9VYHyTeGmyKFI="}]},"_npmUser":{"name":"eng-hema","email":"hshaabrahym36@gmail.com"},"directories":{},"maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3drenderer_1.5.0_1763503121936_0.2467570354734845"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-18T17:24:44.507Z","modified":"2025-11-18T21:58:42.376Z","1.0.0":"2025-11-16T01:04:51.199Z","1.1.0":"2025-11-18T17:24:44.689Z","1.2.0":"2025-11-18T20:16:50.778Z","1.3.0":"2025-11-18T20:47:20.094Z","1.3.1":"2025-11-18T21:00:04.980Z","1.4.0":"2025-11-18T21:22:50.682Z","1.4.1":"2025-11-18T21:24:42.329Z","1.5.0":"2025-11-18T21:58:42.153Z"},"bugs":{"url":"https://github.com/HEMA-HEMDAN/3drenderer/issues"},"author":{"name":"hema hemdan","email":"contact@ibrahim-hemdan.com"},"license":"MIT","homepage":"https://github.com/HEMA-HEMDAN/3drenderer#readme","keywords":["3d","react","three.js","renderer","model-viewer","gltf","cli"],"repository":{"type":"git","url":"git+https://github.com/HEMA-HEMDAN/3drenderer.git"},"description":"A professional 3D model renderer component for React using Three.js. Render GLTF/GLB models with interactive controls, lighting, camera adjustments, and responsive design.","maintainers":[{"name":"eng-hema","email":"hshaabrahym36@gmail.com"}],"readme":"# 3D Renderer\r\n\r\nA professional React component for rendering and interacting with 3D GLTF/GLB models using Three.js and React Three Fiber. Features 20+ interactive controls for camera, lights, model transforms, and automatic rotation speeds.\r\n\r\n## Features\r\n\r\n- 🎨 **Interactive 3D Model Viewer** – Render and manipulate GLTF/GLB models with real-time feedback\r\n- 🎮 **20+ Live Controls** – Adjust camera, lights, position, rotation, scale, and rotation speeds via Leva UI\r\n- 📱 **Mobile Responsive** – Auto-detects mobile and disables orbit controls for better UX\r\n- 💡 **Advanced Lighting** – Ambient, directional (with position control), and hemisphere lights\r\n- 🔄 **Per-Axis Rotation** – Independent control over X, Y, Z rotation speeds for dynamic presentations\r\n- 🌍 **Environment Presets** – City environment lighting for realistic renders\r\n- ✨ **Smooth Animations** – Float animation with configurable intensity\r\n- 💾 **State Persistence** – Save/restore control states via the `model` object\r\n- 🚀 **Zero-Config Ready** – Works out-of-the-box with sensible defaults\r\n- 🛠️ **Easy Setup** – Simple CLI tool to add component to your project\r\n\r\n## Installation\r\n\r\n### Quick Setup (Recommended)\r\n\r\nUse npx to add the component to your project:\r\n\r\n```bash\r\nnpx 3drenderer init\r\n```\r\n\r\nThis will copy `ModelsRenderer.jsx` to your current directory.\r\n\r\n**Options:**\r\n\r\n- `npx 3drenderer init -y` – Skip confirmation prompts\r\n- `npx 3drenderer init --output ./src/components` – Install to custom path\r\n\r\n### Manual Installation\r\n\r\nIf you prefer to install as a dependency:\r\n\r\n```bash\r\nnpm install 3drenderer\r\n```\r\n\r\nYou'll also need to install the peer dependencies:\r\n\r\n```bash\r\nnpm install react react-dom three @react-three/fiber @react-three/drei leva\r\n```\r\n\r\n## Quick Start\r\n\r\nAfter running `npx 3drenderer init`, import and use the component:\r\n\r\n```jsx\r\nimport ModelRenderer from \"./ModelsRenderer\";\r\n\r\nexport default function App() {\r\n  const model = {\r\n    modelPath: \"/models/my-model.glb\",\r\n    editable: true, // Shows the Leva control panel\r\n  };\r\n\r\n  return <ModelRenderer model={model} />;\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### `model` (required)\r\n\r\nAn object controlling the component state. Properties:\r\n\r\n| Property                              | Type    | Default    | Description                                           |\r\n| ------------------------------------- | ------- | ---------- | ----------------------------------------------------- |\r\n| `modelPath`                           | string  | —          | **Required.** Path or URL to your GLTF/GLB model file |\r\n| `editable`                            | boolean | false      | Show/hide the Leva control panel                      |\r\n| `camX`, `camY`, `camZ`                | number  | 0, 0, 25   | Camera position                                       |\r\n| `fov`                                 | number  | 75         | Camera field of view (degrees)                        |\r\n| `ambientIntensity`                    | number  | 0.2        | Ambient light strength                                |\r\n| `dirIntensity`                        | number  | 0.9        | Directional light strength                            |\r\n| `hemiIntensity`                       | number  | 0.2        | Hemisphere light strength                             |\r\n| `lightX`, `lightY`, `lightZ`          | number  | 10, 15, 10 | Directional light position                            |\r\n| `posX`, `posY`, `posZ`                | number  | 0, 0, 0    | Model position                                        |\r\n| `rotX`, `rotY`, `rotZ`                | number  | 0, 0, 0    | Model rotation (radians)                              |\r\n| `scale`                               | number  | 1          | Model scale factor                                    |\r\n| `rotSpeedX`, `rotSpeedY`, `rotSpeedZ` | number  | 0, 0.01, 0 | Automatic rotation speed per axis                     |\r\n\r\n## Leva Control Panels\r\n\r\nWhen `model.editable` is `true`, the component shows interactive Leva panels:\r\n\r\n### Camera Panel\r\n\r\n- **camX, camY, camZ** (-50 to 50): Adjust camera position\r\n- **fov** (20 to 100): Adjust field of view\r\n\r\n### Lights Panel\r\n\r\n- **ambientIntensity** (0 to 5): Background light\r\n- **dirIntensity** (0 to 5): Main directional light\r\n- **hemiIntensity** (0 to 5): Sky/ground light\r\n\r\n### Light Position Panel\r\n\r\n- **lightX, lightY, lightZ** (-50 to 50): Position of the directional light\r\n\r\n### Model Panel\r\n\r\n- **posX, posY, posZ** (-10 to 10): Model position\r\n- **rotX, rotY, rotZ** (-π to π): Model rotation\r\n- **scale** (0.1 to 5): Model size\r\n\r\n### Rotation Speed Panel\r\n\r\n- **rotSpeedX, rotSpeedY, rotSpeedZ** (-0.1 to 0.1): Auto-rotation per axis\r\n\r\n## Advanced Usage\r\n\r\n### State Persistence\r\n\r\nControl values are synced back to the `model` object. Save them:\r\n\r\n```jsx\r\nconst model = { modelPath: \"/model.glb\", editable: true };\r\n\r\n// ... user adjusts controls ...\r\n\r\n// Save state\r\nconst savedState = JSON.stringify(model);\r\nlocalStorage.setItem(\"modelState\", savedState);\r\n\r\n// Restore state\r\nconst restored = JSON.parse(localStorage.getItem(\"modelState\"));\r\n<ModelRenderer model={restored} />;\r\n```\r\n\r\n### Dynamic Model Loading\r\n\r\n```jsx\r\nconst [modelPath, setModelPath] = useState(\"/models/default.glb\");\r\n\r\nreturn (\r\n  <>\r\n    <select onChange={(e) => setModelPath(e.target.value)}>\r\n      <option value=\"/models/car.glb\">Car</option>\r\n      <option value=\"/models/house.glb\">House</option>\r\n    </select>\r\n    <ModelRenderer model={{ modelPath, editable: true }} />\r\n  </>\r\n);\r\n```\r\n\r\n## Performance Tips\r\n\r\n- **Large Models**: Use optimized GLTF files (draco compression recommended)\r\n- **Mobile**: The component auto-disables orbit controls on small screens; consider limiting update frequency\r\n- **State Updates**: The `model` object is synced in a `useEffect`; avoid creating new objects every render\r\n- **Lighting**: Simplify light count for better performance on low-end devices\r\n\r\n## Browser Support\r\n\r\n- Chrome/Edge: ✅ (WebGL 2.0+)\r\n- Firefox: ✅ (WebGL 2.0+)\r\n- Safari: ✅ (WebGL 2.0+)\r\n- Mobile browsers: ✅ (WebGL 2.0+, with responsive optimizations)\r\n\r\n## CLI Commands\r\n\r\n```bash\r\n# Initialize component in your project\r\nnpx 3drenderer init\r\n\r\n# Skip confirmation prompts\r\nnpx 3drenderer init -y\r\n\r\n# Install to custom directory\r\nnpx 3drenderer init --output ./src/components\r\n\r\n# Show help\r\nnpx 3drenderer --help\r\n```\r\n\r\n## License\r\n\r\nMIT – See [LICENSE](./LICENSE) for details\r\n\r\n## Author\r\n\r\nhema hemdan <contact@ibrahim-hemdan.com>\r\n\r\n## Repository\r\n\r\nhttps://github.com/HEMA-HEMDAN/3drenderer\r\n\r\n## Issues & Support\r\n\r\nFound a bug? Have a feature request?  \r\nPlease open an issue: https://github.com/HEMA-HEMDAN/3drenderer/issue\r\n","readmeFilename":"README.md"}