{"id":17133349,"url":"https://github.com/gilbox/react-three-ejecta-boilerplate","last_synced_at":"2025-04-13T08:12:11.665Z","repository":{"id":78534116,"uuid":"44497904","full_name":"gilbox/react-three-ejecta-boilerplate","owner":"gilbox","description":"universal webgl app that compiles for web and native mobile","archived":false,"fork":false,"pushed_at":"2015-11-13T03:11:47.000Z","size":138605,"stargazers_count":31,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T08:11:56.017Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://gilbox.github.io/react-three-ejecta-boilerplate/index.html","language":"Objective-C","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/gilbox.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}},"created_at":"2015-10-18T21:45:35.000Z","updated_at":"2024-01-12T14:50:00.000Z","dependencies_parsed_at":"2023-03-10T09:45:41.479Z","dependency_job_id":null,"html_url":"https://github.com/gilbox/react-three-ejecta-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Freact-three-ejecta-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Freact-three-ejecta-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Freact-three-ejecta-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Freact-three-ejecta-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbox","download_url":"https://codeload.github.com/gilbox/react-three-ejecta-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681495,"owners_count":21144700,"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-14T19:41:58.335Z","updated_at":"2025-04-13T08:12:11.635Z","avatar_url":"https://github.com/gilbox.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"## overview\n\nHigh-performance animation with react that compiles to both native mobile\n(iOS for now) and web. Originally I [tried](https://gist.github.com/gilbox/56862676e8c46acabb5c)\ndoing it with react-native\nbut it was way too slow and janky. Instead, this project uses\n[Ejecta](https://github.com/phoboslab/Ejecta) which natively implements\na subset of WebGL that works with [`threejs`](http://threejs.org/)\nand thus [`react-three`](https://github.com/Izzimach/react-three).\nUltimately, it would be great if we could integrate this into react-native somehow.\n\n## how?\n\nFor iOS compatibility, the minimum we need is a combination of\n[Ejecta](https://github.com/phoboslab/Ejecta),\n[threejs](threejs.org), and\n[react-three](https://github.com/Izzimach/react-three),\nand of course react 0.14+.\nFor creating fast functional animations in the demonstration game I used\n[react-imation](https://github.com/gilbox/react-imation),\n[react-stateful-stream](https://github.com/gilbox/react-stateful-stream), and\n[updeep](https://github.com/substantial/updeep).\nYou could use [immutable-js](https://facebook.github.io/immutable-js/)\ninstead of updeep (I have no idea which one is faster),\nbut updeep is more fun to use.\n\n\n## getting started\n\nClone this repo then:\n\n    npm install\n\n## build and run for iOS\n\n        npm run build            # build\n        open Ejecta.xcodeproj/   # open xcode\n\nrun the commands above then **click run in XCode**\n\nNote: When you build for iOS, the output is `App/index.js`.\n\n## build and run for web\n\n### Without Hot Module Reload (HMR)\n\n        npm start # start webpack and dev server\n\nRun the command above then goto [http://localhost:3420/dev.html](http://localhost:3420/dev.html).\nThis configuration has inline source maps enabled.\nAlthough this configuration doesn't support hot-reload, the page\n*will* auto-refresh with any change.\n\n### With HMR\n\n        npm run hot-web # start webpack and dev server with HMR\n\nRun the command above then goto [http://localhost:3420/dev.html](http://localhost:3420/dev.html).\n*Note: needs improvement, generates a lot of WebGL warnings on hot loads*.\nThis configuration has inline source maps disabled so that hot reloads are faster.\n\n## images directories\n\nThe default setup of this project is that there are two `images/` dirs:\n\n- `App/images`\n- `web/images`\n\nWhenever you add an image to one dir, you should also add the same image\nto the other dir. If all of your web images will be the same resolution as your\nmobile images, it would probably be best to modify the build config such that\nit avoids unnecessary copying.\n\n## `npm run` scripts\n\nHere are all of the build scripts and how you can use them:\n\n- For iOS:\n  * `npm run build` - Build once (for development)\n  * `npm run watch` - Watch files for changes and build continuously (for development)\n  * `npm run build-prod` - Build once (for production)\n  * `npm run build-prod-watch` - Watch files for changes and build continuously (for production)\n\n- For Web:\n  * `npm start` - Continuous build and server (for development).\n  * `npm run hot-web` - Continuous build and HMR server (for development).\n  * `npm run build-web` - Build once (for development)\n  * `npm run build-web-prod` - Build once (for production)\n\n## FAQ\n\n- *Q: what about android?*\n\n  **A:** Ejecta only supports iOS. However,\n  this project might very well work on Android using [cocoonjs](https://www.ludei.com/cocoonjs/).\n  But I didn't test it because I spent a few minutes\n  on cocoonjs website before getting discouraged. It has too many weird quirks for\n  my taste. For example, to build you must upload a ZIP file (wtf year is this, 1990?).\n\n- *Q: is it really fast enough to create a game?*\n\n  **A:** Not sure yet.\n  Ejecta and threejs seem fast enough, but is react fast enough? `¯\\_(ツ)_/¯`\n\n- *Q: i have a question!1!?*\n\n  **A:** [Open an issue](https://github.com/gilbox/react-three-ejecta-demo/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Freact-three-ejecta-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbox%2Freact-three-ejecta-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Freact-three-ejecta-boilerplate/lists"}