{"id":41121882,"url":"https://github.com/imgntn/j360","last_synced_at":"2026-01-22T17:39:54.895Z","repository":{"id":143109494,"uuid":"76519330","full_name":"imgntn/j360","owner":"imgntn","description":"360 Video and Photo Capture in 4K for Three.js","archived":false,"fork":false,"pushed_at":"2025-06-02T04:58:36.000Z","size":6303,"stargazers_count":297,"open_issues_count":3,"forks_count":18,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-02T05:33:10.543Z","etag":null,"topics":["360-video","4k-video","capture","javascript","threejs","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imgntn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-12-15T03:11:41.000Z","updated_at":"2025-06-02T04:58:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2dd268a-56a4-4571-bcb0-80576d949bf2","html_url":"https://github.com/imgntn/j360","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imgntn/j360","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgntn%2Fj360","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgntn%2Fj360/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgntn%2Fj360/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgntn%2Fj360/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imgntn","download_url":"https://codeload.github.com/imgntn/j360/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgntn%2Fj360/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28667869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T17:07:18.858Z","status":"ssl_error","status_checked_at":"2026-01-22T17:05:02.040Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["360-video","4k-video","capture","javascript","threejs","webgl"],"created_at":"2026-01-22T17:39:52.829Z","updated_at":"2026-01-22T17:39:54.886Z","avatar_url":"https://github.com/imgntn.png","language":"TypeScript","readme":"This project shows how to export 4K resolution 360 Videos and Photos from inside of Three.js scenes.\n\nThe process is described in this blog post: https://medium.com/p/788226f2c75f\n\n# Examples\n\n[example 4k video from demo scene on YouTube ](https://www.youtube.com/watch?v=nsJS0_vms5c)\n\n![Alt text](screencap2.jpg?raw=true \"Inside of a 3D environment\")\n\n[example 4k test video on YouTube ](https://www.youtube.com/watch?v=GcY7f8EYEQg)\n\n![Alt text](screencap.jpg?raw=true \"Early Tests\")\n\n# How this works\nBasically you take a cube camera, save it to equirectangular photo, and then stitch those together to make a video.  Add some metadata and voila! You can then post them to Facebook and Youtube.\n\nI made some modifications to the [CCapture.js library](https://github.com/spite/ccapture.js/), where I added a CC360Encoder class that calls into an cubemap to equirectangular image capture library [from the same author](https://github.com/spite/THREE.CubemapToEquirectangular). I made modifications to that library also, where I prepare the cube camera data for the encoder with the preBlob class.  Finally, I was running into memory issues very quickly, so I re-implemented the broken batching in CCapture.js for .jpg sequences.\n\nThe app will capture a batch every N seconds, according to the autoSaveTime parameter.  Save and unarchive these .tar files, then use FFMPEG to stitch the images together.  See the post on Medium for more about metadata.\n\n# Try Online\n\n[demo scene](https://imgntn.github.io/j360/demo.html)\n\n[simple tests](https://imgntn.github.io/j360/index.html)\n\n\n# Example files\n\nClone the repository and serve its files using a webserver of your choice.\n\n\n[index.html](index.html) contains simple test shapes.  moving the camera during capture has no effect.\n\n[demo.html](demo.html) is hacked into a three.js demo scene.  moving the camera during capture will change the final shot.\n\n\n# Use it yourself\n\nInclude the modified CCapture.js and CubeMapToEquirectangular.js libraries.  You'll need tar.js and download.js as well.  Which controls to include are up to you.\n\nInstantiate a capturer.  Batches will download automatically every N seconds according to the autoSaveTime property.\n\n```\n// Create a capturer that exports Equirectangular 360 JPG images in a TAR file\nvar capturer360 = new CCapture({\n    format: 'threesixty',\n    display: true,\n    autoSaveTime: 3,\n});\n```\n\nAdd a managed CubemapToEquirectangular camera when you setup your scene.\n\nHere we use “4K” but you can also use “2K” or “1K” as resolutions.\n\n```equiManaged = new CubemapToEquirectangular(renderer, true,\"4K\");```\n\n\nCall the capture method at the end render loop, and give it your canvas.\n\n```capturer360.capture(canvas); ```\n\nThese functions will start and stop the recording.\n\n```\nfunction startCapture360(event) {\n    capturer360.start();\n}\n\nfunction stopCapture360(event) {\n    capturer360.stop();\n}\n```\n\n# Unarchive, Convert, and Add Metadata\n\nUnarchive the .tar files to a single folder and then convert the whole folder of images into a movie with one FFMPEG command\n\n```ffmpeg -i %07d.jpg video.mp4```\n\nThe “%07d” tells FFMPEG that there are 7 decimals before the “.jpg” extension in each filename. \n\nIn tests of a 30 second capture, I've seen a 1.66GB folder of 4K 360 images compress into a single 3.12mb  4K 360 video.  A lot depends on how much movement there is in the scene, but the reductions are dramatic.\n\nThen use the [Spatial Media Metadata Injector](https://github.com/google/spatial-media/releases) to add spatial metadata and upload.\n\n# Contact\nGet in touch with me on LinkedIn for custom 360 content or more versatile deployments of this software.  \n\nhttps://www.linkedin.com/in/jamespollack\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgntn%2Fj360","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimgntn%2Fj360","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgntn%2Fj360/lists"}