{"_id":"@atestacraft/panorama","_rev":"1-152edf3cd895fb7e4181a3bef9f66727","name":"@atestacraft/panorama","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.0":{"name":"@atestacraft/panorama","version":"0.0.0","_id":"@atestacraft/panorama@0.0.0","maintainers":[{"name":"crashmax","email":"crashmax.dev@gmail.com"}],"dist":{"shasum":"2e3f3545e335013af9dd95d11bbadfb736e50567","tarball":"https://registry.npmjs.org/@atestacraft/panorama/-/panorama-0.0.0.tgz","fileCount":9,"integrity":"sha512-qneqJI239vNQFwWQJZmWlYFggSu+1bHidUR71Zk23muNRbp6MTAxg8P7TV/fzWjBHCxMuoaqnqyno5PAxhSqeA==","signatures":[{"sig":"MEUCIQDm0L/xTBQ01cYzsJIhTZFsDbZ+4JwL6frGoyIkR4H+KAIgTa0X3cR/Epr77+8Yq+OUP9gUkP7M4aZiiPro7eO3nbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12539},"type":"module","_from":"file:atestacraft-panorama-0.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsc --watch","build":"tsc"},"_npmUser":{"name":"crashmax","email":"crashmax.dev@gmail.com"},"_resolved":"/tmp/69c8d963f0ccdcc42b6cde22c9b1d5ed/atestacraft-panorama-0.0.0.tgz","_integrity":"sha512-qneqJI239vNQFwWQJZmWlYFggSu+1bHidUR71Zk23muNRbp6MTAxg8P7TV/fzWjBHCxMuoaqnqyno5PAxhSqeA==","_npmVersion":"10.8.2","description":"> A library for creating a panoramic 3D effect on web pages, similar to the effect in the main menu of Minecraft.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"three":"0.154.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/three":"0.154.0"},"_npmOperationalInternal":{"tmp":"tmp/panorama_0.0.0_1734463908612_0.18806353323731484","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@atestacraft/panorama","type":"module","version":"0.1.0","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"dependencies":{"three":"0.154.0"},"devDependencies":{"@types/three":"0.154.0"},"scripts":{"dev":"tsc --watch","build":"tsc"},"_id":"@atestacraft/panorama@0.1.0","description":"> A library for creating a panoramic 3D effect on web pages, similar to the effect in the main menu of Minecraft.","_integrity":"sha512-FHpeUdxxponqrtgNii3SpK1ODlPT49JW6myCd3PazKOw3qHeqFI1gdK63XZRqoXIhn7ViHH36oQaezQZMpz8ew==","_resolved":"/tmp/7605aee4d7f10fa37071ba7f381defed/atestacraft-panorama-0.1.0.tgz","_from":"file:atestacraft-panorama-0.1.0.tgz","_nodeVersion":"20.18.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FHpeUdxxponqrtgNii3SpK1ODlPT49JW6myCd3PazKOw3qHeqFI1gdK63XZRqoXIhn7ViHH36oQaezQZMpz8ew==","shasum":"db6e076d41fa9f7132ea6253daf6cbc5bdbed119","tarball":"https://registry.npmjs.org/@atestacraft/panorama/-/panorama-0.1.0.tgz","fileCount":9,"unpackedSize":12727,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi4HLtdTxq0tqUKSpV1E2DrvWRR3B+6hAPO+/Z4iG/ZQIgNZ+e0PhEv+TrGUVAj3I3yFzeD0LtTnS36vzM9+01jC4="}]},"_npmUser":{"name":"crashmax","email":"crashmax.dev@gmail.com"},"directories":{},"maintainers":[{"name":"crashmax","email":"crashmax.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/panorama_0.1.0_1734505560347_0.34294837203550177"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-17T19:31:48.519Z","modified":"2024-12-18T07:06:00.698Z","0.0.0":"2024-12-17T19:31:48.778Z","0.1.0":"2024-12-18T07:06:00.524Z"},"description":"> A library for creating a panoramic 3D effect on web pages, similar to the effect in the main menu of Minecraft.","maintainers":[{"name":"crashmax","email":"crashmax.dev@gmail.com"}],"readme":"# @atestacraft/panorama\n\n> A library for creating a panoramic 3D effect on web pages, similar to the effect in the main menu of Minecraft.\n\n## Demo\nYou can view a live demo of the panorama effect [here](https://atestacraft.github.io/panorama/).\n\n## Installation\n\n```bash\nnpm install @atestacraft/panorama\n```\n\n```bash\nyarn add @atestacraft/panorama\n```\n\n```bash\npnpm add @atestacraft/panorama\n```\n\n## Usage\n\nThe panorama effect requires 6 images to function correctly, named `panorama_0` through `panorama_5` (e.g., `panorama_0.png`, `panorama_1.png`, etc.).\nThese images can be found in the panorama images of [this directory](./demo/public/images/), or you can use your own images with the same file names.\n\nTo use the images from this repository, you can clone or download them and place them in your project folder (e.g., `images/`).\n\n```ts\nimport { Panorama } from '@atestacraft/panorama'\n\nconst container = document.querySelector('.panorama')\nconst panorama = new Panorama(container)\npanorama.init('path/to/panorama')\n```\n\n## Example for Vue\n\n```vue\n<template>\n  <div ref=\"panoramaRef\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { Panorama } from '@atestacraft/panorama'\nimport { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'\n\nconst panorama = shallowRef<Panorama>()\nconst panoramaRef = useTemplateRef('panoramaRef')\n\nonMounted(() => {\n  if (!panoramaRef.value) return\n  panorama.value = new Panorama(panoramaRef.value)\n  panorama.value.init('path/to/panorama')\n})\n\nonUnmounted(() => {\n  if (!panorama.value) return\n  panorama.value.dispose()\n})\n</script>\n```\n\n## API\n\n### `Panorama(container: HTMLElement, options: PanoramaOptions)`\n\nCreates a panorama instance.\n\n**Parameters:**\n\n- `container` *(HTMLElement)* – The container in which the panorama will be displayed.\n- `options` *(PanoramaOptions)* – An object containing the options (optional).\n\n### `PanoramaOptions`\n\n| Property           | Type          | Description                                                       | Default Value          |\n|--------------------|---------------|-------------------------------------------------------------------|------------------------|\n| `enablePan`        | `boolean`     | Enable movement by panning (dragging the mouse).                  | `false`                |\n| `enableRotate`     | `boolean`     | Enable automatic rotation of the scene.                           | `true`                 |\n| `rotateSpeed`      | `number`      | Rotation speed when `enableRotate` is true.                       | `0.3`                  |\n| `cameraFov`        | `number`      | Camera field of view (from 30 to 120 degrees).                    | `100`                  |\n\n### Methods\n\n| Method | Description |\n|-|-|\n| `init(path: string, fileExt: string = 'png', options: PanoramaOptions = {})` | Initializes the panorama with the specified image path and options. The path should contain 6 panorama images (panorama_0 to panorama_5). The `fileExt` specifies the image file extension (default: 'png'). If called again after initialization, the call will be ignored. |\n| `dispose()` | Removes the panorama from the DOM, stops the render loop, and cleans up event listeners and resources. |\n| `updateOptions(options: PanoramaOptions)` | Updates the panorama options after initialization. This method applies changes immediately if the panorama is already initialized, otherwise, it applies the options when `init()` is called. |\n| `cameraPosition(x: number, y: number, z: number)` | Sets the position of the camera in 3D space. Takes three arguments: `x`, `y`, and `z` to specify the camera's coordinates. |\n\n### Events\n\n| Event            | Description                                           |\n|------------------|------------------------------------------------------|\n| `load`           | Triggered after the panorama scene is loaded.        |\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).\nBuilt using [Three.js](https://threejs.org).\n","readmeFilename":"README.md"}