{"_id":"3ui-aleguy02","_rev":"1-cf89a87fe62babdf56dc54307a723ee0","name":"3ui-aleguy02","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"3ui-aleguy02","version":"1.0.0","description":"You can easily implement interactive 3D elements into your website's UI with this package","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["three","three.js","javascript","html","UI","user","interface","design","3d","web"],"author":{"name":"aleguy02"},"license":"ISC","dependencies":{"three":"^0.163.0"},"devDependencies":{"vite":"^5.2.10"},"_id":"3ui-aleguy02@1.0.0","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Hqm8bwfQcJXn9AAYSChy5QfpOY5Sn0AeMTQQBaqGCoU8rX/BkcovBeiWwdiNhgC81fJicIVC2nOS3q5r0Du8FQ==","shasum":"a42b56b16d1676344e72bb3234798949ac3a969b","tarball":"https://registry.npmjs.org/3ui-aleguy02/-/3ui-aleguy02-1.0.0.tgz","fileCount":2,"unpackedSize":4563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3yDouJhvNCDwPjvIahWWQObO7vyzkLb3QkRsQq0eqzgIhAIHJGzqKXTJy+Ru2WtxoXgwNDQHL3zRU9ju1OscK+c5L"}]},"_npmUser":{"name":"aleguy02","email":"alejandro.the.villate@gmail.com"},"directories":{},"maintainers":[{"name":"aleguy02","email":"alejandro.the.villate@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/3ui-aleguy02_1.0.0_1714005765141_0.6392879202476296"},"_hasShrinkwrap":false},"1.0.1":{"name":"3ui-aleguy02","version":"1.0.1","description":"You can easily implement interactive 3D elements into your website's UI with this package","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["three","three.js","javascript","html","UI","user","interface","design","3d","web"],"author":{"name":"aleguy02"},"license":"ISC","dependencies":{"three":"^0.163.0"},"devDependencies":{"vite":"^5.2.10"},"_id":"3ui-aleguy02@1.0.1","gitHead":"e8bb4d4b578f6581d166eeaad60e00ac18b27277","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-GCbtkoBMZpvZfV4eE20EJOQGlO6MCWJ/ROh8eF9cW0IxbDedE5D/pXqqsCOSDqJIBB17DG0QMFfi3nakkjDEpA==","shasum":"75a226a42ca5850f8274bf027c3107f4edd15278","tarball":"https://registry.npmjs.org/3ui-aleguy02/-/3ui-aleguy02-1.0.1.tgz","fileCount":3,"unpackedSize":7446,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYueTSQ4jdtmc18UIn14jWcaSMAcH+H8pijexkzXI0NQIhAOLVUjQl8hzkEwKYuHKu2Joz/usmuk4g866p5Cs0UaJ6"}]},"_npmUser":{"name":"aleguy02","email":"alejandro.the.villate@gmail.com"},"directories":{},"maintainers":[{"name":"aleguy02","email":"alejandro.the.villate@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/3ui-aleguy02_1.0.1_1714013321473_0.22372435811736913"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-25T00:42:45.140Z","1.0.0":"2024-04-25T00:42:45.277Z","modified":"2024-04-25T02:48:41.783Z","1.0.1":"2024-04-25T02:48:41.613Z"},"maintainers":[{"name":"aleguy02","email":"alejandro.the.villate@gmail.com"}],"description":"You can easily implement interactive 3D elements into your website's UI with this package","keywords":["three","three.js","javascript","html","UI","user","interface","design","3d","web"],"author":{"name":"aleguy02"},"license":"ISC","readme":"3UI lets you create interactive 3D elements to make your website a little more fun. It's currently made for beginner developers building websites with HTML, CSS, and Javascript. 3UI's elements dynamically react to different sized divs, or containers as I'll call them here. 3UI uses three.js to render scenes, I encourage you to take a look at three.js's official documentation if you want to understand what's going on under the hood.\r\nhttps://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene\r\n\r\n**How To Use:**\r\n\r\nCreating these interactive elements can be done in 3 steps:\r\n1) Create a shape with one of the shape functions. Currently, 3UI supports three shapes: Cube, Sphere, and Diamond\r\n2) Create a scene with the Scene function\r\n3) Render the scene with the createScene function\r\n\r\n**Full Documentation**\r\n\r\nThis is my first time attempting any sort of docs, please bear with me. I'll also be copy pasting some lines directly from three.js's official documentation, so again I encourage you to take a look if you want to understand what's happening.\r\n\r\n**Cube(color: hexadecimal number, wireframe: boolean)**\r\n\r\nReturns a Mesh object that looks like a cube.\r\n\r\ncolor - Hexadecimal number representing the color of the shape. Default is 0xff0000 (red)\r\n\r\nwireframe - Render geometry as wireframe. Default is false (i.e. render as flat polygons).\r\n\r\n\r\n\r\n**Sphere(color: hexadecimal number, wireframe: boolean)**\r\n\r\nReturns a Mesh object that looks like a sphere.\r\n\r\ncolor - Hexadecimal number representing the color of the shape. Default is 0xff0000 (red)\r\n\r\nwireframe - Render geometry as wireframe. Default is false (i.e. render as flat polygons).\r\n\r\n\r\n**Diamond(color: hexadecimal number, wireframe: boolean)**\r\n\r\nReturns a Mesh object that looks like a diamond.\r\n\r\ncolor - Hexadecimal number representing the color of the shape. Default is 0xff0000 (red)\r\n\r\nwireframe - Render geometry as wireframe. Default is false (i.e. render as flat polygons).\r\n\r\n\r\n\r\n**Scene(color: hexadecimal number)**\r\n\r\nReturns a Scene object that makes up the background of the render.\r\n\r\ncolor - Hexadecimal number representing the background color of the scene. Default is 0xffffff (white)\r\n\r\n\r\n**createScene(shape: object, scene: object, id: string)**\r\n\r\nRenders a shape and scene and fits them into a container.\r\n\r\nshape - Mesh object representing your shape\r\n\r\nscene - Scene object representing your background color\r\nid - string representing the id property of the container interface representing the container's identifier, reflecting the id global attribute\r\n\r\n**Example Code**\r\n\r\nThe following code creates a red cube on a white background contained in a div with the id \"animation-container\"\r\n\r\n```\r\nimport * as ThreeUI from \"3ui-aleguy02\"\r\n\r\nconst shape = ThreeUI.Cube()\r\nconst scene = ThreeUI.Scene()\r\nThreeUI.createScene(shape, scene, \"animation-container\")\r\n```\r\n","readmeFilename":"README.md"}