{"id":17820555,"url":"https://github.com/64blit/xyz3d.js-examples","last_synced_at":"2026-03-19T02:06:35.441Z","repository":{"id":153215815,"uuid":"628507360","full_name":"64blit/xyz3d.js-examples","owner":"64blit","description":"Example 3D sites using the xyz3d.js framework","archived":false,"fork":false,"pushed_at":"2023-05-22T22:20:38.000Z","size":107054,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T10:19:17.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/64blit.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}},"created_at":"2023-04-16T06:46:08.000Z","updated_at":"2023-12-18T19:40:23.000Z","dependencies_parsed_at":"2024-10-27T17:41:07.270Z","dependency_job_id":null,"html_url":"https://github.com/64blit/xyz3d.js-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/64blit/xyz3d.js-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/64blit%2Fxyz3d.js-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/64blit%2Fxyz3d.js-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/64blit%2Fxyz3d.js-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/64blit%2Fxyz3d.js-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/64blit","download_url":"https://codeload.github.com/64blit/xyz3d.js-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/64blit%2Fxyz3d.js-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28474502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T00:15:39.755Z","status":"ssl_error","status_checked_at":"2026-01-16T00:15:32.174Z","response_time":62,"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":[],"created_at":"2024-10-27T17:06:17.435Z","updated_at":"2026-01-16T00:27:31.040Z","avatar_url":"https://github.com/64blit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xyz3d.js examples\n\n## How To Run\n\nUse any development server in one of the following subdirectories, such as the vscode extension [FiveServer](https://github.com/yandeu/five-server).\nFor example:\n`python -m http.server 8000`\nor\n`nodemon --ext html,js,glb,json --verbose --exec http-server -p 8081`\n\n\nsee https://glitch.com/@64blit for examples running live\n\n\n\n## Getting Start\n\n[xyz3d.js-examples](https://github.com/64blit/xyz3d.js-examples)\n\nThe following is the minimum requirements for running an xyz3d framework instance.\n\n1. A canvas and dom element for the popup html content. This is presented as a child iframe under this div. \n\n```html\n\u003ccanvas id=\"main-canvas\" class=\"fullscreen-canvas\"\u003e\u003c/canvas\u003e\n\u003cdiv id=\"popup-content\" class=\"XYZ3d-hidden\"\u003e\u003c/div\u003e\n```\n\n2. CSS\n\n```css\n\n/*   The iframe which is dynamically added and parented \nto the popup-content div */\n\niframe #XYZ3d-fullscreen {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n/* A dynamic button, used to close the popup, is created and \nparented to the popup-content div as follows: \n`\u003cdiv id=\"XYZ3d-close-btn\" class=\"XYZ3d-close-btn\"\u003e\u003cspan\u003e✕\u003c/span\u003e\u003c/div\u003e` */\n\n.XYZ3d-close-btn {\n  color: #fff;\n  font-size: 1.4rem;\n  text-align: center;\n  position: fixed;\n  background-color: rgb(31, 31, 31);\n  width: 5rem;\n  height: 4rem;\n  right: 0rem;\n  top: 0rem;\n  z-index: 2;\n}\n\n/* The selectors to hide and show the popup dom element */\n\n.XYZ3d-visible {\n  z-index: 2 !important;\n  opacity: 1;\n  transition: all 400ms linear;\n  visibility: visible;\n}\n\n.XYZ3d-hidden {\n  z-index: -2 !important;\n  overflow: hidden;\n  opacity: 0;\n  transition: all 20ms 0ms;\n}\n```\n\n3. Add a json file:\n\n```json\n{\n  \"models\": [\n    {\n      \"name\": \"bio template\",\n      \"path\": \"assets/scene.glb\",\n      \"enabled\": true,\n      \"position\": {\n        \"x\": 0,\n        \"y\": 0,\n        \"z\": 0\n      },\n      \"scale\": {\n        \"x\": 1,\n        \"y\": 1,\n        \"z\": 1\n      },\n      \"rotation\": {\n        \"x\": 0,\n        \"y\": 0,\n        \"z\": 0,\n        \"w\": 0\n      },\n      \"interactable\": [\n        {\n          \"type\": \"link\",\n          \"modelName\": \"Icon_IG\",\n          \"content\": \"https://www.instagram.com\"\n        },\n        {\n          \"type\": \"popup\",\n          \"modelName\": \"Button_1_Mesh\",\n          \"content\": \"pages/untree.co-minimal/index.html\"\n        }\n      ],\n      \"shadow\": false,\n      \"shadowBias\": 0.005,\n      \"shadowNormalBias\": 0.01,\n      \"shadowRadius\": 1.0,\n      \"frustumCulled\": true\n    }\n  ],\n  \"lights\": [\n    {\n      \"id\": \"ambient light 1\",\n      \"type\": \"ambientLight\",\n      \"enabled\": true,\n      \"color\": \"#FFFFFF\",\n      \"intensity\": 1.0\n    }\n  ]\n}\n```\n\n4. Add a GLB file created with the proper custom properties added via the blender plugin. See [xyz3d.js-blender-plugin](https://github.com/64blit/xyz3d.js-blender-plugin)\n\n5. Create the xyz3d typescript instance, linking the proper dom elements.\n\n```js\nimport { THREE, XYZ3d } from './xyz3d.es.js'\n\nconst xyzed = new XYZ3d({\n  jsonPath: 'scene.json',\n  domElements: {\n    canvas: document.getElementById('main-canvas'),\n    popup: document.getElementById('popup-content')\n  }\n})\n\nlet threeComponents = {\n  camera: null,\n  scene: null,\n  renderer: null,\n  sceneWrapper: null\n}\n\nxyzed.setup().then(result =\u003e {\n  threeComponents = result\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F64blit%2Fxyz3d.js-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F64blit%2Fxyz3d.js-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F64blit%2Fxyz3d.js-examples/lists"}