{"id":22065251,"url":"https://github.com/jgcarrillo/react-fp-movement","last_synced_at":"2026-03-03T21:32:08.154Z","repository":{"id":61936680,"uuid":"539533478","full_name":"jgcarrillo/react-fp-movement","owner":"jgcarrillo","description":"Basic scene with geometries and gLTF models to control a character in first person camera","archived":false,"fork":false,"pushed_at":"2024-06-05T10:53:34.000Z","size":463,"stargazers_count":38,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T11:52:23.817Z","etag":null,"topics":["javascript","react-three-cannon","react-three-drei","react-three-fiber","reactjs","threejs"],"latest_commit_sha":null,"homepage":"https://react-fp-movement.netlify.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/jgcarrillo.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":"2022-09-21T14:33:39.000Z","updated_at":"2025-07-05T01:08:42.000Z","dependencies_parsed_at":"2025-05-13T01:16:52.982Z","dependency_job_id":"3ab95ce3-d88b-41b7-b24d-c1951febeb86","html_url":"https://github.com/jgcarrillo/react-fp-movement","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jgcarrillo/react-fp-movement","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgcarrillo%2Freact-fp-movement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgcarrillo%2Freact-fp-movement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgcarrillo%2Freact-fp-movement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgcarrillo%2Freact-fp-movement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgcarrillo","download_url":"https://codeload.github.com/jgcarrillo/react-fp-movement/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgcarrillo%2Freact-fp-movement/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30062411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["javascript","react-three-cannon","react-three-drei","react-three-fiber","reactjs","threejs"],"created_at":"2024-11-30T19:15:55.880Z","updated_at":"2026-03-03T21:32:08.115Z","avatar_url":"https://github.com/jgcarrillo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n![GitHub stars](https://img.shields.io/github/stars/jgcarrillo/react-fp-movement)\n![GitHub issues](https://img.shields.io/github/issues/jgcarrillo/react-fp-movement)\n![GitHub forks](https://img.shields.io/github/forks/jgcarrillo/react-fp-movement)\n![GitHub PRs](https://img.shields.io/github/issues-pr/jgcarrillo/react-fp-movement)\n\n\u003c/div\u003e\n\n## Table of contents 👇\n\n- [✨ Motivation](#-motivation)\n- [🚩 Technologies](#-technologies)\n- [🕸️ Project Structure](#-project-structure)\n- [🚀 Basic Explanation](#-basic-explanation)\n- [🌎 Contact](#-contact)\n\n## ✨ Motivation\n\nA few months ago I started to working with **React Three Fiber**. I was impressed with the possibilities the library gives to you to create 3D environments. I saw a wide variety of examples in [R3F website](https://docs.pmnd.rs/react-three-fiber/getting-started/examples) so I started to explore more about the project.\n\nThere are so many good examples out there, but I get motivated with some of them, for example, a [Ping Pong game](https://codesandbox.io/s/ping-pong-0mgum) or even a [simple Arkanoid clone](https://codesandbox.io/s/arkanoid-under-60-loc-66cd7).\n\nSince that, I have working in so many pet projects to understand the _key concepts_ of React Three Fiber and also **Three.js**. I don't consider myself a R3F pro, nor even a beginner, but now I feel confident about the fact that I can create such 3D scenarios.\n\nI started creating basic **isometric scenes**, but I wanted to move on, so this project is about a simple scene, some geometries and a character who you can move around it with _WASD_ keys and jump with the _space bar_.\n\n## 🚩 Technologies\n\nThe tecnologies that I have been using to create this projects are:\n\n| Library            | Documentation                                               | Purpose                        |\n| ------------------ | ----------------------------------------------------------- | ------------------------------ |\n| React Three Fiber  | [See the docs](https://github.com/pmndrs/react-three-fiber) | The core library with Three.js |\n| React Three Drei   | [See the docs](https://github.com/pmndrs/drei)              | Some useful helpers            |\n| React Three Cannon | [See the docs](https://github.com/pmndrs/use-cannon)        | Physics library                |\n\n## 🕸️ Project Structure\n\nI have been using this structure for all my R3F projects since so long but feel free to modify it.\n\n```\nsrc\n│\n└───components\n│       Floor.js\n│       Lights.js\n│       ThreeModel.js\n│\n└───ui\n│       BaseBox.js\n│       BaseCharacter.js\n│       BaseScene.js\n│\n└───utils\n│       helpers.js\n│\n```\n\n- **Components folder**: This is where I put all my standalone components such as Lights, Floor (because in my examples I only have one) and models (gLTF).\n- **UI folder**: In this folder I put all the UI components such as buttons, headers or in this case the base character configuration or even a generic scene.\n- **Utils folder**: This folder contains a JavaScript file with some functions that I may need to use in different parts of the application.\n\n## 🚀 Basic Explanation\n\nThere are a lot of concepts here, but to create a **First Person Movement** you only need to set up some of them. For more information I encourage you to consult the documentation of the library.\n\nFirst of all you need to declare the `\u003cPointerLockControls /\u003e` inside your **Canvas**. As you can see in the [official Three.js documentation](https://threejs.org/docs/#examples/en/controls/PointerLockControls), this component allow you to create a First Person 3D game movement with your mouse.\n\n```js\n// BaseScene.js\nimport { Canvas } from '@react-three/fiber';\nimport { Loader, PointerLockControls } from '@react-three/drei';\nimport { Physics } from '@react-three/cannon';\n\nimport Lights from '../components/Lights.js';\nimport Floor from '../components/Floor.js';\n\nconst BasicScene = ({ children }) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cCanvas shadows camera={{ fov: 50 }}\u003e\n        \u003cLights /\u003e\n        \u003cPhysics gravity={[0, -9.8, 0]}\u003e\n          {children}\n\n          \u003cFloor rotation={[Math.PI / -2, 0, 0]} color=\"white\" /\u003e\n        \u003c/Physics\u003e\n\n        \u003cPointerLockControls /\u003e\n      \u003c/Canvas\u003e\n      \u003cLoader /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default BasicScene;\n```\n\nOkay, we are close enough. The next step is to go to `\u003cBaseCharacter /\u003e`. I'm not going to explain every line in this file, the important thing to know is that you need to add the `useThree()` hook to access to the render, scene or even camera (for more info, [check the official documentation](https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree)).\n\nOnce here, the next step is to set the **direction** and include the method `.applyEuler(camera.rotation);` to update the camera and set the character position at the same direction at the global camera.\n\n```js\n// BaseCharacter.js\n\nimport { useFrame, useThree } from '@react-three/fiber';\n\nconst { camera } = useThree();\n\n// ...\n\nref.current.getWorldPosition(camera.position);\ndirection.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);\n```\n\n## 🌎 Contact\n\nIf you have some doubts or need to ask something about the project, feel free to reach me here:\n\n- Twitter: [https://twitter.com/jgcarrillo](https://twitter.com/jgcarrillo_)\n- LinkedIn: [https://es.linkedin.com/in/jgcarrilloweb](https://es.linkedin.com/in/jgcarrilloweb)\n- Website: [https://jgcarrillo.com/](https://jgcarrillo.com/)\n- Stackoverflow: [https://stackoverflow.com/users/18326020/jgcarrillo](https://stackoverflow.com/users/18326020/jgcarrillo)\n- Dev.to: [https://dev.to/jgcarrillo](https://dev.to/jgcarrillo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgcarrillo%2Freact-fp-movement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgcarrillo%2Freact-fp-movement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgcarrillo%2Freact-fp-movement/lists"}