{"_id":"3d-cube-loader","_rev":"4-b7643c2b69307a7b466bf38f7788a8d4","name":"3d-cube-loader","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"3d-cube-loader","version":"1.0.0","keywords":["3d","loader","cube","animation"],"author":{"url":"https://jaswantsoni.in","name":"Jaswant Soni"},"license":"ISC","_id":"3d-cube-loader@1.0.0","maintainers":[{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"}],"dist":{"shasum":"4a4027254b37d2a346f8a4915e2609bb760e2aef","tarball":"https://registry.npmjs.org/3d-cube-loader/-/3d-cube-loader-1.0.0.tgz","fileCount":3,"integrity":"sha512-6k0E5j7g/9A2fZjcX5eBsA3HDBabf4FxneJowxUiw/k8NQN8u4hOA3j4MlBbGP8ltj7ZM4B36loOEPLqSjJBiA==","signatures":[{"sig":"MEQCIC90wxprXlH8p0AJGnrIHbJFEy7pwSzuoizqfJ5DBtIqAiBmTxZpSS/hLmjbxCAclQr7fcUdvXx14Vhim7v/iM5U4Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6041},"main":"index.js","type":"module","gitHead":"bd3bfdae8b725d4c84361ac4ab04b4d9c870b9e4","_npmUser":{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"},"_npmVersion":"11.6.2","description":"A self-contained customizable 3D rotating cube loader.","directories":{},"_nodeVersion":"25.2.1","dependencies":{"three":"^0.170.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-cube-loader_1.0.0_1782226721787_0.07526407732817386","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"3d-cube-loader","version":"1.0.2","keywords":["3d","loader","cube","animation"],"author":{"url":"https://jaswantsoni.in","name":"Jaswant Soni"},"license":"ISC","_id":"3d-cube-loader@1.0.2","maintainers":[{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"}],"dist":{"shasum":"146223f64bd2976c259083dd806fe0f32b12c9eb","tarball":"https://registry.npmjs.org/3d-cube-loader/-/3d-cube-loader-1.0.2.tgz","fileCount":3,"integrity":"sha512-CxNPwwztJUEHElXzDTxXD1sTtbPI2n8J+4Kqf/S6hiIy21cHxBRP+q7RLKnCt5OWCsmOaB7vYFe0LDaChJmt7g==","signatures":[{"sig":"MEUCIAlhuJy8qPa/ikXPmvbJz7vWUPNos3/5ILmn5ncH1yQ9AiEAlKzV0G1OsAEOF1yzJeksbmHQsO8OTUVp8NTCLGy/GdU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6103},"main":"index.js","type":"module","exports":{".":"./index.js"},"gitHead":"bd3bfdae8b725d4c84361ac4ab04b4d9c870b9e4","_npmUser":{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"},"_npmVersion":"11.6.2","description":"A self-contained customizable 3D rotating cube loader.","directories":{},"_nodeVersion":"25.2.1","dependencies":{"three":"^0.170.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-cube-loader_1.0.2_1782227524932_0.30856132230610944","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"3d-cube-loader","version":"1.0.3","keywords":["3d","loader","cube","animation"],"author":{"url":"https://jaswantsoni.in","name":"Jaswant Soni"},"license":"ISC","_id":"3d-cube-loader@1.0.3","maintainers":[{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"}],"dist":{"shasum":"e01bfcc8d58561c506322b6fd57a2ff76a616306","tarball":"https://registry.npmjs.org/3d-cube-loader/-/3d-cube-loader-1.0.3.tgz","fileCount":3,"integrity":"sha512-LFULNVyDaHbtUY88pWfdUQaciLeq43l5FvhUpJT73Zcm+kmRlvMzzefh18RqQgUVHRDeqWL8mKK0MWwY7h5A3A==","signatures":[{"sig":"MEQCIBwBJLb8uAJqQGeIFl2VJphNE8A/KzYZczgkp8Aj2QFqAiBvJrRHJgJfpWz5q33gNBT1xrzS9txWOVbfFl7+SXMt2g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7942},"main":"index.js","type":"module","exports":{".":"./index.js"},"gitHead":"bd3bfdae8b725d4c84361ac4ab04b4d9c870b9e4","_npmUser":{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"},"_npmVersion":"11.6.2","description":"A self-contained customizable 3D rotating cube loader.","directories":{},"_nodeVersion":"25.2.1","dependencies":{"three":"^0.170.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-cube-loader_1.0.3_1782227711001_0.7870961608284521","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"3d-cube-loader","version":"1.0.4","description":"A self-contained customizable 3D rotating cube loader.","type":"module","main":"./index.js","module":"./index.js","exports":{".":{"import":"./index.js","default":"./index.js"}},"keywords":["3d","loader","cube","animation"],"author":{"name":"Jaswant Soni","url":"https://jaswantsoni.in"},"license":"ISC","dependencies":{"three":"^0.170.0"},"gitHead":"bd3bfdae8b725d4c84361ac4ab04b4d9c870b9e4","_id":"3d-cube-loader@1.0.4","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-YqY78VHhi7A6urvfy4/fea77H4VHH/bIkgoi5JqS8X1VyszBmZL5L02IGXm19EXLYkZsIuNDCUDRhhIU5hDMnw==","shasum":"d5008ba5a3cda2192d1b4ecdbd8988cda5db33fb","tarball":"https://registry.npmjs.org/3d-cube-loader/-/3d-cube-loader-1.0.4.tgz","fileCount":3,"unpackedSize":8005,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAd6rub4PMQA60gzmK22XGQWBDT60QyZiQVDVKDYkgwiAiBt0gWbIo7jyZ6d8uL6UkU6seE4oTedyWIReVoR2w4s6g=="}]},"_npmUser":{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"},"directories":{},"maintainers":[{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d-cube-loader_1.0.4_1782227878020_0.7982298840107684"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-23T14:58:41.693Z","modified":"2026-06-23T15:17:58.271Z","1.0.0":"2026-06-23T14:58:41.988Z","1.0.2":"2026-06-23T15:12:05.084Z","1.0.3":"2026-06-23T15:15:11.133Z","1.0.4":"2026-06-23T15:17:58.142Z"},"author":{"name":"Jaswant Soni","url":"https://jaswantsoni.in"},"license":"ISC","keywords":["3d","loader","cube","animation"],"description":"A self-contained customizable 3D rotating cube loader.","maintainers":[{"name":"jaswantsoni1812","email":"jaswantsoni1812@gmail.com"}],"readme":"# 3d-cube-loader\n\nA self-contained, customizable 3D rotating cube/dice loader built with Three.js. It features smooth rounded corners, dynamic speed adjustment on the X and Y axes, and on-the-fly texture updates.\n\nBy default, any cube face without an image URL renders in a sleek, matte black finish.\n\n## Features\n\n- 📦 **Zero-Configuration Setup:** `three` is automatically installed as a dependency—no project config updates needed!\n- 🔄 **Dynamic Controls:** Adjust rotation speed on both axes post-initialization.\n- 🖼️ **Live Swapping:** Dynamically update or add image textures to specific cube faces.\n- 🎨 **Sleek Aesthetics:** Rounded corners out-of-the-box via `RoundedBoxGeometry`.\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install 3d-cube-loader\n```\n\n## Quick Start (Vanilla JavaScript)\n\nEnsure you have a container element in your HTML:\n\n```html\n<div id=\"loader-container\"></div>\n```\n\nImport and initialize the loader in your JavaScript module:\n\n```javascript\nimport { RotatingDice } from \"3d-cube-loader\";\n\nconst container = document.getElementById(\"loader-container\");\n\n// Array of up to 6 image URLs corresponding to the cube faces:\n// [right(+x), left(-x), top(+y), bottom(-y), front(+z), back(-z)]\nconst faceImages = [\n  \"https://example.com\",\n  \"https://example.com\",\n  null, // Leave entries empty or null to keep them matte black\n  null,\n  \"https://example.com\",\n  \"https://example.com\"\n];\n\n// Initialize the loader\nconst loader = RotatingDice(container, faceImages, {\n  size: 400,       // Canvas dimensions (width and height in pixels)\n  speedX: 0.02,    // Initial rotation speed around the X-axis\n  speedY: 0.05,    // Initial rotation speed around the Y-axis\n  cornerRadius: 0.1 // Roundness of the cube edges (0 for sharp edges)\n});\n```\n\n---\n\n## Usage in React / TypeScript\n\nFor frameworks like React (Vite, Next.js, etc.), use this fully responsive, reactive wrapper component. It dynamically updates speed and textures on-the-fly without flickering or recreating the canvas.\n\nCreate a component named `CubeLoader.tsx`:\n\n```typescript\nimport { useEffect, useRef } from 'react';\nimport { RotatingDice } from '3d-cube-loader';\n\ninterface CubeLoaderProps {\n  size?: number;\n  speedX?: number;\n  speedY?: number;\n  cornerRadius?: number;\n  faceImages?: (string | null)[];\n}\n\nexport default function CubeLoader({\n  size = 120,\n  speedX = 0.01,\n  speedY = 0.02,\n  cornerRadius = 0.15,\n  faceImages = [],\n}: CubeLoaderProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<ReturnType<typeof RotatingDice> | null>(null);\n\n  // Core scene initialization\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const instance = RotatingDice(container, faceImages, { \n      size, \n      speedX, \n      speedY, \n      cornerRadius \n    });\n    \n    instanceRef.current = instance;\n\n    return () => {\n      if (instanceRef.current) {\n        instanceRef.current.destroy();\n        instanceRef.current = null;\n      }\n      container.innerHTML = '';\n    };\n  }, [size, cornerRadius]);\n\n  // Push dynamic speed updates on-the-fly\n  useEffect(() => {\n    if (instanceRef.current) instanceRef.current.setSpeedX(speedX);\n  }, [speedX]);\n\n  useEffect(() => {\n    if (instanceRef.current) instanceRef.current.setSpeedY(speedY);\n  }, [speedY]);\n\n  // Push live texture changes\n  useEffect(() => {\n    if (instanceRef.current && faceImages.length > 0) {\n      faceImages.forEach((url, index) => {\n        if (url) instanceRef.current?.updateFaceTexture(index, url);\n      });\n    }\n  }, [faceImages]);\n\n  return (\n    <div \n      ref={containerRef} \n      style={{ \n        width: size, \n        height: size, \n        display: 'flex', \n        alignItems: 'center', \n        justifyContent: 'center' \n      }} \n    />\n  );\n}\n```\n\n---\n\n## API Reference (Vanilla JS)\n\nThe `RotatingDice` function returns a controller object containing the following methods:\n\n### `setSpeedX(value)`\nUpdates the rotation speed around the X-axis instantly.\n- **`value`** `(Number)`: The new rotation delta per frame.\n\n### `setSpeedY(value)`\nUpdates the rotation speed around the Y-axis instantly.\n- **`value`** `(Number)`: The new rotation delta per frame.\n\n### `updateFaceTexture(index, url)`\nChanges or adds an image texture to a specific face dynamically.\n- **`index`** `(Number)`: The index of the face (0 to 5).\n  - `0`: Right (+X) | `1`: Left (-X) | `2`: Top (+Y) | `3`: Bottom (-Y) | `4`: Front (+Z) | `5`: Back (-Z)\n- **`url`** `(String)`: The URL of the new image.\n\n### `destroy()`\nCleans up the animation loop, disposes of WebGL geometries/materials, and removes the canvas to prevent memory leaks.\n\n---\n\n## Author\n\n**Jaswant Soni** - [Portfolio](https://jaswantsoni.in) | [GitHub](https://github.com)\n\n## License\n\nISC\n","readmeFilename":"README.md"}