{"id":17042251,"url":"https://github.com/mrjasonweaver/react-3d-app","last_synced_at":"2025-04-12T14:42:28.473Z","repository":{"id":41396708,"uuid":"396898731","full_name":"mrjasonweaver/react-3d-app","owner":"mrjasonweaver","description":"An example 3D react app using create-react-app and @react-three-fiber.","archived":false,"fork":false,"pushed_at":"2021-12-05T21:11:02.000Z","size":77221,"stargazers_count":16,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T09:12:39.994Z","etag":null,"topics":["3d","react","reactjs","threejs","threejs-example","webgl-programming"],"latest_commit_sha":null,"homepage":"https://mrjasonweaver.github.io/react-3d-app/","language":"JavaScript","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/mrjasonweaver.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":"2021-08-16T17:27:00.000Z","updated_at":"2024-07-12T03:45:31.000Z","dependencies_parsed_at":"2022-07-30T08:48:02.026Z","dependency_job_id":null,"html_url":"https://github.com/mrjasonweaver/react-3d-app","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/mrjasonweaver%2Freact-3d-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Freact-3d-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Freact-3d-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Freact-3d-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrjasonweaver","download_url":"https://codeload.github.com/mrjasonweaver/react-3d-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248583241,"owners_count":21128545,"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":["3d","react","reactjs","threejs","threejs-example","webgl-programming"],"created_at":"2024-10-14T09:15:49.852Z","updated_at":"2025-04-12T14:42:28.449Z","avatar_url":"https://github.com/mrjasonweaver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 3d app example\n\nAn example react app using [create-react-app](https://github.com/facebook/create-react-app) and [@react-three-fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction).\n\nThis repo is a react-based 3D experience for the browser using the basic [react-three-fiber example](https://codesandbox.io/s/rrppl0y8l4) as a starting point. The idea is to take a submarine model from [Blender](https://www.blender.org/) and render it using three.js and allow the user to interact with it in some way. I started with a simple interface that allows changing the submarine color and texture and then added the ability to spin the propeller when pressing the arrow up key. [See the demo](https://mrjasonweaver.github.io/react-3d-app/) to play around with it in its current state.\n\n![3D Submarine](./3d-sub.gif)\n\n\n# Bundler Information\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrjasonweaver%2Freact-3d-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrjasonweaver%2Freact-3d-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrjasonweaver%2Freact-3d-app/lists"}