├── .gitignore ├── README.md ├── SECURITY.md ├── _config.yml ├── apps ├── leva-custom-car-color │ ├── .codesandbox │ │ └── workspace.json │ ├── package.json │ ├── public │ │ ├── colorful_studio_1k.hdr │ │ └── model │ │ │ ├── scene.bin │ │ │ └── scene.gltf │ └── src │ │ ├── car.js │ │ ├── index.js │ │ ├── scene.js │ │ └── styles.css └── lighting-designer │ ├── README.md │ ├── package.json │ ├── public │ ├── colorful_studio_1k.hdr │ ├── index.html │ └── model │ │ ├── scene.bin │ │ └── scene.gltf │ └── src │ ├── car.js │ ├── controllerStore.js │ ├── index.js │ ├── scene.js │ ├── styles.css │ └── transformableLight.js ├── examples ├── basic │ ├── background-color │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ └── boilerplate │ │ ├── README.md │ │ ├── boilerplate.png │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── cameras │ ├── mapcontrols-camera-up-def │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── mapcontrols-screenspacepanning │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ └── orthographic-camera │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── effects │ ├── emissive-bloom-postprocessing │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── emissive.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── emissive-bloom │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── emissive.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-custom-lens-effect │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── circleLens.js │ │ │ ├── circleLensEffect.js │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── postprocessing-depth-of-field │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── emissive.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-dotscreen │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-eskil-vignette │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── postprocessing-glitch │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── postprocessing-godrays │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── emissive.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-laser-2 │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-laser-text │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── postprocessing-ssao │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── postprocessing-triangular-pixelation │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ ├── styles.css │ │ │ ├── triLens.js │ │ │ └── triLensEffect.js │ └── postprocessing-vignette │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ ├── scene.js │ │ └── styles.css ├── geometry │ ├── basic-plane │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ └── index.js │ ├── basic-sphere │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ └── index.js │ ├── instanced-cubes │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── instanced-ducks │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── duck │ │ │ │ ├── RubberDuck.bin │ │ │ │ ├── RubberDuck.gltf │ │ │ │ └── RubberDuck_BaseColor.png │ │ │ └── index.html │ │ ├── screenshot.webp │ │ └── src │ │ │ ├── duck.js │ │ │ ├── index.js │ │ │ └── styles.css │ ├── minimal-cube-example │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── rounded-box │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ └── wirewrap │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── hooks │ ├── camera-shake │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── drei-usehelper │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ └── rotating-cube │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── lighting │ ├── circular-light-path │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── pbr-environment-map │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── colorful_studio_1k.hdr │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── three-point-lighting │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ └── vsm-shadows │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── materials │ ├── emissive-mapping │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── emissive.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── glowing-torus │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── materials │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── shaded-torus-with-fake-lighting │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── shaded-torus │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── shader-material │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── textured-cube-with-shadows │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ └── planks │ │ │ │ ├── ao.jpg │ │ │ │ ├── base.jpg │ │ │ │ ├── height.png │ │ │ │ ├── normal.jpg │ │ │ │ └── roughness.jpg │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── textured-sphere-url-array │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ └── metal │ │ │ │ ├── metal1_ambientOcclusion.jpg │ │ │ │ ├── metal1_basecolor.jpg │ │ │ │ ├── metal1_height.png │ │ │ │ ├── metal1_metallic.jpg │ │ │ │ ├── metal1_normal.jpg │ │ │ │ └── metal1_roughness.jpg │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── textured-sphere-with-color │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── bw.jpg │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── textured-sphere │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ └── metal │ │ │ │ ├── metal1_ambientOcclusion.jpg │ │ │ │ ├── metal1_basecolor.jpg │ │ │ │ ├── metal1_height.png │ │ │ │ ├── metal1_metallic.jpg │ │ │ │ ├── metal1_normal.jpg │ │ │ │ └── metal1_roughness.jpg │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ └── usematcaptexture │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css ├── models │ └── gltf-model-loader │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── index.html │ │ ├── small-airplane-v3.bin │ │ └── small-airplane-v3.gltf │ │ └── src │ │ ├── index.js │ │ ├── model.js │ │ └── styles.css ├── other │ ├── enter-leave-tracking │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── html-labels │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── instanced-points │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ └── star.png │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── pointer-events │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ ├── small-airplane-v3.bin │ │ │ └── small-airplane-v3.gltf │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── r3f-perf │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ └── styles.css │ ├── reflector-textured │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── checkerboard.png │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ ├── reflector │ │ ├── .codesandbox │ │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── index.js │ │ │ ├── scene.js │ │ │ └── styles.css │ └── text │ │ ├── .codesandbox │ │ └── workspace.json │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── index.js │ │ └── styles.css └── physics │ ├── three-balls-perpetual-physics-usecannon │ ├── .codesandbox │ │ └── workspace.json │ ├── README.md │ ├── package.json │ ├── public │ │ ├── bw.png │ │ └── index.html │ └── src │ │ ├── ball.js │ │ ├── ground.js │ │ ├── index.js │ │ └── styles.css │ ├── three-balls-physics-usecannon │ ├── .codesandbox │ │ └── workspace.json │ ├── README.md │ ├── package.json │ ├── public │ │ ├── bw.png │ │ └── index.html │ └── src │ │ ├── ball.js │ │ ├── ground.js │ │ ├── index.js │ │ └── styles.css │ ├── usecannon-constraints-click-direction │ ├── .codesandbox │ │ └── workspace.json │ ├── README.md │ ├── package.json │ ├── public │ │ ├── bw.png │ │ └── index.html │ └── src │ │ ├── ball.js │ │ ├── ground.js │ │ ├── index.js │ │ └── styles.css │ ├── usecannon-constraints │ ├── .codesandbox │ │ └── workspace.json │ ├── README.md │ ├── package.json │ ├── public │ │ ├── bw.png │ │ └── index.html │ └── src │ │ ├── ball.js │ │ ├── ground.js │ │ ├── index.js │ │ └── styles.css │ └── usecannon-gravity-balls │ ├── .codesandbox │ └── workspace.json │ ├── README.md │ ├── package.json │ ├── public │ ├── bw.png │ └── index.html │ └── src │ ├── ball.js │ ├── ground.js │ ├── index.js │ └── styles.css ├── index.md ├── scripts ├── readme-generator.js └── toc-generator.js └── static ├── css ├── main.fed1ddaf.chunk.css └── main.fed1ddaf.chunk.css.map └── js ├── 2.57c42072.chunk.js ├── 2.57c42072.chunk.js.LICENSE.txt ├── 2.57c42072.chunk.js.map ├── main.d720395a.chunk.js ├── main.d720395a.chunk.js.map ├── runtime-main.e9e551ef.js └── runtime-main.e9e551ef.js.map /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | .DS_Store 3 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-three-fiber by example 2 | 3 | This site is best viewed at [https://onion2k.github.io/r3f-by-example/](https://onion2k.github.io/r3f-by-example/). 4 | 5 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | Use this section to tell people how to report a vulnerability. 6 | 7 | Tell them where to go, how often they can expect to get an update on a 8 | reported vulnerability, what to expect if the vulnerability is accepted or 9 | declined, etc. 10 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman 2 | title: react-three-fiber by example 3 | description: A collection of examples of using react-three-fiber -------------------------------------------------------------------------------- /apps/leva-custom-car-color/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /apps/leva-custom-car-color/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leva-custom-car-color", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "@react-three/postprocessing": "1.5.1", 10 | "leva": "0.3.1", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "3.4.3", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /apps/leva-custom-car-color/public/colorful_studio_1k.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/apps/leva-custom-car-color/public/colorful_studio_1k.hdr -------------------------------------------------------------------------------- /apps/leva-custom-car-color/public/model/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/apps/leva-custom-car-color/public/model/scene.bin -------------------------------------------------------------------------------- /apps/leva-custom-car-color/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { Stats, OrbitControls } from "@react-three/drei"; 5 | import { Ground } from "./scene"; 6 | import { useControls } from "leva"; 7 | import Car from "./car"; 8 | import "./styles.css"; 9 | 10 | function CustomCar() { 11 | const { color, metal, rough } = useControls({ 12 | color: { r: 200, b: 125, g: 106 }, 13 | metal: { 14 | value: 0.25, 15 | min: 0, 16 | max: 1, 17 | step: 0.01 18 | }, 19 | rough: { 20 | value: 0.25, 21 | min: 0, 22 | max: 1, 23 | step: 0.01 24 | } 25 | }); 26 | 27 | return ( 28 | 29 | 36 | 37 | ); 38 | } 39 | 40 | const App = () => { 41 | return ( 42 | 47 | 48 | 49 | 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | ReactDOM.render(, document.getElementById("root")); 66 | -------------------------------------------------------------------------------- /apps/leva-custom-car-color/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /apps/lighting-designer/README.md: -------------------------------------------------------------------------------- 1 | An example app in r3f - click lights to move them around. -------------------------------------------------------------------------------- /apps/lighting-designer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lighting-design", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.5.0", 9 | "@react-three/postprocessing": "1.5.1", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "^4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.0", 15 | "zustand": "3.3.1" 16 | }, 17 | "devDependencies": { 18 | "typescript": "^3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /apps/lighting-designer/public/colorful_studio_1k.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/apps/lighting-designer/public/colorful_studio_1k.hdr -------------------------------------------------------------------------------- /apps/lighting-designer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 21 | React App 22 | 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /apps/lighting-designer/public/model/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/apps/lighting-designer/public/model/scene.bin -------------------------------------------------------------------------------- /apps/lighting-designer/src/controllerStore.js: -------------------------------------------------------------------------------- 1 | import create from "zustand"; 2 | 3 | const useCameraControllerStore = create((set) => ({ 4 | enabled: true 5 | })); 6 | 7 | export default useCameraControllerStore; 8 | -------------------------------------------------------------------------------- /apps/lighting-designer/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, useRef, useEffect } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { Stats, OrbitControls } from "@react-three/drei"; 5 | import useCameraControllerStore from "./controllerStore"; 6 | import TransformableLight from "./transformableLight"; 7 | import { Ground } from "./scene"; 8 | import Car from "./car"; 9 | import "./styles.css"; 10 | 11 | const Camera = () => { 12 | const enabled = useCameraControllerStore((state) => state.enabled); 13 | const camRef = useRef(); 14 | useEffect(() => { 15 | camRef.current.enabled = enabled; 16 | }, [enabled]); 17 | return ; 18 | }; 19 | 20 | const App = () => { 21 | return ( 22 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | }; 39 | 40 | ReactDOM.render(, document.getElementById("root")); 41 | -------------------------------------------------------------------------------- /apps/lighting-designer/src/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body, 7 | #root { 8 | width: 100%; 9 | height: 100%; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | -------------------------------------------------------------------------------- /examples/basic/background-color/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/basic/background-color/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "background-color", 3 | "version": "1.0.0", 4 | "description": "Using a color element to attach a background color to a scene", 5 | "homepage": "https://codesandbox.io/s/background-color-x9sdl", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/basic/background-color/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import "./styles.css"; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | ReactDOM.render(, document.getElementById("root")); 15 | -------------------------------------------------------------------------------- /examples/basic/background-color/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/basic/boilerplate/boilerplate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/basic/boilerplate/boilerplate.png -------------------------------------------------------------------------------- /examples/basic/boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boilerplate", 3 | "version": "1.0.0", 4 | "description": "A minimal boilerplate for r3f", 5 | "homepage": "https://codesandbox.io/s/boilerplate-h2w36", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/basic/boilerplate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/basic/boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import "./styles.css"; 5 | 6 | const Box = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | const App = () => { 16 | return ( 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | render(, document.getElementById("root")); 25 | -------------------------------------------------------------------------------- /examples/basic/boilerplate/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-camera-up-def/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-camera-up-def/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-controls", 3 | "version": "1.0.0", 4 | "description": "Using Drei's map controls to pan around a scene", 5 | "homepage": "https://codesandbox.io/s/mapcontrols-ywu32", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-camera-up-def/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { MapControls, Stats } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const Torus = () => { 8 | const torusRef = useRef(); 9 | 10 | useFrame(() => { 11 | torusRef.current.rotation.x += 0.03; 12 | torusRef.current.rotation.y += 0.03; 13 | }); 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | const App = () => { 24 | return ( 25 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | ReactDOM.render(, document.getElementById("root")); 38 | -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-camera-up-def/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-screenspacepanning/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-screenspacepanning/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mapcontrols-screenspacepanning", 3 | "version": "1.0.0", 4 | "description": "Using MapControls screenspace panning to normalize mouse movements to the viewport", 5 | "homepage": "https://codesandbox.io/s/mapcontrols-screenspacepanning-nm5tn", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.2", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-screenspacepanning/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { MapControls, Stats } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const Sphere = (props) => { 8 | return ( 9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | function Grid() { 17 | const x = 10; 18 | const y = 10; 19 | 20 | const spheres = Array(x * y) 21 | .fill() 22 | .map((s, i) => { 23 | return ( 24 | 27 | ); 28 | }); 29 | 30 | return spheres; 31 | } 32 | 33 | const App = () => { 34 | return ( 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | ReactDOM.render(, document.getElementById("root")); 45 | -------------------------------------------------------------------------------- /examples/cameras/mapcontrols-screenspacepanning/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/cameras/orthographic-camera/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/cameras/orthographic-camera/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "orthographic-camera", 3 | "version": "1.0.0", 4 | "description": "Using an orthographic projection camera in r3f", 5 | "homepage": "https://codesandbox.io/s/orthographic-camera-2xg1k", 6 | "keywords": [ 7 | "react", 8 | "starter" 9 | ], 10 | "main": "src/index.js", 11 | "dependencies": { 12 | "@react-three/drei": "3.8.2", 13 | "react": "17.0.0", 14 | "react-dom": "17.0.0", 15 | "react-scripts": "4.0.2", 16 | "react-three-fiber": "5.3.18", 17 | "three": "0.125.2" 18 | }, 19 | "devDependencies": { 20 | "typescript": "3.8.3" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test --env=jsdom", 26 | "eject": "react-scripts eject" 27 | }, 28 | "browserslist": [ 29 | ">0.2%", 30 | "not dead", 31 | "not ie <= 11", 32 | "not op_mini all" 33 | ] 34 | } -------------------------------------------------------------------------------- /examples/cameras/orthographic-camera/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, OrthographicCamera } from "@react-three/drei"; 5 | 6 | const Box = (props) => { 7 | const boxRef = useRef(); 8 | 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | const App = () => { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 41 | 42 | ); 43 | }; 44 | 45 | ReactDOM.render(, document.getElementById("root")); 46 | -------------------------------------------------------------------------------- /examples/cameras/orthographic-camera/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/effects/emissive-bloom-postprocessing/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/emissive-bloom-postprocessing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emissive-bloom-2", 3 | "version": "1.0.0", 4 | "description": "Using the postprocessing library to make emissive text with bloom for a glow", 5 | "homepage": "https://codesandbox.io/s/emissive-bloom-2-wz46v", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.1", 11 | "postprocessing": "6.20.3", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.18", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/effects/emissive-bloom-postprocessing/public/emissive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/effects/emissive-bloom-postprocessing/public/emissive.png -------------------------------------------------------------------------------- /examples/effects/emissive-bloom-postprocessing/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/emissive-bloom/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/emissive-bloom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emissive-bloom", 3 | "version": "1.0.0", 4 | "description": "Adding emissive materials with bloom to create glowing text", 5 | "homepage": "https://codesandbox.io/s/emissive-bloom-796sc", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.122.0" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/effects/emissive-bloom/public/emissive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/effects/emissive-bloom/public/emissive.png -------------------------------------------------------------------------------- /examples/effects/emissive-bloom/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-lens-effect", 3 | "version": "1.0.0", 4 | "description": "Using postprocessing to create a custom effect like concentric circular lenses", 5 | "homepage": "https://codesandbox.io/s/custom-lens-effect-kvtil", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.1", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "3.4.3", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/src/circleLens.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, useMemo } from "react"; 2 | import { CircleLensEffect } from "./circleLensEffect"; 3 | 4 | export const CircleLens = forwardRef(({ fragments = 5 }, ref) => { 5 | const effect = useMemo(() => new CircleLensEffect(fragments), [fragments]); 6 | return ; 7 | }); 8 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer } from "@react-three/postprocessing"; 5 | import { CircleLens } from "./circleLens"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | } 18 | const App = () => { 19 | return ( 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | ReactDOM.render(, document.getElementById("root")); 38 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-custom-lens-effect/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-depth-of-field/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-depth-of-field/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "depth-of-field", 3 | "version": "1.0.0", 4 | "description": "Using postprocessing to create Depth of Field", 5 | "homepage": "https://codesandbox.io/s/depth-of-field-iw2gb", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "2.2.7", 10 | "@react-three/postprocessing": "1.5.1", 11 | "postprocessing": "6.20.3", 12 | "react": "17.0.1", 13 | "react-dom": "17.0.1", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.1", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-depth-of-field/public/emissive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/effects/postprocessing-depth-of-field/public/emissive.png -------------------------------------------------------------------------------- /examples/effects/postprocessing-depth-of-field/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-dotscreen/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-dotscreen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dotscreen", 3 | "version": "1.0.0", 4 | "description": "Using postprocessing to create a halftone-like dotscreen effect", 5 | "homepage": "https://codesandbox.io/s/dotscreen-1vsv1", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.1", 11 | "postprocessing": "6.20.3", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.18", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-dotscreen/src/index.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React, { useRef, Suspense } from "react"; 3 | import { render } from "react-dom"; 4 | import { Canvas, useFrame } from "react-three-fiber"; 5 | import { EffectComposer, DotScreen } from "@react-three/postprocessing"; 6 | import { BlendFunction } from "postprocessing"; 7 | import "./styles.css"; 8 | 9 | function Knot() { 10 | const knotRef = useRef(); 11 | 12 | useFrame(() => { 13 | knotRef.current.rotation.y += -0.01; 14 | }); 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | 24 | function Effects() { 25 | return ( 26 | 27 | 32 | 33 | ); 34 | } 35 | 36 | render( 37 | { 41 | gl.setClearColor(new THREE.Color("#000000")); 42 | }} 43 | > 44 | 45 | 46 | 47 | 48 | 49 | , 50 | document.querySelector("#root") 51 | ); 52 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-dotscreen/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-eskil-vignette/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-eskil-vignette/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eskil-vignette", 3 | "version": "1.0.0", 4 | "description": "Creating a vignette using the Eskil option in postprocessing vignette", 5 | "homepage": "https://codesandbox.io/s/eskil-vignette-4jnnn", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.0", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.1", 15 | "three": "0.122.0" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-eskil-vignette/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer, Vignette } from "@react-three/postprocessing"; 5 | import { BlendFunction } from "postprocessing"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 24 | 25 | ); 26 | } 27 | 28 | const App = () => { 29 | return ( 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | ReactDOM.render(, document.getElementById("root")); 48 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-eskil-vignette/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-eskil-vignette/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-glitch/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-glitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glitch", 3 | "version": "1.0.0", 4 | "description": "Creating a glitchy shader overlay", 5 | "homepage": "https://codesandbox.io/s/glitch-rmew5", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "2.2.7", 10 | "@react-three/postprocessing": "1.5.1", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "3.4.3", 14 | "react-three-fiber": "5.3.1", 15 | "three": "0.122.0" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-glitch/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer, Glitch } from "@react-three/postprocessing"; 5 | import { GlitchMode } from "postprocessing"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 22 | 23 | ); 24 | } 25 | 26 | const App = () => { 27 | return ( 28 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | ReactDOM.render(, document.getElementById("root")); 46 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-glitch/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-glitch/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-godrays/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-godrays/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "godrays", 3 | "version": "1.0.0", 4 | "description": "Creating a light-through-smoke godrays effect", 5 | "homepage": "https://codesandbox.io/s/godrays-8nxmb", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.1", 11 | "postprocessing": "6.20.3", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.18", 16 | "three": "0.122.0" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-godrays/public/emissive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/effects/postprocessing-godrays/public/emissive.png -------------------------------------------------------------------------------- /examples/effects/postprocessing-godrays/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-2/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "godrays-2", 3 | "version": "1.0.0", 4 | "description": "Another example of godrays", 5 | "homepage": "https://codesandbox.io/s/godrays-2-6488m", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/postprocessing": "1.5.0", 10 | "postprocessing": "6.20.3", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.1", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-2/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-text/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laser-text", 3 | "version": "1.0.0", 4 | "description": "Godrays combined with Drei's Text component", 5 | "homepage": "https://codesandbox.io/s/laser-text-9r6xl", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "2.2.7", 10 | "@react-three/postprocessing": "1.5.1", 11 | "postprocessing": "6.19.0", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.1", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-laser-text/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-ssao/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-ssao/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssao-screenspace-ambient-occlusion", 3 | "version": "1.0.0", 4 | "description": "Screenspace ambient occusion - shadows where objects would occlude light", 5 | "homepage": "https://codesandbox.io/s/ssao-exnlt", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.0", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "3.4.3", 14 | "react-three-fiber": "5.3.1", 15 | "three": "0.122.0" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-ssao/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer, SSAO } from "@react-three/postprocessing"; 5 | import { BlendFunction } from "postprocessing"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 20 | 21 | ); 22 | } 23 | 24 | const App = () => { 25 | return ( 26 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | }; 42 | 43 | ReactDOM.render(, document.getElementById("root")); 44 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-ssao/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-ssao/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "triangular-pixelation", 3 | "version": "1.0.0", 4 | "description": "A custom triangular pixelation shader effect", 5 | "homepage": "https://codesandbox.io/s/triangular-pixelation-c7fkk", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.1", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer } from "@react-three/postprocessing"; 5 | import { TriangularLens } from "./triLens"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | const App = () => { 20 | return ( 21 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | ReactDOM.render(, document.getElementById("root")); 39 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-triangular-pixelation/src/triLens.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, useMemo } from "react"; 2 | import { TriangularLensEffect } from "./triLensEffect"; 3 | 4 | export const TriangularLens = forwardRef(({ fragments = 153 }, ref) => { 5 | const effect = useMemo(() => new TriangularLensEffect(fragments), [ 6 | fragments 7 | ]); 8 | return ; 9 | }); 10 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-vignette/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-vignette/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vignette", 3 | "version": "1.0.0", 4 | "description": "A basic vignette using postprocessing", 5 | "homepage": "https://codesandbox.io/s/vignette-dp598", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "@react-three/postprocessing": "1.5.0", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.1", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/effects/postprocessing-vignette/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { EffectComposer, Vignette } from "@react-three/postprocessing"; 5 | import { BlendFunction } from "postprocessing"; 6 | import { OrbitControls, Stats } from "@react-three/drei"; 7 | import "./styles.css"; 8 | 9 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 10 | 11 | function Effects() { 12 | return ( 13 | 14 | 24 | 25 | ); 26 | } 27 | 28 | const App = () => { 29 | return ( 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | ReactDOM.render(, document.getElementById("root")); 48 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-vignette/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/effects/postprocessing-vignette/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/geometry/basic-plane/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/basic-plane/README.md: -------------------------------------------------------------------------------- 1 | ![react-three-fiber](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/onion2k/r3f-by-example/develop/examples/geometry/basic-plane/package.json&label=react-three-fiber&query=$.dependencies['react-three-fiber']&color=green) ![react-three-fiber](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/onion2k/r3f-by-example/develop/examples/geometry/basic-plane/package.json&label=three&query=$.dependencies['three']&color=green) 2 | 3 | # Basic plane 4 | 5 | A basic plane geometry. [Fork on Codesandbox](https://githubbox.com/onion2k/r3f-by-example/tree/develop/examples/geometry/basic-plane) 6 | 7 | ## Live example 8 |
9 |
10 | Coming Soon 11 |
12 |
13 | 14 | ## Code 15 | ```js 16 | import React from "react"; 17 | import { render } from "react-dom"; 18 | import { Canvas } from "react-three-fiber"; 19 | 20 | const Box = () => { 21 | return ( 22 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | const App = () => { 30 | return ( 31 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | render(, document.getElementById("root")); 42 | 43 | ``` 44 | 45 | ## Running this example 46 | 47 | Clone this repo, and then NPM install and NPM start from the relevant directory. 48 | 49 | ```bash 50 | $ cd examples/geometry/basic-plane 51 | $ npm install && npm run start 52 | ``` -------------------------------------------------------------------------------- /examples/geometry/basic-plane/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basic-plane", 3 | "version": "1.0.0", 4 | "description": "A basic plane geometry", 5 | "homepage": "https://codesandbox.io/s/basic-plane-4qln1", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/geometry/basic-plane/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/geometry/basic-plane/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | 5 | const Box = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | const App = () => { 15 | return ( 16 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | render(, document.getElementById("root")); 27 | -------------------------------------------------------------------------------- /examples/geometry/basic-sphere/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/basic-sphere/README.md: -------------------------------------------------------------------------------- 1 | ![react-three-fiber](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/onion2k/r3f-by-example/develop/examples/geometry/basic-sphere/package.json&label=react-three-fiber&query=$.dependencies['react-three-fiber']&color=green) ![react-three-fiber](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/onion2k/r3f-by-example/develop/examples/geometry/basic-sphere/package.json&label=three&query=$.dependencies['three']&color=green) 2 | 3 | # Basic sphere 4 | 5 | A basic sphere geometry. [Fork on Codesandbox](https://githubbox.com/onion2k/r3f-by-example/tree/develop/examples/geometry/basic-sphere) 6 | 7 | ## Live example 8 |
9 |
10 | Coming Soon 11 |
12 |
13 | 14 | ## Code 15 | ```js 16 | import React from "react"; 17 | import { render } from "react-dom"; 18 | import { Canvas } from "react-three-fiber"; 19 | 20 | const Sphere = () => { 21 | return ( 22 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | const App = () => { 30 | return ( 31 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | render(, document.getElementById("root")); 42 | 43 | ``` 44 | 45 | ## Running this example 46 | 47 | Clone this repo, and then NPM install and NPM start from the relevant directory. 48 | 49 | ```bash 50 | $ cd examples/geometry/basic-sphere 51 | $ npm install && npm run start 52 | ``` -------------------------------------------------------------------------------- /examples/geometry/basic-sphere/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basic-sphere", 3 | "version": "1.0.0", 4 | "description": "A basic sphere geometry", 5 | "homepage": "https://codesandbox.io/s/basic-sphere-noojf", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/geometry/basic-sphere/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/geometry/basic-sphere/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | 5 | const Sphere = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | const App = () => { 15 | return ( 16 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | render(, document.getElementById("root")); 27 | -------------------------------------------------------------------------------- /examples/geometry/instanced-cubes/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/instanced-cubes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instanced-cubes", 3 | "version": "1.0.0", 4 | "description": "Drawing lots of cubes using instancing", 5 | "homepage": "https://codesandbox.io/s/instanced-cubes-w9zq7", 6 | "keywords": [ 7 | "react", 8 | "starter" 9 | ], 10 | "main": "src/index.js", 11 | "dependencies": { 12 | "@react-three/drei": "3.8.2", 13 | "react": "17.0.0", 14 | "react-dom": "17.0.0", 15 | "react-scripts": "4.0.2", 16 | "react-three-fiber": "5.3.18", 17 | "three": "0.125.2" 18 | }, 19 | "devDependencies": { 20 | "typescript": "3.8.3" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test --env=jsdom", 26 | "eject": "react-scripts eject" 27 | }, 28 | "browserslist": [ 29 | ">0.2%", 30 | "not dead", 31 | "not ie <= 11", 32 | "not op_mini all" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /examples/geometry/instanced-cubes/src/index.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React, { useRef } from "react"; 3 | import ReactDOM from "react-dom"; 4 | import { Canvas, useFrame } from "react-three-fiber"; 5 | import { OrbitControls, Stats } from "@react-three/drei"; 6 | import "./styles.css"; 7 | 8 | const tempBoxes = new THREE.Object3D(); 9 | 10 | const Boxes = ({ i, j }) => { 11 | const material = new THREE.MeshLambertMaterial({ color: "red" }); 12 | const boxesGeometry = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5); 13 | const ref = useRef(); 14 | 15 | useFrame(({ clock }) => { 16 | let counter = 0; 17 | const t = clock.oldTime * 0.001; 18 | for (let x = 0; x < i; x++) { 19 | for (let z = 0; z < j; z++) { 20 | const id = counter++; 21 | tempBoxes.position.set(i / 2 - x, 0, j / 2 - z); 22 | tempBoxes.rotation.y = t; 23 | tempBoxes.updateMatrix(); 24 | ref.current.setMatrixAt(id, tempBoxes.matrix); 25 | } 26 | } 27 | ref.current.instanceMatrix.needsUpdate = true; 28 | }); 29 | 30 | return ; 31 | }; 32 | 33 | const App = () => { 34 | return ( 35 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | ReactDOM.render(, document.getElementById("root")); 48 | -------------------------------------------------------------------------------- /examples/geometry/instanced-cubes/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instanced-ducks", 3 | "version": "1.0.0", 4 | "description": "Loading a gltf model and drawing it lots of times using instancing", 5 | "homepage": "https://codesandbox.io/s/instanced-ducks-os16k", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.2", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/public/duck/RubberDuck.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/geometry/instanced-ducks/public/duck/RubberDuck.bin -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/public/duck/RubberDuck_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/geometry/instanced-ducks/public/duck/RubberDuck_BaseColor.png -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/geometry/instanced-ducks/screenshot.webp -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/src/duck.js: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | GOOGLE_processor_version: 294144208 4 | */ 5 | 6 | import { useGLTF } from "@react-three/drei"; 7 | 8 | export default function Model(props) { 9 | const { nodes, materials } = useGLTF("/duck/RubberDuck.gltf"); 10 | const duck = nodes["node-0"].geometry.scale(0.1, 0.1, 0.1); 11 | return { 12 | material: materials.RubberDuck_mat1, 13 | geometry: duck 14 | }; 15 | } 16 | 17 | useGLTF.preload("/duck/RubberDuck.gltf"); 18 | -------------------------------------------------------------------------------- /examples/geometry/instanced-ducks/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/geometry/minimal-cube-example/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/minimal-cube-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "minimal-cube", 3 | "version": "1.0.0", 4 | "description": "A very minimal cube example", 5 | "homepage": "https://codesandbox.io/s/minimal-cube-dqvtu", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.2", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/geometry/minimal-cube-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import "./styles.css"; 5 | 6 | const Box = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | const App = () => { 16 | return ( 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | render(, document.getElementById("root")); 25 | -------------------------------------------------------------------------------- /examples/geometry/minimal-cube-example/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/geometry/rounded-box/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/rounded-box/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rounded-box", 3 | "version": "1.0.0", 4 | "description": "Drei's rounded box geometry", 5 | "homepage": "https://codesandbox.io/s/rounded-box-16r0k", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/geometry/rounded-box/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/geometry/rounded-box/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats, RoundedBox } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | ReactDOM.render(, document.getElementById("root")); 21 | -------------------------------------------------------------------------------- /examples/geometry/rounded-box/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/geometry/wirewrap/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/geometry/wirewrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wirewrap", 3 | "version": "1.0.0", 4 | "description": "A tube geometry that follows the vertices of a sphere", 5 | "homepage": "https://codesandbox.io/s/wirewrap-xhthh", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.124.0" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/geometry/wirewrap/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as THREE from "three"; 3 | import ReactDOM from "react-dom"; 4 | import { Canvas } from "react-three-fiber"; 5 | import { OrbitControls, Stats } from "@react-three/drei"; 6 | import "./styles.css"; 7 | 8 | /** 9 | * NOTE: This won't work after Three r124 because of buffergeddon. 10 | */ 11 | 12 | const Wirewrap = () => { 13 | const base = new THREE.IcosahedronGeometry(3, 7); 14 | const curveVertices = base.vertices.map(function (handlePos, i) { 15 | return new THREE.Vector3(handlePos.x, handlePos.y, handlePos.z); 16 | }); 17 | 18 | const curve = new THREE.CatmullRomCurve3(curveVertices); 19 | curve.curveType = "centripetal"; 20 | curve.tension = 1.0; 21 | curve.closed = true; 22 | 23 | const extruded = new THREE.TubeGeometry( 24 | curve, 25 | base.vertices.length * 15, 26 | 0.05, 27 | 18, 28 | true 29 | ); 30 | 31 | const wire = ( 32 | 33 | 34 | 35 | ); 36 | 37 | return wire; 38 | }; 39 | 40 | const App = () => { 41 | return ( 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | ReactDOM.render(, document.getElementById("root")); 53 | -------------------------------------------------------------------------------- /examples/geometry/wirewrap/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/hooks/camera-shake/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/hooks/camera-shake/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "camera-shake", 3 | "version": "1.0.0", 4 | "description": "A camera shake effect", 5 | "homepage": "https://codesandbox.io/s/usecamerashake-nttvw", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/hooks/camera-shake/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { Stats, OrbitControls, CameraShake } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 8 | 9 | function WobbleCamera() { 10 | const shakeRef = useRef(); 11 | const orbitRef = useRef(); 12 | useEffect(() => { 13 | orbitRef.current.addEventListener("change", () => { 14 | const shake = shakeRef.current.getIntensity(); 15 | shakeRef.current.setIntensity(shake + 0.015); 16 | }); 17 | }, [orbitRef]); 18 | 19 | return ( 20 | <> 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | const App = () => { 28 | return ( 29 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | ReactDOM.render(, document.getElementById("root")); 46 | -------------------------------------------------------------------------------- /examples/hooks/camera-shake/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/hooks/camera-shake/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/hooks/drei-usehelper/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/hooks/drei-usehelper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drei-usehelper", 3 | "version": "1.0.0", 4 | "description": "Drawing helpers using the useHelper hook", 5 | "homepage": "https://codesandbox.io/s/usehelper-jq4bx", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.1", 11 | "react-dom": "17.0.1", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.124.0" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/hooks/drei-usehelper/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls, Stats, useHelper } from "@react-three/drei"; 5 | import { BoxHelper } from "three"; 6 | import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper"; 7 | import { FaceNormalsHelper } from "three/examples/jsm/helpers/FaceNormalsHelper"; 8 | import "./styles.css"; 9 | 10 | const CubeWithHelpers = () => { 11 | const cubeRef = useRef(); 12 | useHelper(cubeRef, BoxHelper, "blue"); 13 | useHelper(cubeRef, VertexNormalsHelper, 1, "green"); 14 | useHelper(cubeRef, FaceNormalsHelper, 0.5, "yellow"); 15 | 16 | useFrame(() => { 17 | cubeRef.current.rotation.x += 0.01; 18 | cubeRef.current.rotation.y += 0.01; 19 | }); 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | const App = () => { 30 | return ( 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | }; 39 | 40 | ReactDOM.render(, document.getElementById("root")); 41 | -------------------------------------------------------------------------------- /examples/hooks/drei-usehelper/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/hooks/rotating-cube/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/hooks/rotating-cube/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rotating-cube", 3 | "version": "1.0.0", 4 | "description": "Rotating a cube using the useFrame hook", 5 | "homepage": "https://codesandbox.io/s/rotating-cube-9yw8e", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/hooks/rotating-cube/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import "./styles.css"; 5 | 6 | const Box = () => { 7 | const boxRef = useRef(); 8 | 9 | useFrame(() => { 10 | boxRef.current.rotation.y += 0.01; 11 | }); 12 | 13 | return ( 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | const App = () => { 22 | return ( 23 | 24 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | render(, document.getElementById("root")); 31 | -------------------------------------------------------------------------------- /examples/hooks/rotating-cube/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/lighting/circular-light-path/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/lighting/circular-light-path/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "circular-light-path", 3 | "version": "1.0.0", 4 | "description": "A simple light following a circular path", 5 | "homepage": "https://codesandbox.io/s/animated-lighting-zrf7x", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.1", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/lighting/circular-light-path/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/lighting/circular-light-path/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/lighting/pbr-environment-map/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/lighting/pbr-environment-map/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pbr-environment-map", 3 | "version": "1.0.0", 4 | "description": "Lighting using environment mapping", 5 | "homepage": "https://codesandbox.io/s/environment-mapping-m1v9f", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "3.4.3", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/lighting/pbr-environment-map/public/colorful_studio_1k.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/lighting/pbr-environment-map/public/colorful_studio_1k.hdr -------------------------------------------------------------------------------- /examples/lighting/pbr-environment-map/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import { render } from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { Stats, OrbitControls, Environment } from "@react-three/drei"; 5 | 6 | const Ball = ({ position, children }) => { 7 | return ( 8 | 9 | 10 | {children} 11 | 12 | ); 13 | }; 14 | 15 | const App = () => { 16 | const materials = [ 17 | , 18 | , 19 | , 20 | , 21 | 22 | ]; 23 | return ( 24 | 25 | 26 | {materials.map((mat, i) => ( 27 | 28 | {mat} 29 | 30 | ))} 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | render(, document.getElementById("root")); 40 | -------------------------------------------------------------------------------- /examples/lighting/pbr-environment-map/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/lighting/three-point-lighting/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/lighting/three-point-lighting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-point-lighting", 3 | "version": "1.0.0", 4 | "description": "An example of three point lighting", 5 | "homepage": "https://codesandbox.io/s/three-point-lighting-k36tb", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/lighting/three-point-lighting/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | import { SmallBox, Wall, Box, Ball, Ground } from "./scene"; 8 | 9 | const App = () => { 10 | return ( 11 | 16 | 25 | 34 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | ReactDOM.render(, document.getElementById("root")); 55 | -------------------------------------------------------------------------------- /examples/lighting/three-point-lighting/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 58 | 59 | 60 | 61 | ); 62 | }; 63 | -------------------------------------------------------------------------------- /examples/lighting/three-point-lighting/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/lighting/vsm-shadows/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/lighting/vsm-shadows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vsm-shadows", 3 | "version": "1.0.0", 4 | "description": "High quality VSM shadow mapping", 5 | "homepage": "https://codesandbox.io/s/vsm-shadows-npwcv", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/drei": "3.8.6", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.18", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/lighting/vsm-shadows/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/emissive-mapping/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/emissive-mapping/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emissive-mapping", 3 | "version": "1.0.0", 4 | "description": "Glowing text using emissive mapping", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.1", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/emissive-mapping/public/emissive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/emissive-mapping/public/emissive.png -------------------------------------------------------------------------------- /examples/materials/emissive-mapping/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/glowing-torus/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/glowing-torus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glowing-torus", 3 | "version": "1.0.0", 4 | "description": "A shader material glow effect", 5 | "keywords": [ 6 | "react", 7 | "starter" 8 | ], 9 | "main": "src/index.js", 10 | "dependencies": { 11 | "@react-three/drei": "2.2.7", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "3.4.3", 15 | "react-three-fiber": "5.3.1", 16 | "three": "0.122.0" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/materials/glowing-torus/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/materials/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/materials/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "materials", 3 | "version": "1.0.0", 4 | "description": "Examples of five basic material types", 5 | "keywords": [ 6 | "react", 7 | "starter" 8 | ], 9 | "main": "src/index.js", 10 | "dependencies": { 11 | "@react-three/drei": "3.8.6", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.18", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/materials/materials/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats } from "@react-three/drei"; 5 | 6 | const Sphere = (props) => { 7 | const sphereRef = useRef(); 8 | 9 | return ( 10 | 11 | 12 | {props.children} 13 | 14 | ); 15 | }; 16 | 17 | const App = () => { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | ReactDOM.render(, document.getElementById("root")); 48 | -------------------------------------------------------------------------------- /examples/materials/materials/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/materials/shaded-torus-with-fake-lighting/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/shaded-torus-with-fake-lighting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shaded-torus-with-shadow", 3 | "version": "1.0.0", 4 | "description": "A fake lighting shader material on a torus", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/shaded-torus-with-fake-lighting/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/shaded-torus/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/shaded-torus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shaded-torus", 3 | "version": "1.0.0", 4 | "description": "A shader material applied to a torus", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/shaded-torus/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const TorusShaderMaterial = { 8 | uniforms: { 9 | u_time: { type: "f", value: 0 } 10 | }, 11 | vertexShader: ` 12 | precision mediump float; 13 | varying vec2 vUv; 14 | void main() { 15 | vec4 mvPosition = modelViewMatrix * vec4(position, 1.); 16 | gl_Position = projectionMatrix * mvPosition; 17 | vUv = uv; 18 | } 19 | `, 20 | fragmentShader: ` 21 | varying vec2 vUv; 22 | uniform float u_time; 23 | void main() { 24 | vec2 uv = vUv; 25 | float cb = floor((uv.x + u_time) * 40.); 26 | gl_FragColor = vec4(mod(cb, 2.0),0.,0.,1.); 27 | } 28 | ` 29 | }; 30 | 31 | const Torus = (props) => { 32 | const torusRef = useRef(); 33 | 34 | useFrame(({ clock }) => { 35 | torusRef.current.material.uniforms.u_time.value = clock.oldTime * 0.0001; 36 | }); 37 | 38 | return ( 39 | 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | const App = () => { 47 | return ( 48 | 49 | 50 | 51 | 52 | 53 | ); 54 | }; 55 | 56 | ReactDOM.render(, document.getElementById("root")); 57 | -------------------------------------------------------------------------------- /examples/materials/shaded-torus/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/shader-material/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/shader-material/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shader-material-sphere", 3 | "version": "1.0.0", 4 | "description": "A checkerboard shader material on a sphere", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/shader-material/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls, Stats } from "@react-three/drei"; 5 | 6 | const SphereShaderMaterial = { 7 | uniforms: { 8 | u_time: { type: "f", value: 0 } 9 | }, 10 | vertexShader: ` 11 | precision mediump float; 12 | varying vec2 vUv; 13 | void main() { 14 | vec4 mvPosition = modelViewMatrix * vec4(position, 1.); 15 | gl_Position = projectionMatrix * mvPosition; 16 | vUv = uv; 17 | } 18 | `, 19 | fragmentShader: ` 20 | varying vec2 vUv; 21 | uniform float u_time; 22 | 23 | void main() { 24 | vec2 uv = vUv; 25 | float cb = floor((uv.x + u_time)*20.) + floor((uv.y + u_time)*20.); 26 | gl_FragColor = vec4(1.,0.,0.,mod(cb, 2.0)); 27 | } 28 | ` 29 | }; 30 | 31 | const ShaderSphere = (props) => { 32 | const sphereRef = useRef(); 33 | 34 | useFrame(({ clock }) => { 35 | sphereRef.current.material.uniforms.u_time.value = clock.oldTime * 0.00005; 36 | }); 37 | 38 | return ( 39 | 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | const App = () => { 47 | return ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | ReactDOM.render(, document.getElementById("root")); 58 | -------------------------------------------------------------------------------- /examples/materials/shader-material/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "textured-cube-with-shadows", 3 | "version": "1.0.0", 4 | "description": "Using materials with shadows", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/public/planks/ao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-cube-with-shadows/public/planks/ao.jpg -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/public/planks/base.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-cube-with-shadows/public/planks/base.jpg -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/public/planks/height.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-cube-with-shadows/public/planks/height.png -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/public/planks/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-cube-with-shadows/public/planks/normal.jpg -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/public/planks/roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-cube-with-shadows/public/planks/roughness.jpg -------------------------------------------------------------------------------- /examples/materials/textured-cube-with-shadows/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "textured-sphere-url-array", 3 | "version": "1.0.0", 4 | "description": "A simpler way of loading several maps to apply to a texture", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_ambientOcclusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_ambientOcclusion.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_basecolor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_basecolor.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_height.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_height.png -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_metallic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_metallic.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_normal.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/public/metal/metal1_roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-url-array/public/metal/metal1_roughness.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-url-array/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/textured-sphere-with-color/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere-with-color/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "textured-sphere-with-color", 3 | "version": "1.0.0", 4 | "description": "Combining a map with a color in a material", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere-with-color/public/bw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere-with-color/public/bw.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere-with-color/src/index.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React, { Suspense, useRef } from "react"; 3 | import ReactDOM from "react-dom"; 4 | import { Canvas, useLoader } from "react-three-fiber"; 5 | import { OrbitControls, Stats } from "@react-three/drei"; 6 | import "./styles.css"; 7 | 8 | const Sphere = () => { 9 | const sphereRef = useRef(); 10 | const repeatX = 2; 11 | const repeatY = 2; 12 | 13 | const base = useLoader(THREE.TextureLoader, "/bw.jpg"); 14 | base.wrapS = THREE.RepeatWrapping; 15 | base.wrapT = THREE.RepeatWrapping; 16 | base.repeat.set(repeatX, repeatY); 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | const App = () => { 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | ReactDOM.render(, document.getElementById("root")); 42 | -------------------------------------------------------------------------------- /examples/materials/textured-sphere-with-color/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/textured-sphere/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "textured-sphere", 3 | "version": "1.0.0", 4 | "description": "Applying several maps to a sphere", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_ambientOcclusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_ambientOcclusion.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_basecolor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_basecolor.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_height.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_height.png -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_metallic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_metallic.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_normal.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere/public/metal/metal1_roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/materials/textured-sphere/public/metal/metal1_roughness.jpg -------------------------------------------------------------------------------- /examples/materials/textured-sphere/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/materials/usematcaptexture/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/materials/usematcaptexture/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usematcaptexture", 3 | "version": "1.0.0", 4 | "description": "Accessing useMatcapTexture for high quality materials", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/materials/usematcaptexture/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, Suspense } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls, useMatcapTexture, Stats } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const Ring = () => { 8 | const ringRef = useRef(); 9 | const [matcapTexture] = useMatcapTexture("C9C7BE_55514B_888279_7B6E5F", 1024); 10 | 11 | useFrame(() => { 12 | ringRef.current.rotation.x += 0.01; 13 | ringRef.current.rotation.y += 0.01; 14 | }); 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | const App = () => { 25 | return ( 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | ReactDOM.render(, document.getElementById("root")); 38 | -------------------------------------------------------------------------------- /examples/materials/usematcaptexture/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gltf-model-loader", 3 | "version": "1.0.0", 4 | "description": "Loading a gltf model in an r3f scene", 5 | "homepage": "https://codesandbox.io/s/gltf-loader-ox9zh", 6 | "keywords": [ 7 | "react", 8 | "starter" 9 | ], 10 | "main": "src/index.js", 11 | "dependencies": { 12 | "@react-three/drei": "3.8.2", 13 | "react": "17.0.0", 14 | "react-dom": "17.0.0", 15 | "react-scripts": "4.0.2", 16 | "react-three-fiber": "5.3.1", 17 | "three": "0.125.2" 18 | }, 19 | "devDependencies": { 20 | "typescript": "3.8.3" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test --env=jsdom", 26 | "eject": "react-scripts eject" 27 | }, 28 | "browserslist": [ 29 | ">0.2%", 30 | "not dead", 31 | "not ie <= 11", 32 | "not op_mini all" 33 | ] 34 | } -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/public/small-airplane-v3.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/models/gltf-model-loader/public/small-airplane-v3.bin -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats } from "@react-three/drei"; 5 | 6 | import Plane from "./model"; 7 | 8 | const App = () => ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | ReactDOM.render(, document.getElementById("root")); 20 | -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/src/model.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useGLTF } from "@react-three/drei"; 3 | 4 | export default function Plane(props) { 5 | const { nodes, materials } = useGLTF("/small-airplane-v3.gltf"); 6 | 7 | return ( 8 | 9 | 10 | 14 | 18 | 22 | 26 | 27 | 28 | ); 29 | } 30 | 31 | useGLTF.preload("/small-airplane-v3.gltf"); 32 | -------------------------------------------------------------------------------- /examples/models/gltf-model-loader/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/enter-leave-tracking/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/enter-leave-tracking/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "enter-leave-tracking", 3 | "version": "1.0.0", 4 | "description": "Tracking where a pointer enters and leaves an object", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/enter-leave-tracking/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/html-labels/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/html-labels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html-labels", 3 | "version": "1.0.0", 4 | "description": "Displaying HTML labels over a scene using Drei's Html component", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/html-labels/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { Html, Stats } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const Torus = (props) => { 8 | const groupRef = useRef(); 9 | 10 | useFrame(() => { 11 | groupRef.current.rotation.x += 0.01; 12 | groupRef.current.rotation.y += 0.01; 13 | }); 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 |
Torus
22 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | const App = () => { 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | ReactDOM.render(, document.getElementById("root")); 39 | -------------------------------------------------------------------------------- /examples/other/html-labels/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | 10 | div.label { 11 | background-color: white; 12 | border: 1px solid #888888; 13 | padding: 5px; 14 | border-radius: 3px; 15 | font-family: Arial, Helvetica, sans-serif; 16 | } 17 | -------------------------------------------------------------------------------- /examples/other/instanced-points/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/instanced-points/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instanced-points", 3 | "version": "1.0.0", 4 | "description": "Drawing sprites using instanced points", 5 | "keywords": [ 6 | "react", 7 | "starter" 8 | ], 9 | "main": "src/index.js", 10 | "dependencies": { 11 | "@react-three/drei": "3.8.6", 12 | "react": "17.0.0", 13 | "react-dom": "17.0.0", 14 | "react-scripts": "4.0.2", 15 | "react-three-fiber": "5.3.18", 16 | "three": "0.125.2" 17 | }, 18 | "devDependencies": { 19 | "typescript": "3.8.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | }, 27 | "browserslist": [ 28 | ">0.2%", 29 | "not dead", 30 | "not ie <= 11", 31 | "not op_mini all" 32 | ] 33 | } -------------------------------------------------------------------------------- /examples/other/instanced-points/public/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/other/instanced-points/public/star.png -------------------------------------------------------------------------------- /examples/other/instanced-points/src/index.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React from "react"; 3 | import ReactDOM from "react-dom"; 4 | import { Canvas } from "react-three-fiber"; 5 | import { OrbitControls, Stats } from "@react-three/drei"; 6 | import "./styles.css"; 7 | 8 | const Stars = ({ i, j }) => { 9 | const geometry = new THREE.BufferGeometry(); 10 | const vertices = []; 11 | 12 | const sprite = new THREE.TextureLoader().load("/star.png"); 13 | 14 | for (let count = 0; count < 10000; count++) { 15 | const x = 2000 * Math.random() - 1000; 16 | const y = 2000 * Math.random() - 1000; 17 | const z = 2000 * Math.random() - 1000; 18 | 19 | vertices.push(x, y, z); 20 | } 21 | 22 | geometry.setAttribute( 23 | "position", 24 | new THREE.Float32BufferAttribute(vertices, 3) 25 | ); 26 | 27 | return ( 28 | 29 | 36 | 37 | ); 38 | }; 39 | 40 | const App = () => { 41 | return ( 42 | 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | ReactDOM.render(, document.getElementById("root")); 51 | -------------------------------------------------------------------------------- /examples/other/instanced-points/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/pointer-events/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/pointer-events/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pointer-events", 3 | "version": "1.0.0", 4 | "description": "Using pointer events with a mesh for mouseover and click interactions", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/pointer-events/public/small-airplane-v3.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/other/pointer-events/public/small-airplane-v3.bin -------------------------------------------------------------------------------- /examples/other/pointer-events/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const Box = (props) => { 8 | const boxRef = useRef(); 9 | const [active, setActive] = useState(false); 10 | const [hover, setHover] = useState(false); 11 | 12 | useFrame(() => { 13 | if (hover) { 14 | boxRef.current.rotation.y += 0.05; 15 | } 16 | }); 17 | 18 | return ( 19 | 20 | { 22 | setActive(!active); 23 | }} 24 | onPointerOver={() => { 25 | setHover(true); 26 | }} 27 | onPointerOut={() => { 28 | setHover(false); 29 | }} 30 | > 31 | 32 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | const App = () => { 42 | return ( 43 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | ReactDOM.render(, document.getElementById("root")); 56 | -------------------------------------------------------------------------------- /examples/other/pointer-events/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/r3f-perf/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/r3f-perf/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "r3f-perf", 3 | "version": "1.0.0", 4 | "description": "An example of the r3f-perf library", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "2.2.7", 9 | "r3f-perf": "0.82.0", 10 | "react": "17.0.0", 11 | "react-dom": "17.0.0", 12 | "react-scripts": "4.0.2", 13 | "react-three-fiber": "5.3.1", 14 | "three": "0.125.2" 15 | }, 16 | "devDependencies": { 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test --env=jsdom", 23 | "eject": "react-scripts eject" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } -------------------------------------------------------------------------------- /examples/other/r3f-perf/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/other/r3f-perf/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas, useFrame } from "react-three-fiber"; 4 | import { OrbitControls } from "@react-three/drei/OrbitControls"; 5 | import { Perf } from "r3f-perf"; 6 | import "./styles.css"; 7 | 8 | const Torus = () => { 9 | const torusRef = useRef(); 10 | 11 | useFrame(() => { 12 | torusRef.current.rotation.x += 0.01; 13 | torusRef.current.rotation.y += 0.03; 14 | }); 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | const App = () => { 25 | return ( 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | ReactDOM.render(, document.getElementById("root")); 36 | -------------------------------------------------------------------------------- /examples/other/r3f-perf/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/reflector-textured/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/reflector-textured/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reflector-textured", 3 | "version": "1.0.0", 4 | "description": "Applying a texture to a reflector", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/reflector-textured/public/checkerboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/other/reflector-textured/public/checkerboard.png -------------------------------------------------------------------------------- /examples/other/reflector-textured/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/other/reflector-textured/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/reflector/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/reflector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reflector", 3 | "version": "1.0.0", 4 | "description": "A basic example of the Drei reflector component", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.18", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/reflector/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/other/reflector/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats, Reflector } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | import { SmallBox, Wall, Box, Ball } from "./scene"; 8 | 9 | const App = () => { 10 | return ( 11 | 15 | 16 | 17 | 18 | 19 | 20 | 32 | {(Material, props) => ( 33 | 34 | )} 35 | 36 | 37 | 38 | 39 | ); 40 | }; 41 | 42 | ReactDOM.render(, document.getElementById("root")); 43 | -------------------------------------------------------------------------------- /examples/other/reflector/src/scene.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Wall = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const Box = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export const SmallBox = () => { 33 | return ( 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const Ball = () => { 42 | return ( 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export const Ground = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /examples/other/reflector/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/other/text/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/other/text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "text", 3 | "version": "1.0.0", 4 | "description": "Displaying text with Drei's Text component wrapper around Troika text", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "3.8.6", 9 | "react": "17.0.0", 10 | "react-dom": "17.0.0", 11 | "react-scripts": "4.0.2", 12 | "react-three-fiber": "5.3.1", 13 | "three": "0.125.2" 14 | }, 15 | "devDependencies": { 16 | "typescript": "3.8.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ] 30 | } -------------------------------------------------------------------------------- /examples/other/text/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/other/text/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Canvas } from "react-three-fiber"; 4 | import { OrbitControls, Stats, Text } from "@react-three/drei"; 5 | import "./styles.css"; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 17 | HELLO WORLD 18 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | ReactDOM.render(, document.getElementById("root")); 26 | -------------------------------------------------------------------------------- /examples/other/text/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-balls-perpetual-physics", 3 | "version": "1.0.0", 4 | "description": "Three balls falling and reseting", 5 | "homepage": "https://codesandbox.io/s/three-balls-perpetual-physics-kzcg0", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/cannon": "0.5.5", 10 | "@react-three/drei": "3.8.2", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "3.4.3", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/public/bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/physics/three-balls-perpetual-physics-usecannon/public/bw.png -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/src/ball.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React, { useEffect, useRef } from "react"; 3 | import { useFrame, useLoader } from "react-three-fiber"; 4 | import { useSphere } from "@react-three/cannon"; 5 | 6 | const Ball = ({ position, color }) => { 7 | const [ballRef, api] = useSphere(() => ({ mass: 1, position: position })); 8 | const _position = useRef([0, 0, 0]); 9 | 10 | useEffect(() => api.position.subscribe((p) => (_position.current = p)), []); 11 | 12 | useFrame(() => { 13 | if (_position.current[0] < -25 || _position.current[0] > 25) { 14 | api.position.set(position[0], position[1], position[2]); 15 | api.velocity.set(0, 0, 0); 16 | } 17 | }); 18 | 19 | const bw = useLoader(THREE.TextureLoader, "/bw.png"); 20 | bw.wrapS = THREE.RepeatWrapping; 21 | bw.wrapT = THREE.RepeatWrapping; 22 | bw.repeat.set(3, 3); 23 | 24 | return ( 25 | 26 | 27 | 35 | 36 | ); 37 | }; 38 | 39 | export default Ball; 40 | -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/src/ground.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { usePlane } from "@react-three/cannon"; 3 | 4 | export default function Ground(props) { 5 | const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props })); 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/physics/three-balls-perpetual-physics-usecannon/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-balls-physics-usecannon", 3 | "version": "1.0.0", 4 | "description": "Three balls falling down", 5 | "homepage": "https://codesandbox.io/s/three-balls-dydl9", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/cannon": "0.5.5", 10 | "@react-three/drei": "3.8.6", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/public/bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/physics/three-balls-physics-usecannon/public/bw.png -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/src/ball.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React from "react"; 3 | import { useLoader } from "react-three-fiber"; 4 | import { useSphere } from "@react-three/cannon"; 5 | 6 | const Ball = ({ position, color }) => { 7 | const [ballRef] = useSphere(() => ({ mass: 1, position: position })); 8 | 9 | const bw = useLoader(THREE.TextureLoader, "/bw.png"); 10 | bw.wrapS = THREE.RepeatWrapping; 11 | bw.wrapT = THREE.RepeatWrapping; 12 | bw.repeat.set(3, 3); 13 | 14 | return ( 15 | 16 | 17 | 25 | 26 | ); 27 | }; 28 | 29 | export default Ball; 30 | -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/src/ground.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { usePlane } from "@react-three/cannon"; 3 | 4 | export default function Ground(props) { 5 | const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props })); 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/physics/three-balls-physics-usecannon/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecannon-constraints-click-direction", 3 | "version": "1.0.0", 4 | "description": "Using constraints with clicking", 5 | "homepage": "https://codesandbox.io/s/constraint-click-bycqz", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/cannon": "0.5.5", 10 | "@react-three/drei": "3.8.2", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/public/bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/physics/usecannon-constraints-click-direction/public/bw.png -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/src/ball.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React from "react"; 3 | import { useLoader } from "react-three-fiber"; 4 | 5 | const Ball = ({ color }) => { 6 | const bw = useLoader(THREE.TextureLoader, "/bw.png"); 7 | bw.wrapS = THREE.RepeatWrapping; 8 | bw.wrapT = THREE.RepeatWrapping; 9 | bw.repeat.set(3, 3); 10 | 11 | return ( 12 | 13 | 14 | 22 | 23 | ); 24 | }; 25 | 26 | export default Ball; 27 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/src/ground.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { usePlane } from "@react-three/cannon"; 3 | 4 | export default function Ground(props) { 5 | const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props })); 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints-click-direction/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecannon-constraints", 3 | "version": "1.0.0", 4 | "description": "Using constaints to form a chain", 5 | "homepage": "https://codesandbox.io/s/constraints-swore", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/cannon": "0.5.5", 10 | "@react-three/drei": "3.8.6", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/public/bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/physics/usecannon-constraints/public/bw.png -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/src/ball.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React from "react"; 3 | import { useLoader } from "react-three-fiber"; 4 | 5 | const Ball = ({ color }) => { 6 | const bw = useLoader(THREE.TextureLoader, "/bw.png"); 7 | bw.wrapS = THREE.RepeatWrapping; 8 | bw.wrapT = THREE.RepeatWrapping; 9 | bw.repeat.set(3, 3); 10 | 11 | return ( 12 | 13 | 14 | 22 | 23 | ); 24 | }; 25 | 26 | export default Ball; 27 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/src/ground.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { usePlane } from "@react-three/cannon"; 3 | 4 | export default function Ground(props) { 5 | const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props })); 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/physics/usecannon-constraints/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecannon-gravity-balls", 3 | "version": "1.0.0", 4 | "description": "Balls falling on top of each other", 5 | "homepage": "https://codesandbox.io/s/falling-balls-pkmcr", 6 | "keywords": [], 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "@react-three/cannon": "0.5.5", 10 | "@react-three/drei": "3.8.2", 11 | "react": "17.0.0", 12 | "react-dom": "17.0.0", 13 | "react-scripts": "4.0.2", 14 | "react-three-fiber": "5.3.18", 15 | "three": "0.125.2" 16 | }, 17 | "devDependencies": { 18 | "typescript": "3.8.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/public/bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onion2k/r3f-by-example/cbe114621dbe4cf6452e5e30fe90fa091b32dd1a/examples/physics/usecannon-gravity-balls/public/bw.png -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/src/ball.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import React from "react"; 3 | import { useLoader } from "react-three-fiber"; 4 | import { useSphere } from "@react-three/cannon"; 5 | 6 | const Ball = ({ position, color }) => { 7 | const [ballRef] = useSphere(() => ({ mass: 1, position: position })); 8 | 9 | const bw = useLoader(THREE.TextureLoader, "/bw.png"); 10 | bw.wrapS = THREE.RepeatWrapping; 11 | bw.wrapT = THREE.RepeatWrapping; 12 | bw.repeat.set(3, 3); 13 | 14 | return ( 15 | 16 | 17 | 25 | 26 | ); 27 | }; 28 | 29 | export default Ball; 30 | -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/src/ground.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { usePlane } from "@react-three/cannon"; 3 | 4 | export default function Ground(props) { 5 | const [ref] = usePlane(() => ({ ...props })); 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Physics } from "@react-three/cannon"; 4 | import { Canvas } from "react-three-fiber"; 5 | import { OrbitControls, Stats } from "@react-three/drei"; 6 | import Ball from "./ball"; 7 | import Ground from "./ground"; 8 | import "./styles.css"; 9 | 10 | const App = () => { 11 | return ( 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | ReactDOM.render(, document.getElementById("root")); 32 | -------------------------------------------------------------------------------- /examples/physics/usecannon-gravity-balls/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: grid; 7 | place-items: center; 8 | } 9 | -------------------------------------------------------------------------------- /static/css/main.fed1ddaf.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;width:100vw;height:100vh;display:grid;place-items:center} 2 | /*# sourceMappingURL=main.fed1ddaf.chunk.css.map */ -------------------------------------------------------------------------------- /static/css/main.fed1ddaf.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://src/styles.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,SAAU,CACV,WAAY,CACZ,YAAa,CACb,YAAa,CACb,kBACF","file":"main.fed1ddaf.chunk.css","sourcesContent":["body {\n margin: 0;\n padding: 0;\n width: 100vw;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n"]} -------------------------------------------------------------------------------- /static/js/2.57c42072.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v0.20.1 8 | * scheduler.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | 16 | /** @license React v0.26.1 17 | * react-reconciler.production.min.js 18 | * 19 | * Copyright (c) Facebook, Inc. and its affiliates. 20 | * 21 | * This source code is licensed under the MIT license found in the 22 | * LICENSE file in the root directory of this source tree. 23 | */ 24 | 25 | /** @license React v17.0.0 26 | * react-dom.production.min.js 27 | * 28 | * Copyright (c) Facebook, Inc. and its affiliates. 29 | * 30 | * This source code is licensed under the MIT license found in the 31 | * LICENSE file in the root directory of this source tree. 32 | */ 33 | 34 | /** @license React v17.0.0 35 | * react-jsx-runtime.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | 43 | /** @license React v17.0.0 44 | * react.production.min.js 45 | * 46 | * Copyright (c) Facebook, Inc. and its affiliates. 47 | * 48 | * This source code is licensed under the MIT license found in the 49 | * LICENSE file in the root directory of this source tree. 50 | */ 51 | -------------------------------------------------------------------------------- /static/js/main.d720395a.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonplaser-text"]=this["webpackJsonplaser-text"]||[]).push([[0],{24:function(e,t,c){"use strict";c.r(t);var r=c(0),s=c(1),a=c(19),n=c(7),o=c(18),i=c(2),l=c(23),b=(c(29),c(5));const h=Object(s.forwardRef)((function(e,t){return Object(n.b)((({clock:e})=>{t.current.position.x=-50*Math.sin(.1*e.getElapsedTime())})),Object(b.jsxs)("mesh",{ref:t,position:[0,-.75,-10],children:[Object(b.jsx)("sphereGeometry",{args:[1,36,36]}),Object(b.jsx)("meshBasicMaterial",{color:"#FFFF00"})]})}));function j(){const e=Object(n.d)();return Object(b.jsxs)(b.Fragment,{children:[Object(b.jsx)(h,{ref:e}),e.current&&Object(b.jsx)(o.a,{multisampling:0,children:Object(b.jsx)(o.b,{sun:e.current,blendFunction:i.a.Screen,samples:60,density:.97,decay:.97,weight:.5,exposure:.8,clampMax:1,width:i.x.AUTO_SIZE,height:i.x.AUTO_SIZE,kernelSize:i.r.SMALL,blur:!0})})]})}Object(a.render)(Object(b.jsxs)(n.a,{style:{height:300,width:1e3},camera:{position:[0,0,10]},onCreated:({gl:e})=>{e.setClearColor(new r.Color("#000000"))},children:[Object(b.jsx)(l.a,{font:"https://rawcdn.githack.com/google/fonts/3b179b729ac3306ab2a249d848d94ff08b90a0af/apache/robotoslab/static/RobotoSlab-Black.ttf",scale:[35,35,35],color:"#FFFFFF",anchorX:"center",anchorY:"middle",children:"react-three-fiber by example"}),Object(b.jsx)(j,{})]}),document.querySelector("section.page-header"))},29:function(e,t,c){}},[[24,1,2]]]); 2 | //# sourceMappingURL=main.d720395a.chunk.js.map -------------------------------------------------------------------------------- /static/js/runtime-main.e9e551ef.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var n,l,a=t[0],f=t[1],i=t[2],c=0,s=[];c