https://www.youtube.com/watch?v=9ZEjSxDRIik

# [github.com/pmndrs](https://github.com/pmndrs)

## [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber)

**What does it look like?** Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop ([life demo](https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js)).

- [react-three-flex](https://github.com/pmndrs/react-three-flex)

## ~~[react-three-fiber](https://github.com/pmndrs/react-three-fiber)~~ [DEPRECATED]

- **[Ecosystem](https://github.com/pmndrs/react-three-fiber#ecosystem)**
  - **[drei](https://github.com/pmndrs/drei)** *A growing collection of useful helpers and abstractions for **react-three-fiber**.*
- [Demo](https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js)

🔥 #react-three-fiber #threejs

# Tutorials

- https://www.youtube.com/watch?v=vTfMjI4rVSI

# Free space

- **Vite [github.com/pachoclo/vite-threejs-ts-template](https://github.com/pachoclo/vite-threejs-ts-template)**
- Vite [github.com/Robpayot/vite-threejs-template](https://github.com/Robpayot/vite-threejs-template)
- [Multyplayer](https://github.com/juniorxsound/R3F.Multiplayer) (fullstack)
- https://github.com/miguel-nascimento/r3f-vite-boilerplate

# Router

- [/tauri-react-threefiber-vite](https://github.com/pravosleva/tauri-react-threefiber-vite) (Game boilerplate)

#viteReact #threeJS | templates #tutorials2023

https://github.com/Sean-Bradley/First-Car-Shooter

#threejs # react | Car Shooter

https://www.youtube.com/watch?v=HisjGZX11w4

#react and #threejs

[Getting Started with THREE.JS in 2021!](https://youtu.be/pUgWfqWZWmM)

#threejs #boilerplate

- shaders
  - **[ocean](https://threejs.org/examples/#webgl_shaders_ocean)** [ImageLoader](https://threejs.org/docs/#api/en/loaders/ImageLoader)
- **[threejs-modern-app](https://github.com/marcofugaro/threejs-modern-app)** 2021 *Boilerplate and utils for a fullscreen Three.js app*
- React: [https://github.com/jonarnold/react-threejs-good-cheap-fast](https://github.com/jonarnold/react-threejs-good-cheap-fast) | **[Demo](https://www.tuitivegroup.com/good-fast-cheap/)** 2020.03
- [race-game-threejs](http://www.wukai.me/race-game-threejs/) | [Source](https://github.com/noiron/race-game-threejs)
- [Three.js & react sample](https://github.com/zrysmt/react-threejs-app) 2017
- **[threejs-es6-webpack-starter](https://github.com/jackdbd/threejs-es6-webpack-starter)** 2020.03
- [Three.js templates](https://github.com/PiusNyakoojo/threejs_templates) 2016
- [Editor sample](https://reactjsexample.com/edit-your-react-three-fiber-scene-with-a-visual-editor/)
- **[react-three-boilerplate](https://github.com/asjadanis/react-three-boilerplate)** 2020.11

#threejs #samples

https://github.com/nicolaspanel/three-orbitcontrols-ts

#threejs #OrbitControls #typescript

**[9 Top JS Gaming Engines and Libraries for 2020](https://blog.bitsrc.io/9-top-js-gaming-engines-and-libraries-for-2020-81707d9f095)**

- [enable3d](https://github.com/enable3d/enable3d) | **[Off Site](https://enable3d.io/)**
- [https://henryegloff.com/examples-of-browser-based-games-using-three-js-javascript-and-webgl/](https://henryegloff.com/examples-of-browser-based-games-using-three-js-javascript-and-webgl/)
- **Build a Game in React with Recoil and React Three Fiber**
<YoutubePlayer videoId='ADBnmJ1Z_18' />

#threejs #games #examples

# [Three.js Tutorials ](https://sbcode.net/threejs/)

> ### Notes
> - [About PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera)
> - See also: [Введение в 3D: основы Three.js](https://habr.com/ru/post/494810/) habr 2020.03
> - [Создание простого бесконечного 3D раннера с использованием Three.js](https://gamedevelopment.tutsplus.com/ru/tutorials/creating-a-simple-3d-endless-runner-game-using-three-js--cms-29157)

## 1-15. Make boilerplate step-by-step

[https://github.com/pravosleva/threejs-ts-sample](https://github.com/pravosleva/threejs-ts-sample)

## 16. [Scene, Camera and Renderer](https://www.udemy.com/course/threejs-tutorials/learn/lecture/17926722)

### Основные понятия

1. **Scene** - Three-подобная структура Сеток (Meshs), Освещений (Lights), Групп (Groups), 3D Позиционировний (3D Positions), Камер (Cameras)
2. **Camera** - Рисует сцену с усеченными размерами на 3D canvas
3. **Renderer** - Обертка над элементом canvas. `renderer.domElement` is `HTMLCanvasElement` in DOM.

С помощью renderer можно задавать размеры холста:
```js
renderer.setSize(200, 200)
```

###  Как встроить отрисовку в свой элемент
`dist/client/index.html`
```html
<html>
  <head>
    <style>
      #c {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <canvas id='c'></canvas>
  </body>
</html>
```
`src/client/client.ts`
```ts
// etc.

const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('c')
const renderer: THREE.WebGLRederer = new THREE.WebGLRederer({ canvas })
renderer.setSize(200, 200)

// document.body.appendChild(renderer.domElement)
```

## 47. [OrbitControls](https://sbcode.net/threejs/orbit-controls/)

[https://keycode.info/](https://keycode.info/)

## 49. [PointerLockControls](https://sbcode.net/threejs/pointerlock-controls/)

threejs