{"id":15630897,"url":"https://github.com/spite/three.cubemaptoequirectangular","last_synced_at":"2025-04-07T12:05:16.528Z","repository":{"id":45229342,"uuid":"65589626","full_name":"spite/THREE.CubemapToEquirectangular","owner":"spite","description":"Export an equirectangular panorama image from a three.js scene","archived":false,"fork":false,"pushed_at":"2021-04-15T09:33:38.000Z","size":1848,"stargazers_count":216,"open_issues_count":10,"forks_count":41,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T09:07:17.688Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-12T23:42:32.000Z","updated_at":"2025-02-24T07:51:25.000Z","dependencies_parsed_at":"2022-09-05T17:51:50.634Z","dependency_job_id":null,"html_url":"https://github.com/spite/THREE.CubemapToEquirectangular","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.CubemapToEquirectangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.CubemapToEquirectangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.CubemapToEquirectangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.CubemapToEquirectangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spite","download_url":"https://codeload.github.com/spite/THREE.CubemapToEquirectangular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T10:37:17.463Z","updated_at":"2025-04-07T12:05:16.506Z","avatar_url":"https://github.com/spite.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# THREE.CubemapToEquirectangular\n\nHelper to extract an equirectangular panorama PNG from any three.js scene.\n\nHere's a demo with some cubes: [Demo](http://clicktorelease.com/tools/CubemapToEquirectangular/index-managed.html)\n\n\n![](https://raw.githubusercontent.com/spite/THREE.CubemapToEquirectangular/master/about/pano-cru%C2%B7ci%C2%B7form-1471040116139.jpg)\n![](https://raw.githubusercontent.com/spite/THREE.CubemapToEquirectangular/master/about/pano-The%20Polygon%20Shredder-1471041904038.jpg)\n\n#### How to use ####\nInclude script after THREE is included\n```js\n\u003cscript src=\"CubemapToEquirectangular.js\"\u003e\u003c/script\u003e\n```\nor use npm to install it\n```\nnpm i three.cubemap-to-equirectangular\n```\nand include it in your code with (remember to require three.js)\n```js\nvar THREE = require('three');\nvar CubemapToEquirectangular = require('three.cubemap-to-equirectangular');\n```\n\nDefine a new instance of THREE.CubemapToEquirectangular.\n```js\n// create renderer, scene, camera, etc.\nvar renderer = new THREE.WebGLRenderer();\nvar scene = new THREE.Scene();\nvar camera = new THREE.Camera( /* ... */ );\n\n// Create a managed CubemapToEquirectangular\nvar equiManaged = new CubemapToEquirectangular( renderer, true );\n\n// or create an unmanaged CubemapToEquirectangular\nvar equiUnmanaged = new CubemapToEquirectangular( renderer, false );\n```\n\n#### Managed CubemapToEquirectangular ####\nWith Managed mode, the THREE.CubeCamera creation, update, render, etc. is all taken care of. You only have to call:\n```js\nequiManaged.update( camera, scene );\n```\nat any point in your code that you want to extract a panorama.\nThe cube map created will be 2048x2048 and the exported panorama will be 4096x2048.\n*Note: The cubemap can easily be 4096x4096, but that seems to work on most mobiles, too*\n\nDemo of Managed mode: [Demo](http://clicktorelease.com/tools/CubemapToEquirectangular/index-managed.html)\n\n\n#### Unmanaged CubemapToEquirectangular ####\nIf you want to use a different CubeMap camera, or do something custom with the render, you will have to set the Unmanaged mode.\n\nYou will have to create and manage your THREE.CubeCamera:\n```js\nvar cubeCamera = new THREE.CubeCamera( .1, 1000, 4096 );\n```\nand manage all your scene update and rendering. When you want to export a panorama, call:\n```js\n// this is where the developer updates the scene and creates a cubemap of the scene\ncubeCamera.position.copy( camera.position );\ncubeCamera.updateCubeMap( renderer, scene );\n\n// call this to convert the cubemap rendertarget to a panorama\nequiUnmanaged.convert( cubeCamera );\n```\n\nDemo of Unmanaged mode: [Demo](http://clicktorelease.com/tools/CubemapToEquirectangular/index-unmanaged.html)\n\n#### Changing output size ####\nTo export a different size, call ```setSize( width, height )```:\n```js\nequi.setSize( 2048, 1024 );\n```\n\n#### Notes ###\n\nBuilt using ES6 template strings.\nNeeds canvas.toBlob, polyfill in the examples folder\n\n#### TODO ####\n\n- ~~Fix for Android (if it's a relevant use case)~~ (seems to work with 2048x2048)\n- Check for mobile (if it's a relevant use case)\n- Add importance sampling (improves quality of output)\n- Handle postprocessing\n- Handle Safari not supporting download attribute\n- Let users have more control over file name, callbacks, progress\n\n#### License ####\n\nMIT licensed\n\nCopyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2Fthree.cubemaptoequirectangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspite%2Fthree.cubemaptoequirectangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2Fthree.cubemaptoequirectangular/lists"}