├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── assets
│ └── models
│ │ └── model.gltf
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.js
├── components
├── Floor.js
├── Lights.js
└── ThreeModel.js
├── index.css
├── index.js
├── ui
├── BaseBox.js
├── BaseCharacter.js
└── BaseScene.js
└── utils
└── helpers.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 | 
5 | 
6 | 
7 |
8 |
9 |
10 | ## Table of contents 👇
11 |
12 | - [✨ Motivation](#-motivation)
13 | - [🚩 Technologies](#-technologies)
14 | - [🕸️ Project Structure](#-project-structure)
15 | - [🚀 Basic Explanation](#-basic-explanation)
16 | - [🌎 Contact](#-contact)
17 |
18 | ## ✨ Motivation
19 |
20 | A 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.
21 |
22 | There 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).
23 |
24 | Since 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.
25 |
26 | I 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_.
27 |
28 | ## 🚩 Technologies
29 |
30 | The tecnologies that I have been using to create this projects are:
31 |
32 | | Library | Documentation | Purpose |
33 | | ------------------ | ----------------------------------------------------------- | ------------------------------ |
34 | | React Three Fiber | [See the docs](https://github.com/pmndrs/react-three-fiber) | The core library with Three.js |
35 | | React Three Drei | [See the docs](https://github.com/pmndrs/drei) | Some useful helpers |
36 | | React Three Cannon | [See the docs](https://github.com/pmndrs/use-cannon) | Physics library |
37 |
38 | ## 🕸️ Project Structure
39 |
40 | I have been using this structure for all my R3F projects since so long but feel free to modify it.
41 |
42 | ```
43 | src
44 | │
45 | └───components
46 | │ Floor.js
47 | │ Lights.js
48 | │ ThreeModel.js
49 | │
50 | └───ui
51 | │ BaseBox.js
52 | │ BaseCharacter.js
53 | │ BaseScene.js
54 | │
55 | └───utils
56 | │ helpers.js
57 | │
58 | ```
59 |
60 | - **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).
61 | - **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.
62 | - **Utils folder**: This folder contains a JavaScript file with some functions that I may need to use in different parts of the application.
63 |
64 | ## 🚀 Basic Explanation
65 |
66 | There 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.
67 |
68 | First of all you need to declare the `
82 |
83 |
85 | {children}
86 |
87 |
89 |
90 |
92 |
93 |
React Three Fiber - First Person Movement
25 |
26 |
27 | You need to enable JavaScript to run this app.
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgcarrillo/react-fp-movement/9f16326dc849832ecb6a8dc5d25c439f85e71008/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgcarrillo/react-fp-movement/9f16326dc849832ecb6a8dc5d25c439f85e71008/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { Sky } from '@react-three/drei';
2 |
3 | import BaseScene from './ui/BaseScene';
4 | import BaseBox from './ui/BaseBox';
5 | import ThreeModel from './components/ThreeModel.js';
6 | import BaseCharacter from './ui/BaseCharacter';
7 |
8 | function App() {
9 | return (
10 |
11 |
25 | );
26 | }
27 |
28 | export default App;
29 |
--------------------------------------------------------------------------------
/src/components/Floor.js:
--------------------------------------------------------------------------------
1 | import { usePlane } from '@react-three/cannon';
2 |
3 | const Floor = (props) => {
4 | const [ref] = usePlane((index) => ({ type: 'Static', mass: 0, ...props }));
5 |
6 | return (
7 |
8 |
11 | );
12 | };
13 |
14 | export default Floor;
15 |
--------------------------------------------------------------------------------
/src/components/Lights.js:
--------------------------------------------------------------------------------
1 | const Lights = () => {
2 | return (
3 | <>
4 |
17 |
26 | );
27 | };
28 |
29 | export default ThreeModel;
30 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body,
7 | canvas {
8 | width: 100%;
9 | max-height: 100vh;
10 | max-width: 100wh;
11 | height: 100%;
12 | margin: 0;
13 | padding: 0;
14 | }
15 |
16 | .dot {
17 | position: absolute;
18 | top: 50%;
19 | left: 50%;
20 | width: 10px;
21 | height: 10px;
22 | border-radius: 50%;
23 | transform: translate3d(-50%, -50%, 0);
24 | border: 2px solid white;
25 | }
26 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 |
6 | const root = ReactDOM.createRoot(document.getElementById('root'));
7 | root.render(
8 |
9 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/ui/BaseBox.js:
--------------------------------------------------------------------------------
1 | import { useBox } from '@react-three/cannon';
2 |
3 | const BaseBox = ({ ...props }) => {
4 | const [ref] = useBox((index) => ({
5 | type: 'Static',
6 | mass: 1,
7 | onCollide: (e) => {
8 | console.log(e);
9 | },
10 | ...props,
11 | }));
12 |
13 | return (
14 |
15 |
18 | );
19 | };
20 |
21 | export default BaseBox;
22 |
--------------------------------------------------------------------------------
/src/ui/BaseCharacter.js:
--------------------------------------------------------------------------------
1 | import { useSphere } from '@react-three/cannon';
2 | import { useFrame, useThree } from '@react-three/fiber';
3 | import { useEffect, useRef } from 'react';
4 | import { usePlayerControls } from '../utils/helpers.js';
5 | import * as THREE from 'three';
6 |
7 | const BaseCharacter = (props) => {
8 | const direction = new THREE.Vector3();
9 | const frontVector = new THREE.Vector3();
10 | const sideVector = new THREE.Vector3();
11 | const speed = new THREE.Vector3();
12 | const SPEED = 5;
13 |
14 | const { camera } = useThree();
15 |
16 | const [ref, api] = useSphere((index) => ({
17 | mass: 1,
18 | type: 'Dynamic',
19 |
20 | position: [0, 10, 0],
21 | ...props,
22 | }));
23 |
24 | const { forward, backward, left, right, jump } = usePlayerControls();
25 | const velocity = useRef([0, 0, 0]);
26 | useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), []);
27 |
28 | useFrame((state) => {
29 | ref.current.getWorldPosition(camera.position);
30 | frontVector.set(0, 0, Number(backward) - Number(forward));
31 | sideVector.set(Number(left) - Number(right), 0, 0);
32 | direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);
33 | speed.fromArray(velocity.current);
34 |
35 | api.velocity.set(direction.x, velocity.current[1], direction.z);
36 | if (jump && Math.abs(velocity.current[1].toFixed(2)) < 0.05) api.velocity.set(velocity.current[0], 5, velocity.current[2]);
37 | });
38 |
39 | return (
40 |
41 |
42 |
45 |
46 | );
47 | };
48 |
49 | export default BaseCharacter;
50 |
--------------------------------------------------------------------------------
/src/ui/BaseScene.js:
--------------------------------------------------------------------------------
1 | import { Canvas } from '@react-three/fiber';
2 | import { Loader, PointerLockControls } from '@react-three/drei';
3 | import { Physics } from '@react-three/cannon';
4 |
5 | import Lights from '../components/Lights.js';
6 | import Floor from '../components/Floor.js';
7 |
8 | const BasicScene = ({ children }) => {
9 | return (
10 |
11 |
12 |
15 | {children}
16 |
17 |
19 |
20 |
22 |
23 |