├── .gitignore ├── .prettierrc.json ├── README.md ├── components ├── ExternalLinkIcon.tsx ├── Layout.tsx ├── Texts.tsx ├── ghost-house │ ├── Bushes.tsx │ ├── Door.tsx │ ├── Ghosts.tsx │ ├── Graves.tsx │ ├── House.tsx │ ├── Land.tsx │ ├── Lights.tsx │ ├── Roof.tsx │ └── Walls.tsx ├── post-processing │ ├── PostEffects.tsx │ ├── Scene.tsx │ ├── displacement-fragment.glsl.ts │ ├── displacement-vertex.glsl.ts │ ├── tint-fragment.glsl.ts │ └── tint-vertex.glsl.ts ├── shader-galaxy │ ├── fragment.glsl.ts │ └── vertex.glsl.ts ├── shader-patterns │ ├── fragment.glsl.ts │ └── vertex.glsl.ts └── shader-water │ ├── fragment.glsl.ts │ └── vertex.glsl.ts ├── hooks ├── useBodyPointerCursor.ts ├── useFullScreen.ts ├── useLightShadowConfigs.ts └── useUV2.ts ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── 3d-text.tsx ├── _app.tsx ├── animation.tsx ├── basic.tsx ├── burger-model.tsx ├── fox-model.tsx ├── full-screen.tsx ├── galaxy.tsx ├── geometry.tsx ├── ghost-house.tsx ├── github-2020-v2.tsx ├── github-2020.tsx ├── index.tsx ├── labels.tsx ├── leva.tsx ├── lights.tsx ├── materials.tsx ├── morphing-head.tsx ├── particles.tsx ├── performance.tsx ├── post-processing.tsx ├── raycaster.tsx ├── realistic-helmet.tsx ├── shader-flag.tsx ├── shader-galaxy.tsx ├── shader-patterns.tsx ├── shader-water.tsx ├── shadows.tsx ├── simple-physics.tsx ├── textures.tsx └── transform.tsx ├── postcss.config.js ├── public ├── fonts │ └── helvetiker_regular.typeface.json ├── images │ ├── favicon-logo.png │ └── favicon.ico ├── models │ ├── DamagedHelmet │ │ ├── README.md │ │ └── glTF │ │ │ ├── DamagedHelmet.bin │ │ │ ├── DamagedHelmet.gltf │ │ │ ├── Default_AO.jpg │ │ │ ├── Default_albedo.jpg │ │ │ ├── Default_emissive.jpg │ │ │ ├── Default_metalRoughness.jpg │ │ │ └── Default_normal.jpg │ ├── Duck │ │ ├── README.md │ │ ├── glTF-Binary │ │ │ └── Duck.glb │ │ ├── glTF-Draco │ │ │ ├── 0.bin │ │ │ ├── Duck.bin │ │ │ ├── Duck.gltf │ │ │ └── DuckCM.png │ │ ├── glTF-Embedded │ │ │ └── Duck.gltf │ │ ├── glTF │ │ │ ├── Duck.gltf │ │ │ ├── Duck0.bin │ │ │ └── DuckCM.png │ │ └── screenshot │ │ │ └── screenshot.png │ ├── FlightHelmet │ │ ├── README.md │ │ ├── glTF │ │ │ ├── FlightHelmet.bin │ │ │ ├── FlightHelmet.gltf │ │ │ ├── FlightHelmet_Materials_GlassPlasticMat_BaseColor.png │ │ │ ├── FlightHelmet_Materials_GlassPlasticMat_Normal.png │ │ │ ├── FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png │ │ │ ├── FlightHelmet_Materials_LeatherPartsMat_BaseColor.png │ │ │ ├── FlightHelmet_Materials_LeatherPartsMat_Normal.png │ │ │ ├── FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png │ │ │ ├── FlightHelmet_Materials_LensesMat_BaseColor.png │ │ │ ├── FlightHelmet_Materials_LensesMat_Normal.png │ │ │ ├── FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png │ │ │ ├── FlightHelmet_Materials_MetalPartsMat_BaseColor.png │ │ │ ├── FlightHelmet_Materials_MetalPartsMat_Normal.png │ │ │ ├── FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png │ │ │ ├── FlightHelmet_Materials_RubberWoodMat_BaseColor.png │ │ │ ├── FlightHelmet_Materials_RubberWoodMat_Normal.png │ │ │ └── FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png │ │ └── screenshot │ │ │ └── screenshot.jpg │ ├── Fox │ │ ├── README.md │ │ ├── glTF-Binary │ │ │ └── Fox.glb │ │ ├── glTF-Embedded │ │ │ └── Fox.gltf │ │ ├── glTF │ │ │ ├── Fox.bin │ │ │ ├── Fox.gltf │ │ │ └── Texture.png │ │ └── screenshot │ │ │ └── screenshot.jpg │ ├── LeePerrySmith │ │ ├── LeePerrySmith.glb │ │ ├── LeePerrySmith_License.txt │ │ ├── color.jpg │ │ └── normal.jpg │ ├── fnick851-github-2020.glb │ └── hamburger.glb ├── sounds │ └── hit.mp3 └── textures │ ├── checkerboard-1024x1024.png │ ├── checkerboard-8x8.png │ ├── displacementMap.png │ ├── environmentMaps │ ├── 0 │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ ├── 1 │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ ├── 2 │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ ├── 3 │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ ├── simple-physics │ │ ├── nx.png │ │ ├── ny.png │ │ ├── nz.png │ │ ├── px.png │ │ ├── py.png │ │ └── pz.png │ └── sky │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ ├── flag-mgs.jpg │ ├── ghost-house │ ├── bricks │ │ ├── ambientOcclusion.jpg │ │ ├── color.jpg │ │ ├── normal.jpg │ │ └── roughness.jpg │ ├── door │ │ ├── alpha.jpg │ │ ├── ambientOcclusion.jpg │ │ ├── color.jpg │ │ ├── height.jpg │ │ ├── metalness.jpg │ │ ├── normal.jpg │ │ └── roughness.jpg │ └── grass │ │ ├── ambientOcclusion.jpg │ │ ├── color.jpg │ │ ├── normal.jpg │ │ └── roughness.jpg │ ├── gradients │ ├── 3.jpg │ └── 5.jpg │ ├── interfaceNormalMap.png │ ├── matcaps │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ └── 8.png │ ├── minecraft.png │ ├── particles │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png │ └── shadow │ ├── bakedShadow.jpg │ └── simpleShadow.jpg ├── tailwind.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a 3D graphics demo app. This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | -------------------------------------------------------------------------------- /components/ExternalLinkIcon.tsx: -------------------------------------------------------------------------------- 1 | export default function ExternalLinkIcon() { 2 | return ( 3 | 10 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import Link from "next/link" 3 | import Image from "next/image" 4 | import { useRouter } from "next/router" 5 | import { useState } from "react" 6 | import ExternalLinkIcon from "./ExternalLinkIcon" 7 | 8 | export function Layout({ children }) { 9 | const externalLinks = [ 10 | { 11 | link: "https://fnick851.github.io/bounded-ball/", 12 | name: "Bouncy Ball", 13 | }, 14 | { link: "https://fnick851.github.io/3d-bubble-bg/", name: "Bubbles" }, 15 | { 16 | link: "https://fnick851.github.io/bananas-screen/", 17 | name: "Bananas Screen", 18 | }, 19 | { 20 | link: "https://fnick851.github.io/scrolly-framer-motion/", 21 | name: "Page Scroll Animation Effect", 22 | }, 23 | { 24 | link: "https://fnick851.github.io/fogs/", 25 | name: "Fogs", 26 | }, 27 | { 28 | link: "https://fnick851.github.io/magic-cube/", 29 | name: "Magic Cube", 30 | }, 31 | { 32 | link: "https://fnick851.github.io/r3f-spring/", 33 | name: "R3F Deep Dive - Basic Spring", 34 | }, 35 | { 36 | link: "https://fnick851.github.io/r3f-saber-model/", 37 | name: "R3F Deep Dive - Alter Saber", 38 | }, 39 | { 40 | link: "https://fnick851.github.io/r3f-ui-events/", 41 | name: "R3F Deep Dive - UI Events", 42 | }, 43 | { 44 | link: "https://fnick851.github.io/r3f-first-scene/", 45 | name: "R3F Deep Dive - First Scene", 46 | }, 47 | { 48 | link: "https://fnick851.github.io/r3f-intro/", 49 | name: "R3F Deep Dive - Intro", 50 | }, 51 | { 52 | link: "https://fnick851.github.io/react-chart-rewrite/", 53 | name: "NAEP Internship Program Growth", 54 | }, 55 | { 56 | link: "https://fnick851.github.io/threejs-journey-baked-scene/", 57 | name: "Three.js Journey to R3F - Baked Scene", 58 | }, 59 | ] 60 | const internalLinks = [ 61 | { link: "/labels", name: "Three.js Journey to R3F - Labels" }, 62 | { link: "/performance", name: "Three.js Journey to R3F - Performance" }, 63 | { 64 | link: "/post-processing", 65 | name: "Three.js Journey to R3F - Post Processing", 66 | }, 67 | { link: "/morphing-head", name: "Three.js Journey to R3F - Morphing Head" }, 68 | { link: "/shader-galaxy", name: "Three.js Journey to R3F - Shader Galaxy" }, 69 | { link: "/shader-water", name: "Three.js Journey to R3F - Shader Water" }, 70 | { 71 | link: "/shader-patterns", 72 | name: "Three.js Journey to R3F - Shader Patterns", 73 | }, 74 | { link: "/shader-flag", name: "Three.js Journey to R3F - Shader Flag" }, 75 | { 76 | link: "/realistic-helmet", 77 | name: "Three.js Journey to R3F - Realistic Helmet", 78 | }, 79 | { link: "/fox-model", name: "Three.js Journey to R3F - Fox Model" }, 80 | { link: "/burger-model", name: "Three.js Journey to R3F - Burger Model" }, 81 | { 82 | link: "/simple-physics", 83 | name: "Three.js Journey to R3F - Simple Physics", 84 | }, 85 | { link: "/raycaster", name: "Three.js Journey to R3F - Raycaster" }, 86 | { link: "/galaxy", name: "Three.js Journey to R3F - Galaxy" }, 87 | { link: "/particles", name: "Three.js Journey to R3F - Particles" }, 88 | { link: "/ghost-house", name: "Three.js Journey to R3F - Ghost House" }, 89 | { link: "/shadows", name: "Three.js Journey to R3F - Shadows" }, 90 | { link: "/lights", name: "Three.js Journey to R3F - Lights" }, 91 | { link: "/github-2020-v2", name: "Github 2020 V2" }, 92 | { link: "/github-2020", name: "Github 2020" }, 93 | { link: "/3d-text", name: "Three.js Journey to R3F - 3D Text" }, 94 | { link: "/materials", name: "Three.js Journey to R3F - Materials" }, 95 | { link: "/textures", name: "Three.js Journey to R3F - Textures" }, 96 | { link: "/leva", name: "Leva" }, 97 | { link: "/geometry", name: "Three.js Journey to R3F - Geometry" }, 98 | { link: "/full-screen", name: "Three.js Journey to R3F - Full Screen" }, 99 | { link: "/animation", name: "Three.js Journey to R3F - Animation" }, 100 | { link: "/transform", name: "Three.js Journey to R3F - Transform" }, 101 | { link: "/basic", name: "Three.js Journey to R3F - Basic" }, 102 | ] 103 | 104 | const router = useRouter() 105 | const externalMenuItems = externalLinks.map(({ link, name }, i) => ( 106 | 113 | {name} 114 | 115 | 116 | )) 117 | const internalMenuItems = internalLinks.map(({ link, name }, i) => ( 118 | 119 | 125 | {name} 126 | 127 | 128 | )) 129 | 130 | const [menuOpen, setMenuOpen] = useState(false) 131 | 132 | return ( 133 | <> 134 | 135 | 136 | 137 | 138 | 139 |
140 |
setMenuOpen(true)} 143 | > 144 | Picture of the author 150 |
151 |
157 |
158 |
setMenuOpen(false)}> 159 | 172 |
173 |
174 | 205 |
206 |
207 |
208 |
209 |
{children}
210 |
211 |
212 | 213 | ) 214 | } 215 | -------------------------------------------------------------------------------- /components/Texts.tsx: -------------------------------------------------------------------------------- 1 | import { Html } from "@react-three/drei" 2 | import { ReactNode } from "react" 3 | 4 | export function Texts(props: { 5 | position: [x: number, y: number, y: number] 6 | children: ReactNode 7 | }) { 8 | return ( 9 | 10 | 11 | 12 | 13 | {props.children} 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /components/ghost-house/Bushes.tsx: -------------------------------------------------------------------------------- 1 | import { MeshStandardMaterial, SphereGeometry, Vector3 } from "three" 2 | 3 | export function Bushes() { 4 | const bushGeometry = new SphereGeometry(1, 16, 16) 5 | const bushMaterial = new MeshStandardMaterial({ color: "#89c854" }) 6 | 7 | const bushConfigs = [ 8 | { 9 | scale: [0.5, 0.5, 0.5], 10 | position: [0.8, 0.2, 2.2], 11 | }, 12 | { 13 | scale: [0.25, 0.25, 0.25], 14 | position: [1.4, 0.1, 2.1], 15 | }, 16 | { 17 | scale: [0.4, 0.4, 0.4], 18 | position: [-0.8, 0.1, 2.2], 19 | }, 20 | { 21 | scale: [0.15, 0.15, 0.15], 22 | position: [-1, 0.05, 2.6], 23 | }, 24 | ] 25 | 26 | return ( 27 | <> 28 | {bushConfigs.map(({ scale, position }, index) => ( 29 | 37 | ))} 38 | 39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /components/ghost-house/Door.tsx: -------------------------------------------------------------------------------- 1 | import { useLoader } from "react-three-fiber" 2 | import { TextureLoader } from "three" 3 | import { useUV2 } from "../../hooks/useUV2" 4 | 5 | export function Door() { 6 | const doorColorTexture = useLoader( 7 | TextureLoader, 8 | "/textures/ghost-house/door/color.jpg" 9 | ) 10 | const doorAlphaTexture = useLoader( 11 | TextureLoader, 12 | "/textures/ghost-house/door/alpha.jpg" 13 | ) 14 | const doorAmbientOcclusionTexture = useLoader( 15 | TextureLoader, 16 | "/textures/ghost-house/door/ambientOcclusion.jpg" 17 | ) 18 | const doorHeightTexture = useLoader( 19 | TextureLoader, 20 | "/textures/ghost-house/door/height.jpg" 21 | ) 22 | const doorNormalTexture = useLoader( 23 | TextureLoader, 24 | "/textures/ghost-house/door/normal.jpg" 25 | ) 26 | const doorMetalnessTexture = useLoader( 27 | TextureLoader, 28 | "/textures/ghost-house/door/metalness.jpg" 29 | ) 30 | const doorRoughnessTexture = useLoader( 31 | TextureLoader, 32 | "/textures/ghost-house/door/roughness.jpg" 33 | ) 34 | 35 | const geomRef = useUV2() 36 | 37 | return ( 38 | 39 | 40 | 51 | 52 | ) 53 | } 54 | -------------------------------------------------------------------------------- /components/ghost-house/Ghosts.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react" 2 | import { useFrame } from "react-three-fiber" 3 | 4 | export function Ghosts() { 5 | const ghost1Ref = useRef(null) 6 | const ghost2Ref = useRef(null) 7 | const ghost3Ref = useRef(null) 8 | 9 | useFrame((state) => { 10 | const elapsedTime = state.clock.getElapsedTime() 11 | 12 | const ghost1 = ghost1Ref.current 13 | const ghost2 = ghost2Ref.current 14 | const ghost3 = ghost3Ref.current 15 | 16 | if (ghost1 && ghost2 && ghost3) { 17 | const ghost1Angle = elapsedTime * 0.5 18 | ghost1.position.x = Math.cos(ghost1Angle) * 4 19 | ghost1.position.z = Math.sin(ghost1Angle) * 4 20 | ghost1.position.y = Math.sin(elapsedTime * 3) 21 | 22 | const ghost2Angle = -elapsedTime * 0.32 23 | ghost2.position.x = Math.cos(ghost2Angle) * 5 24 | ghost2.position.z = Math.sin(ghost2Angle) * 5 25 | ghost2.position.y = 26 | Math.sin(elapsedTime * 4) + Math.sin(elapsedTime * 2.5) 27 | 28 | const ghost3Angle = -elapsedTime * 0.18 29 | ghost3.position.x = 30 | Math.cos(ghost3Angle) * (7 + Math.sin(elapsedTime * 0.32)) 31 | ghost3.position.z = 32 | Math.sin(ghost3Angle) * (7 + Math.sin(elapsedTime * 0.5)) 33 | ghost3.position.y = 34 | Math.sin(elapsedTime * 4) + Math.sin(elapsedTime * 2.5) 35 | } 36 | }) 37 | 38 | return ( 39 | <> 40 | 41 | 42 | 43 | 44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /components/ghost-house/Graves.tsx: -------------------------------------------------------------------------------- 1 | import { BoxGeometry, MeshStandardMaterial } from "three" 2 | 3 | export function Graves() { 4 | const graveGeometry = new BoxGeometry(0.6, 0.8, 0.1) 5 | const graveMaterial = new MeshStandardMaterial({ color: "#727272" }) 6 | 7 | const graveList: JSX.Element[] = [] 8 | for (let i = 0; i < 50; i++) { 9 | const angle = Math.random() * Math.PI * 2 10 | const radius = 3 + Math.random() * 6 11 | const x = Math.cos(angle) * radius 12 | const z = Math.sin(angle) * radius 13 | 14 | graveList.push( 15 | 23 | ) 24 | } 25 | 26 | return {graveList} 27 | } 28 | -------------------------------------------------------------------------------- /components/ghost-house/House.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react" 2 | import { Walls } from "./Walls" 3 | import { Roof } from "./Roof" 4 | import { Door } from "./Door" 5 | import { Bushes } from "./Bushes" 6 | import { useLightShadowConfigs } from "../../hooks/useLightShadowConfigs" 7 | 8 | export function House() { 9 | const doorLightRef = useRef(null) 10 | useLightShadowConfigs(doorLightRef) 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /components/ghost-house/Land.tsx: -------------------------------------------------------------------------------- 1 | import { useLoader } from "react-three-fiber" 2 | import { DoubleSide, RepeatWrapping, TextureLoader } from "three" 3 | import { useUV2 } from "../../hooks/useUV2" 4 | 5 | export function Land() { 6 | const grassColorTexture = useLoader( 7 | TextureLoader, 8 | "/textures/ghost-house/grass/color.jpg" 9 | ) 10 | const grassAmbientOcclusionTexture = useLoader( 11 | TextureLoader, 12 | "/textures/ghost-house/grass/ambientOcclusion.jpg" 13 | ) 14 | const grassNormalTexture = useLoader( 15 | TextureLoader, 16 | "/textures/ghost-house/grass/normal.jpg" 17 | ) 18 | const grassRoughnessTexture = useLoader( 19 | TextureLoader, 20 | "/textures/ghost-house/grass/roughness.jpg" 21 | ) 22 | 23 | grassColorTexture.repeat.set(8, 8) 24 | grassAmbientOcclusionTexture.repeat.set(8, 8) 25 | grassNormalTexture.repeat.set(8, 8) 26 | grassRoughnessTexture.repeat.set(8, 8) 27 | 28 | grassColorTexture.wrapS = RepeatWrapping 29 | grassAmbientOcclusionTexture.wrapS = RepeatWrapping 30 | grassNormalTexture.wrapS = RepeatWrapping 31 | grassRoughnessTexture.wrapS = RepeatWrapping 32 | 33 | grassColorTexture.wrapT = RepeatWrapping 34 | grassAmbientOcclusionTexture.wrapT = RepeatWrapping 35 | grassNormalTexture.wrapT = RepeatWrapping 36 | grassRoughnessTexture.wrapT = RepeatWrapping 37 | 38 | const geomRef = useUV2() 39 | 40 | return ( 41 | 46 | 47 | 54 | 55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /components/ghost-house/Lights.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react" 2 | import { useLightShadowConfigs } from "../../hooks/useLightShadowConfigs" 3 | 4 | export function Lights() { 5 | const moonLightRef = useRef(null) 6 | useLightShadowConfigs(moonLightRef) 7 | 8 | return ( 9 | 10 | 11 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /components/ghost-house/Roof.tsx: -------------------------------------------------------------------------------- 1 | export function Roof() { 2 | return ( 3 | 4 | 5 | 6 | 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /components/ghost-house/Walls.tsx: -------------------------------------------------------------------------------- 1 | import { useLoader } from "react-three-fiber" 2 | import { TextureLoader } from "three" 3 | import { useUV2 } from "../../hooks/useUV2" 4 | 5 | export function Walls() { 6 | const bricksColorTexture = useLoader( 7 | TextureLoader, 8 | "/textures/ghost-house/bricks/color.jpg" 9 | ) 10 | const bricksAmbientOcclusionTexture = useLoader( 11 | TextureLoader, 12 | "/textures/ghost-house/bricks/ambientOcclusion.jpg" 13 | ) 14 | const bricksNormalTexture = useLoader( 15 | TextureLoader, 16 | "/textures/ghost-house/bricks/normal.jpg" 17 | ) 18 | const bricksRoughnessTexture = useLoader( 19 | TextureLoader, 20 | "/textures/ghost-house/bricks/roughness.jpg" 21 | ) 22 | 23 | const geomRef = useUV2() 24 | 25 | return ( 26 | 27 | 28 | 34 | 35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /components/post-processing/PostEffects.tsx: -------------------------------------------------------------------------------- 1 | import { useLoader, useThree } from "react-three-fiber" 2 | import { Effects } from "@react-three/drei" 3 | import { TextureLoader, Vector2, Vector3 } from "three" 4 | import { useEffect, useMemo, useRef } from "react" 5 | import { useControls } from "leva" 6 | import { DotScreenPass } from "three/examples/jsm/postprocessing/DotScreenPass" 7 | import { GlitchPass } from "three/examples/jsm/postprocessing/GlitchPass" 8 | import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass" 9 | import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass" 10 | import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass" 11 | import { RGBShiftShader } from "three/examples/jsm/shaders/RGBShiftShader" 12 | import { tintVertexShader } from "./tint-vertex.glsl" 13 | import { tintFragmentShader } from "./tint-fragment.glsl" 14 | import { displacementVertexShader } from "./displacement-vertex.glsl" 15 | import { displacementFragmentShader } from "./displacement-fragment.glsl" 16 | 17 | export function PostEffects() { 18 | const { 19 | enable_dotScreenPass, 20 | enable_glitchPass, 21 | glitch_goes_wild, 22 | enable_rgbShiftPass, 23 | enable_unrealBloomPass, 24 | unrealBloom_strength, 25 | unrealBloom_radius, 26 | unrealBloom_threshold, 27 | red_tint, 28 | green_tint, 29 | blue_tint, 30 | } = useControls({ 31 | enable_dotScreenPass: false, 32 | enable_glitchPass: false, 33 | glitch_goes_wild: { 34 | value: false, 35 | render: (get) => get("enable_glitchPass"), 36 | }, 37 | enable_rgbShiftPass: false, 38 | enable_unrealBloomPass: false, 39 | unrealBloom_strength: { 40 | value: 0.3, 41 | min: 0, 42 | max: 2, 43 | step: 0.01, 44 | render: (get) => get("enable_unrealBloomPass"), 45 | }, 46 | unrealBloom_radius: { 47 | value: 1, 48 | min: 0, 49 | max: 2, 50 | step: 0.01, 51 | render: (get) => get("enable_unrealBloomPass"), 52 | }, 53 | unrealBloom_threshold: { 54 | value: 0.6, 55 | min: 0, 56 | max: 1, 57 | step: 0.001, 58 | render: (get) => get("enable_unrealBloomPass"), 59 | }, 60 | red_tint: { 61 | value: 0, 62 | min: -1, 63 | max: 1, 64 | step: 0.01, 65 | }, 66 | green_tint: { 67 | value: 0, 68 | min: -1, 69 | max: 1, 70 | step: 0.01, 71 | }, 72 | blue_tint: { 73 | value: 0, 74 | min: -1, 75 | max: 1, 76 | step: 0.01, 77 | }, 78 | }) 79 | 80 | const { size } = useThree() 81 | 82 | const effectRef = useRef(null) 83 | function usePass(pass, watchPass: boolean) { 84 | useEffect( 85 | () => { 86 | if (effectRef.current) effectRef.current.addPass(pass) 87 | return () => { 88 | if (effectRef.current) effectRef.current.removePass(pass) 89 | } 90 | }, 91 | watchPass ? [pass] : [] 92 | ) 93 | } 94 | 95 | // Glitch pass 96 | const glitchPass = useMemo(() => { 97 | const glitchPass = new GlitchPass() 98 | glitchPass.goWild = glitch_goes_wild 99 | glitchPass.enabled = enable_glitchPass 100 | return glitchPass 101 | }, [enable_glitchPass, glitch_goes_wild]) 102 | usePass(glitchPass, true) 103 | 104 | // Dot screen pass 105 | const dotScreenPass = useMemo(() => { 106 | const dotScreenPass = new DotScreenPass() 107 | dotScreenPass.enabled = enable_dotScreenPass 108 | return dotScreenPass 109 | }, [enable_dotScreenPass]) 110 | usePass(dotScreenPass, true) 111 | 112 | // RGB Shift pass 113 | const rgbShiftPass = useMemo(() => { 114 | const rgbShiftPass = new ShaderPass(RGBShiftShader) 115 | rgbShiftPass.enabled = enable_rgbShiftPass 116 | return rgbShiftPass 117 | }, [enable_rgbShiftPass]) 118 | usePass(rgbShiftPass, true) 119 | 120 | // Unreal Bloom pass 121 | const unrealBloomPass = useMemo(() => { 122 | const unrealBloomPass = new UnrealBloomPass( 123 | new Vector2(512, 512), 124 | unrealBloom_strength, 125 | unrealBloom_radius, 126 | unrealBloom_threshold 127 | ) 128 | unrealBloomPass.enabled = enable_unrealBloomPass 129 | return unrealBloomPass 130 | }, [ 131 | enable_unrealBloomPass, 132 | unrealBloom_strength, 133 | unrealBloom_radius, 134 | unrealBloom_threshold, 135 | ]) 136 | usePass(unrealBloomPass, true) 137 | 138 | // Tint pass 139 | const tintPass = useMemo(() => { 140 | const TintShader = { 141 | uniforms: { 142 | tDiffuse: { value: null }, 143 | uTint: { value: null }, 144 | }, 145 | vertexShader: tintVertexShader, 146 | fragmentShader: tintFragmentShader, 147 | } 148 | const tintPass = new ShaderPass(TintShader) 149 | tintPass.material.uniforms.uTint.value = new Vector3( 150 | red_tint, 151 | green_tint, 152 | blue_tint 153 | ) 154 | return tintPass 155 | }, [red_tint, green_tint, blue_tint]) 156 | usePass(tintPass, true) 157 | 158 | // Displacement pass 159 | const DisplacementShader = { 160 | uniforms: { 161 | tDiffuse: { value: null }, 162 | uNormalMap: { value: null }, 163 | }, 164 | vertexShader: displacementVertexShader, 165 | fragmentShader: displacementFragmentShader, 166 | } 167 | const displacementPass = new ShaderPass(DisplacementShader) 168 | displacementPass.material.uniforms.uNormalMap.value = useLoader( 169 | TextureLoader, 170 | "/textures/interfaceNormalMap.png" 171 | ) 172 | usePass(displacementPass, false) 173 | 174 | // Antialias pass 175 | const smaaPass = new SMAAPass(size.width, size.height) 176 | usePass(smaaPass, false) 177 | 178 | return 179 | } 180 | -------------------------------------------------------------------------------- /components/post-processing/Scene.tsx: -------------------------------------------------------------------------------- 1 | import { useThree } from "react-three-fiber" 2 | import { useGLTF } from "@react-three/drei" 3 | import { 4 | CubeTextureLoader, 5 | Mesh, 6 | MeshStandardMaterial, 7 | ReinhardToneMapping, 8 | sRGBEncoding, 9 | } from "three" 10 | import { useEffect, useRef } from "react" 11 | 12 | export function Scene() { 13 | const three = useThree() 14 | 15 | const cubeTextureLoader = new CubeTextureLoader() 16 | const envMapTexture = cubeTextureLoader.load([ 17 | "/textures/environmentMaps/2/px.jpg", 18 | "/textures/environmentMaps/2/nx.jpg", 19 | "/textures/environmentMaps/2/py.jpg", 20 | "/textures/environmentMaps/2/ny.jpg", 21 | "/textures/environmentMaps/2/pz.jpg", 22 | "/textures/environmentMaps/2/nz.jpg", 23 | ]) 24 | envMapTexture.encoding = sRGBEncoding 25 | three.scene.background = envMapTexture 26 | three.scene.environment = envMapTexture 27 | 28 | three.gl.physicallyCorrectLights = true 29 | three.gl.outputEncoding = sRGBEncoding 30 | three.gl.toneMapping = ReinhardToneMapping 31 | 32 | const { scene } = useGLTF("/models/DamagedHelmet/glTF/DamagedHelmet.gltf") 33 | scene.scale.set(2, 2, 2) 34 | scene.rotation.y = Math.PI * 0.5 35 | three.scene.add(scene) 36 | 37 | const directionalLightRef = useRef(null) 38 | useEffect(() => { 39 | const directionalLight = directionalLightRef.current 40 | if (directionalLight) { 41 | directionalLight.shadow.mapSize.set(1024, 1024) 42 | directionalLight.shadow.camera.far = 15 43 | directionalLight.shadow.normalBias = 0.05 44 | } 45 | }) 46 | 47 | return ( 48 | <> 49 | 55 | 56 | ) 57 | } 58 | -------------------------------------------------------------------------------- /components/post-processing/displacement-fragment.glsl.ts: -------------------------------------------------------------------------------- 1 | export const displacementFragmentShader = /*glsl*/ ` 2 | 3 | uniform sampler2D tDiffuse; 4 | uniform sampler2D uNormalMap; 5 | 6 | varying vec2 vUv; 7 | 8 | void main() 9 | { 10 | vec3 normalColor = texture2D(uNormalMap, vUv).xyz * 2.0 - 1.0; 11 | vec2 newUv = vUv + normalColor.xy * 0.1; 12 | vec4 color = texture2D(tDiffuse, newUv); 13 | 14 | vec3 lightDirection = normalize(vec3(- 1.0, 1.0, 0.0)); 15 | float lightness = clamp(dot(normalColor, lightDirection), 0.0, 1.0); 16 | color.rgb += lightness * 2.0; 17 | 18 | gl_FragColor = color; 19 | } 20 | 21 | ` 22 | -------------------------------------------------------------------------------- /components/post-processing/displacement-vertex.glsl.ts: -------------------------------------------------------------------------------- 1 | export const displacementVertexShader = /*glsl*/ ` 2 | 3 | varying vec2 vUv; 4 | 5 | void main() 6 | { 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 8 | 9 | vUv = uv; 10 | } 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /components/post-processing/tint-fragment.glsl.ts: -------------------------------------------------------------------------------- 1 | export const tintFragmentShader = /*glsl*/ ` 2 | 3 | uniform sampler2D tDiffuse; 4 | uniform vec3 uTint; 5 | 6 | varying vec2 vUv; 7 | 8 | void main() 9 | { 10 | vec4 color = texture2D(tDiffuse, vUv); 11 | color.rgb += uTint; 12 | 13 | gl_FragColor = color; 14 | } 15 | 16 | ` 17 | -------------------------------------------------------------------------------- /components/post-processing/tint-vertex.glsl.ts: -------------------------------------------------------------------------------- 1 | export const tintVertexShader = /*glsl*/ ` 2 | 3 | varying vec2 vUv; 4 | 5 | void main() 6 | { 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 8 | 9 | vUv = uv; 10 | } 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /components/shader-galaxy/fragment.glsl.ts: -------------------------------------------------------------------------------- 1 | const points = [ 2 | /*glsl*/ ` 3 | // Disc 4 | float strength = distance(gl_PointCoord, vec2(0.5)); 5 | strength = step(0.5, strength); 6 | strength = 1.0 - strength; 7 | `, 8 | /*glsl*/ ` 9 | // Diffuse point 10 | float strength = distance(gl_PointCoord, vec2(0.5)); 11 | strength *= 2.0; 12 | strength = 1.0 - strength; 13 | `, 14 | /*glsl*/ ` 15 | // Light point 16 | float strength = distance(gl_PointCoord, vec2(0.5)); 17 | strength = 1.0 - strength; 18 | strength = pow(strength, 10.0); 19 | `, 20 | ] 21 | 22 | export function fragmentShader(point: number): string { 23 | return /*glsl*/ ` 24 | 25 | varying vec3 vColor; 26 | 27 | void main() 28 | { 29 | ${points[point]} 30 | 31 | // Final color 32 | vec3 color = mix(vec3(0.0), vColor, strength); 33 | gl_FragColor = vec4(color, 1.0); 34 | } 35 | 36 | ` 37 | } 38 | -------------------------------------------------------------------------------- /components/shader-galaxy/vertex.glsl.ts: -------------------------------------------------------------------------------- 1 | export const vertexShader = /*glsl*/ ` 2 | 3 | uniform float uTime; 4 | uniform float uSize; 5 | 6 | attribute vec3 aRandomness; 7 | attribute float aScale; 8 | 9 | varying vec3 vColor; 10 | 11 | void main() 12 | { 13 | /** 14 | * Position 15 | */ 16 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 17 | 18 | // Rotate 19 | float angle = atan(modelPosition.x, modelPosition.z); 20 | float distanceToCenter = length(modelPosition.xz); 21 | float angleOffset = (1.0 / distanceToCenter) * uTime; 22 | angle += angleOffset; 23 | modelPosition.x = cos(angle) * distanceToCenter; 24 | modelPosition.z = sin(angle) * distanceToCenter; 25 | 26 | // Randomness 27 | modelPosition.xyz += aRandomness; 28 | 29 | vec4 viewPosition = viewMatrix * modelPosition; 30 | vec4 projectedPosition = projectionMatrix * viewPosition; 31 | gl_Position = projectedPosition; 32 | 33 | /** 34 | * Size 35 | */ 36 | gl_PointSize = uSize * aScale; 37 | gl_PointSize *= (1.0 / - viewPosition.z); 38 | 39 | /** 40 | * Color 41 | */ 42 | vColor = color; 43 | } 44 | 45 | ` 46 | -------------------------------------------------------------------------------- /components/shader-patterns/fragment.glsl.ts: -------------------------------------------------------------------------------- 1 | const patterns = [ 2 | `// Pattern 1 3 | gl_FragColor = vec4(vUv, 1.0, 1.0);`, 4 | 5 | `// Pattern 2 6 | gl_FragColor = vec4(vUv, 0.0, 1.0);`, 7 | 8 | `// Pattern 3 9 | float strength = vUv.x;`, 10 | 11 | `// Pattern 4 12 | float strength = vUv.y;`, 13 | 14 | `// Pattern 5 15 | float strength = 1.0 - vUv.y;`, 16 | 17 | `// Pattern 6 18 | float strength = vUv.y * 10.0;`, 19 | 20 | `// Pattern 7 21 | float strength = mod(vUv.y * 10.0, 1.0);`, 22 | 23 | `// Pattern 8 24 | float strength = mod(vUv.y * 10.0, 1.0); 25 | strength = step(0.5, strength);`, 26 | 27 | `// Pattern 9 28 | float strength = mod(vUv.y * 10.0, 1.0); 29 | strength = step(0.8, strength);`, 30 | 31 | `// Pattern 10 32 | float strength = mod(vUv.x * 10.0, 1.0); 33 | strength = step(0.8, strength);`, 34 | 35 | `// Pattern 11 36 | float strength = step(0.8, mod(vUv.x * 10.0, 1.0)); 37 | strength += step(0.8, mod(vUv.y * 10.0, 1.0)); 38 | strength = clamp(strength, 0.0, 1.0);`, 39 | 40 | `// Pattern 12 41 | float strength = step(0.8, mod(vUv.x * 10.0, 1.0)); 42 | strength *= step(0.8, mod(vUv.y * 10.0, 1.0));`, 43 | 44 | `// Pattern 13 45 | float strength = step(0.4, mod(vUv.x * 10.0, 1.0)); 46 | strength *= step(0.8, mod(vUv.y * 10.0, 1.0));`, 47 | 48 | `// Pattern 14 49 | float barX = step(0.4, mod(vUv.x * 10.0, 1.0)) * step(0.8, mod(vUv.y * 10.0, 1.0)); 50 | float barY = step(0.8, mod(vUv.x * 10.0, 1.0)) * step(0.4, mod(vUv.y * 10.0, 1.0)); 51 | float strength = barX + barY; 52 | strength = clamp(strength, 0.0, 1.0);`, 53 | 54 | `// Pattern 15 55 | float barX = step(0.4, mod(vUv.x * 10.0 - 0.2, 1.0)) * step(0.8, mod(vUv.y * 10.0, 1.0)); 56 | float barY = step(0.8, mod(vUv.x * 10.0, 1.0)) * step(0.4, mod(vUv.y * 10.0 - 0.2, 1.0)); 57 | float strength = barX + barY; 58 | strength = clamp(strength, 0.0, 1.0);`, 59 | 60 | `// Pattern 16 61 | float strength = abs(vUv.x - 0.5);`, 62 | 63 | `// Pattern 17 64 | float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));`, 65 | 66 | `// Pattern 18 67 | float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));`, 68 | 69 | `// Pattern 19 70 | float strength = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));`, 71 | 72 | `// Pattern 20 73 | float strength = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5))); 74 | strength *= 1.0 - step(0.25, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));`, 75 | 76 | `// Pattern 21 77 | float strength = floor(vUv.x * 10.0) / 10.0;`, 78 | 79 | `// Pattern 22 80 | float strength = floor(vUv.x * 10.0) / 10.0 * floor(vUv.y * 10.0) / 10.0;`, 81 | 82 | `// Pattern 23 83 | float strength = random(vUv);`, 84 | 85 | `// Pattern 24 86 | vec2 gridUv = vec2(floor(vUv.x * 10.0) / 10.0, floor(vUv.y * 10.0) / 10.0); 87 | float strength = random(gridUv);`, 88 | 89 | `// Pattern 25 90 | vec2 gridUv = vec2(floor(vUv.x * 10.0) / 10.0, floor((vUv.y + vUv.x * 0.5) * 10.0) / 10.0); 91 | float strength = random(gridUv);`, 92 | 93 | `// Pattern 26 94 | float strength = length(vUv);`, 95 | 96 | `// Pattern 27 97 | float strength = distance(vUv, vec2(0.5));`, 98 | 99 | `// Pattern 28 100 | float strength = 1.0 - distance(vUv, vec2(0.5));`, 101 | 102 | `// Pattern 29 103 | float strength = 0.015 / (distance(vUv, vec2(0.5)));`, 104 | 105 | `// Pattern 30 106 | float strength = 0.15 / (distance(vec2(vUv.x, (vUv.y - 0.5) * 5.0 + 0.5), vec2(0.5)));`, 107 | 108 | `// Pattern 31 109 | float strength = 0.15 / (distance(vec2(vUv.x, (vUv.y - 0.5) * 5.0 + 0.5), vec2(0.5))); 110 | strength *= 0.15 / (distance(vec2(vUv.y, (vUv.x - 0.5) * 5.0 + 0.5), vec2(0.5)));`, 111 | 112 | `// Pattern 32 113 | vec2 rotatedUv = rotate(vUv, PI * 0.25, vec2(0.5)); 114 | float strength = 0.15 / (distance(vec2(rotatedUv.x, (rotatedUv.y - 0.5) * 5.0 + 0.5), vec2(0.5))); 115 | strength *= 0.15 / (distance(vec2(rotatedUv.y, (rotatedUv.x - 0.5) * 5.0 + 0.5), vec2(0.5)));`, 116 | 117 | `// Pattern 33 118 | float strength = step(0.5, distance(vUv, vec2(0.5)) + 0.25);`, 119 | 120 | `// Pattern 34 121 | float strength = abs(distance(vUv, vec2(0.5)) - 0.25);`, 122 | 123 | `// Pattern 35 124 | float strength = step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25));`, 125 | 126 | `// Pattern 36 127 | float strength = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25));`, 128 | 129 | `// Pattern 37 130 | vec2 wavedUv = vec2( 131 | vUv.x, 132 | vUv.y + sin(vUv.x * 30.0) * 0.1 133 | ); 134 | float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));`, 135 | 136 | `// Pattern 38 137 | vec2 wavedUv = vec2( 138 | vUv.x + sin(vUv.y * 30.0) * 0.1, 139 | vUv.y + sin(vUv.x * 30.0) * 0.1 140 | ); 141 | float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));`, 142 | 143 | `// Pattern 39 144 | vec2 wavedUv = vec2( 145 | vUv.x + sin(vUv.y * 100.0) * 0.1, 146 | vUv.y + sin(vUv.x * 100.0) * 0.1 147 | ); 148 | float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));`, 149 | 150 | `// Pattern 40 151 | float angle = atan(vUv.x, vUv.y); 152 | float strength = angle;`, 153 | 154 | `// Pattern 41 155 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5); 156 | float strength = angle;`, 157 | 158 | `// Pattern 42 159 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / (PI * 2.0) + 0.5; 160 | float strength = angle;`, 161 | 162 | `// Pattern 43 163 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / (PI * 2.0) + 0.5; 164 | float strength = mod(angle * 20.0, 1.0);`, 165 | 166 | `// Pattern 44 167 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / (PI * 2.0) + 0.5; 168 | float strength = sin(angle * 100.0);`, 169 | 170 | `// Pattern 45 171 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / (PI * 2.0) + 0.5; 172 | float radius = 0.25 + sin(angle * 100.0) * 0.02; 173 | float strength = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - radius));`, 174 | 175 | `// Pattern 46 176 | float strength = cnoise(vUv * 10.0);`, 177 | 178 | `// Pattern 47 179 | float strength = step(0.0, cnoise(vUv * 10.0));`, 180 | 181 | `// Pattern 48 182 | float strength = 1.0 - abs(cnoise(vUv * 10.0));`, 183 | 184 | `// Pattern 49 185 | float strength = sin(cnoise(vUv * 10.0) * 20.0);`, 186 | 187 | `// Pattern 50 188 | float strength = step(0.9, sin(cnoise(vUv * 10.0) * 20.0));`, 189 | ] 190 | 191 | export function fragmentShader(n: number, bw: boolean): string { 192 | return /*glsl*/ ` 193 | 194 | #define PI 3.1415926535897932384626433832795 195 | 196 | varying vec2 vUv; 197 | 198 | float random(vec2 st) 199 | { 200 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 201 | } 202 | 203 | vec2 rotate(vec2 uv, float rotation, vec2 mid) 204 | { 205 | return vec2( 206 | cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, 207 | cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y 208 | ); 209 | } 210 | 211 | // Classic Perlin 2D Noise 212 | // by Stefan Gustavson 213 | vec4 permute(vec4 x) 214 | { 215 | return mod(((x*34.0)+1.0)*x, 289.0); 216 | } 217 | 218 | vec2 fade(vec2 t) 219 | { 220 | return t*t*t*(t*(t*6.0-15.0)+10.0); 221 | } 222 | 223 | float cnoise(vec2 P) 224 | { 225 | vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); 226 | vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); 227 | Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation 228 | vec4 ix = Pi.xzxz; 229 | vec4 iy = Pi.yyww; 230 | vec4 fx = Pf.xzxz; 231 | vec4 fy = Pf.yyww; 232 | vec4 i = permute(permute(ix) + iy); 233 | vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024... 234 | vec4 gy = abs(gx) - 0.5; 235 | vec4 tx = floor(gx + 0.5); 236 | gx = gx - tx; 237 | vec2 g00 = vec2(gx.x,gy.x); 238 | vec2 g10 = vec2(gx.y,gy.y); 239 | vec2 g01 = vec2(gx.z,gy.z); 240 | vec2 g11 = vec2(gx.w,gy.w); 241 | vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)); 242 | g00 *= norm.x; 243 | g01 *= norm.y; 244 | g10 *= norm.z; 245 | g11 *= norm.w; 246 | float n00 = dot(g00, vec2(fx.x, fy.x)); 247 | float n10 = dot(g10, vec2(fx.y, fy.y)); 248 | float n01 = dot(g01, vec2(fx.z, fy.z)); 249 | float n11 = dot(g11, vec2(fx.w, fy.w)); 250 | vec2 fade_xy = fade(Pf.xy); 251 | vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); 252 | float n_xy = mix(n_x.x, n_x.y, fade_xy.y); 253 | return 2.3 * n_xy; 254 | } 255 | 256 | void main() 257 | { 258 | ${patterns[n]} 259 | 260 | ${ 261 | n > 1 262 | ? /*glsl*/ ` 263 | // Final color 264 | vec3 blackColor = vec3(0.0); 265 | vec3 uvColor = vec3(vUv, 1.0); 266 | vec3 mixedColor = mix(blackColor, uvColor, strength); 267 | 268 | ${ 269 | bw 270 | ? /*glsl*/ `gl_FragColor = vec4(vec3(strength), 1.0);` 271 | : /*glsl*/ `gl_FragColor = vec4(mixedColor, 1.0);` 272 | } 273 | ` 274 | : "" 275 | } 276 | } 277 | 278 | ` 279 | } 280 | -------------------------------------------------------------------------------- /components/shader-patterns/vertex.glsl.ts: -------------------------------------------------------------------------------- 1 | export const vertexShader = /*glsl*/ ` 2 | 3 | varying vec2 vUv; 4 | 5 | void main() 6 | { 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 8 | 9 | vUv = uv; 10 | } 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /components/shader-water/fragment.glsl.ts: -------------------------------------------------------------------------------- 1 | export const fragmentShader = /*glsl*/ ` 2 | 3 | uniform vec3 uDepthColor; 4 | uniform vec3 uSurfaceColor; 5 | uniform float uColorOffset; 6 | uniform float uColorMultiplier; 7 | 8 | varying float vElevation; 9 | 10 | void main() 11 | { 12 | float mixStrength = (vElevation + uColorOffset) * uColorMultiplier; 13 | vec3 color = mix(uDepthColor, uSurfaceColor, mixStrength); 14 | 15 | gl_FragColor = vec4(color, 1.0); 16 | } 17 | 18 | ` 19 | -------------------------------------------------------------------------------- /components/shader-water/vertex.glsl.ts: -------------------------------------------------------------------------------- 1 | export const vertexShader = /*glsl*/ ` 2 | 3 | uniform float uTime; 4 | uniform float uBigWavesElevation; 5 | uniform vec2 uBigWavesFrequency; 6 | uniform float uBigWavesSpeed; 7 | 8 | uniform float uSmallWavesElevation; 9 | uniform float uSmallWavesFrequency; 10 | uniform float uSmallWavesSpeed; 11 | uniform float uSmallIterations; 12 | 13 | varying float vElevation; 14 | 15 | // Classic Perlin 3D Noise 16 | // by Stefan Gustavson 17 | vec4 permute(vec4 x) 18 | { 19 | return mod(((x*34.0)+1.0)*x, 289.0); 20 | } 21 | vec4 taylorInvSqrt(vec4 r) 22 | { 23 | return 1.79284291400159 - 0.85373472095314 * r; 24 | } 25 | vec3 fade(vec3 t) 26 | { 27 | return t*t*t*(t*(t*6.0-15.0)+10.0); 28 | } 29 | 30 | float cnoise(vec3 P) 31 | { 32 | vec3 Pi0 = floor(P); // Integer part for indexing 33 | vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1 34 | Pi0 = mod(Pi0, 289.0); 35 | Pi1 = mod(Pi1, 289.0); 36 | vec3 Pf0 = fract(P); // Fractional part for interpolation 37 | vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0 38 | vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); 39 | vec4 iy = vec4(Pi0.yy, Pi1.yy); 40 | vec4 iz0 = Pi0.zzzz; 41 | vec4 iz1 = Pi1.zzzz; 42 | 43 | vec4 ixy = permute(permute(ix) + iy); 44 | vec4 ixy0 = permute(ixy + iz0); 45 | vec4 ixy1 = permute(ixy + iz1); 46 | 47 | vec4 gx0 = ixy0 / 7.0; 48 | vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5; 49 | gx0 = fract(gx0); 50 | vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0); 51 | vec4 sz0 = step(gz0, vec4(0.0)); 52 | gx0 -= sz0 * (step(0.0, gx0) - 0.5); 53 | gy0 -= sz0 * (step(0.0, gy0) - 0.5); 54 | 55 | vec4 gx1 = ixy1 / 7.0; 56 | vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5; 57 | gx1 = fract(gx1); 58 | vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1); 59 | vec4 sz1 = step(gz1, vec4(0.0)); 60 | gx1 -= sz1 * (step(0.0, gx1) - 0.5); 61 | gy1 -= sz1 * (step(0.0, gy1) - 0.5); 62 | 63 | vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); 64 | vec3 g100 = vec3(gx0.y,gy0.y,gz0.y); 65 | vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); 66 | vec3 g110 = vec3(gx0.w,gy0.w,gz0.w); 67 | vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); 68 | vec3 g101 = vec3(gx1.y,gy1.y,gz1.y); 69 | vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); 70 | vec3 g111 = vec3(gx1.w,gy1.w,gz1.w); 71 | 72 | vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))); 73 | g000 *= norm0.x; 74 | g010 *= norm0.y; 75 | g100 *= norm0.z; 76 | g110 *= norm0.w; 77 | vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))); 78 | g001 *= norm1.x; 79 | g011 *= norm1.y; 80 | g101 *= norm1.z; 81 | g111 *= norm1.w; 82 | 83 | float n000 = dot(g000, Pf0); 84 | float n100 = dot(g100, vec3(Pf1.x, Pf0.yz)); 85 | float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z)); 86 | float n110 = dot(g110, vec3(Pf1.xy, Pf0.z)); 87 | float n001 = dot(g001, vec3(Pf0.xy, Pf1.z)); 88 | float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z)); 89 | float n011 = dot(g011, vec3(Pf0.x, Pf1.yz)); 90 | float n111 = dot(g111, Pf1); 91 | 92 | vec3 fade_xyz = fade(Pf0); 93 | vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z); 94 | vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y); 95 | float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 96 | return 2.2 * n_xyz; 97 | } 98 | 99 | void main() 100 | { 101 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 102 | 103 | // Elevation 104 | float elevation = sin(modelPosition.x * uBigWavesFrequency.x + uTime * uBigWavesSpeed) * 105 | sin(modelPosition.z * uBigWavesFrequency.y + uTime * uBigWavesSpeed) * 106 | uBigWavesElevation; 107 | 108 | for(float i = 1.0; i <= uSmallIterations; i++) 109 | { 110 | elevation -= abs(cnoise(vec3(modelPosition.xz * uSmallWavesFrequency * i, uTime * uSmallWavesSpeed)) * uSmallWavesElevation / i); 111 | } 112 | 113 | modelPosition.y += elevation; 114 | 115 | vec4 viewPosition = viewMatrix * modelPosition; 116 | vec4 projectedPosition = projectionMatrix * viewPosition; 117 | gl_Position = projectedPosition; 118 | 119 | vElevation = elevation; 120 | } 121 | 122 | ` 123 | -------------------------------------------------------------------------------- /hooks/useBodyPointerCursor.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react" 2 | 3 | export function useBodyPointerCursor(hoverState: boolean) { 4 | useEffect(() => { 5 | const body = document.body 6 | if (hoverState) { 7 | body.style.cursor = "pointer" 8 | } else { 9 | body.style.cursor = "default" 10 | } 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /hooks/useFullScreen.ts: -------------------------------------------------------------------------------- 1 | import { MutableRefObject, useEffect } from "react" 2 | 3 | declare global { 4 | interface Document { 5 | webkitFullscreenElement: any 6 | webkitExitFullscreen: any 7 | } 8 | } 9 | 10 | export function useFullScreen(ref: MutableRefObject) { 11 | useEffect(() => { 12 | const view = ref.current 13 | 14 | if (view) { 15 | const originalW = view.offsetWidth 16 | 17 | const revertWidth = () => { 18 | view.style.width = originalW + "px" 19 | } 20 | 21 | view.addEventListener("dblclick", () => { 22 | const fullscreenElement = 23 | document.fullscreenElement || document.webkitFullscreenElement 24 | if (!fullscreenElement) { 25 | if (view.requestFullscreen) { 26 | view.requestFullscreen() 27 | } else if (view.webkitRequestFullscreen) { 28 | view.webkitRequestFullscreen() 29 | } 30 | } else { 31 | if (document.exitFullscreen) { 32 | document.exitFullscreen() 33 | } else if (document.webkitExitFullscreen) { 34 | document.webkitExitFullscreen() 35 | } 36 | } 37 | }) 38 | 39 | document.addEventListener("fullscreenchange", revertWidth) 40 | document.addEventListener("webkitfullscreenchange", revertWidth) 41 | document.addEventListener("mozfullscreenchange", revertWidth) 42 | document.addEventListener("MSFullscreenChange", revertWidth) 43 | } 44 | }) 45 | } 46 | -------------------------------------------------------------------------------- /hooks/useLightShadowConfigs.ts: -------------------------------------------------------------------------------- 1 | import { MutableRefObject, useEffect } from "react" 2 | 3 | export function useLightShadowConfigs(lightRef: MutableRefObject) { 4 | useEffect(() => { 5 | const light = lightRef.current 6 | if (light) { 7 | light.shadow.mapSize.width = 256 8 | light.shadow.mapSize.height = 256 9 | light.shadow.camera.far = 7 10 | } 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /hooks/useUV2.ts: -------------------------------------------------------------------------------- 1 | import { useUpdate } from "react-three-fiber" 2 | import { BoxGeometry, Float32BufferAttribute } from "three" 3 | 4 | export function useUV2() { 5 | const geomRef = useUpdate((geometry: BoxGeometry) => { 6 | geometry.setAttribute( 7 | "uv2", 8 | new Float32BufferAttribute(geometry.attributes.uv.array, 2) 9 | ) 10 | }, []) 11 | return geomRef 12 | } 13 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withTM = require("next-transpile-modules")([ 2 | "three/examples/jsm/lines/LineGeometry", 3 | "@react-three/drei", 4 | ]) 5 | 6 | module.exports = withTM({ 7 | webpack: (config) => { 8 | config.module.rules.push({ 9 | test: /react-spring/, 10 | sideEffects: true, 11 | }) 12 | 13 | return config 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "next dev", 4 | "build": "next build", 5 | "start": "next start", 6 | "up": "npx npm-check-updates -u" 7 | }, 8 | "dependencies": { 9 | "@react-three/cannon": "^0.6.1", 10 | "@react-three/drei": "^3.11.1", 11 | "@types/node": "^14.14.35", 12 | "@types/react": "^17.0.3", 13 | "@types/three": "^0.126.1", 14 | "autoprefixer": "^10.2.5", 15 | "gsap": "^3.6.0", 16 | "leva": "^0.8.0", 17 | "next": "^10.2.0", 18 | "next-transpile-modules": "^6.3.0", 19 | "postcss": "^8.2.13", 20 | "postcss-flexbugs-fixes": "^5.0.2", 21 | "postcss-preset-env": "^6.7.0", 22 | "react": "^17.0.1", 23 | "react-dom": "^17.0.1", 24 | "react-three-fiber": "^5.3.19", 25 | "tailwindcss": "^2.0.4", 26 | "three": "^0.126.1", 27 | "typescript": "^4.2.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /pages/3d-text.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Layout } from "../components/Layout" 3 | import { Suspense, useEffect, useMemo, useRef } from "react" 4 | import { Canvas, useLoader } from "react-three-fiber" 5 | import { 6 | FontLoader, 7 | MeshMatcapMaterial, 8 | TextureLoader, 9 | TorusGeometry, 10 | } from "three" 11 | import { OrbitControls, Loader } from "@react-three/drei" 12 | import { useControls, Leva } from "leva" 13 | 14 | function Scene() { 15 | const { matCapTextureFile } = useControls({ 16 | matCapTextureFile: { 17 | value: "8.png", 18 | options: { 19 | "1.png": "1.png", 20 | "2.png": "2.png", 21 | "3.png": "3.png", 22 | "4.png": "4.png", 23 | "5.png": "5.png", 24 | "6.png": "6.png", 25 | "7.png": "7.png", 26 | "8.png": "8.png", 27 | }, 28 | }, 29 | }) 30 | 31 | const matCapTexture = useLoader( 32 | TextureLoader, 33 | `/textures/matcaps/${matCapTextureFile}` 34 | ) 35 | const material = useMemo( 36 | () => new MeshMatcapMaterial({ matcap: matCapTexture }), 37 | [matCapTexture] 38 | ) 39 | const donutGeometry = useMemo(() => new TorusGeometry(0.3, 0.2, 32, 64), []) 40 | const font = useLoader(FontLoader, "/fonts/helvetiker_regular.typeface.json") 41 | 42 | const donuts = [] 43 | for (let i = 0; i < 100; i++) { 44 | const scale = Math.random() 45 | donuts.push( 46 | 58 | ) 59 | } 60 | 61 | const textRef = useRef(null) 62 | useEffect(() => { 63 | const text = textRef.current 64 | if (text) text.center() 65 | }) 66 | const text = ( 67 | 68 | 69 | 86 | 87 | ) 88 | 89 | return ( 90 | <> 91 | {donuts} 92 | {text} 93 | 94 | 95 | ) 96 | } 97 | 98 | export default function ThreeDText() { 99 | return ( 100 | 101 | 102 | 3D Text - Three.js Journey to R3F 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | ) 114 | } 115 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "tailwindcss/tailwind.css" 2 | 3 | export default function _app({ Component, pageProps }) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /pages/animation.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useUpdate } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import gsap from "gsap" 5 | import { Object3D } from "three" 6 | import { OrbitControls } from "@react-three/drei" 7 | import { Texts } from "../components/Texts" 8 | 9 | function Box() { 10 | const mesh = useUpdate((mesh: Object3D) => { 11 | gsap.to(mesh.position, { duration: 1, delay: 1.5, x: 2 }) 12 | }, []) 13 | 14 | return ( 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | export default function Animation() { 23 | return ( 24 | 25 | 26 | Animation - Three.js Journey to R3F 27 | 28 | 29 | 30 | 31 | 32 |

it'll move...

33 | 34 | 35 | 36 | 37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /pages/basic.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | 6 | export default function Basic() { 7 | return ( 8 | 9 | 10 | Basic - Three.js Journey to R3F 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /pages/burger-model.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useGLTF, Loader } from "@react-three/drei" 5 | import { Suspense } from "react" 6 | 7 | function Scene() { 8 | const { scene } = useThree() 9 | const { scene: burgerModel } = useGLTF("/models/hamburger.glb") 10 | scene.add(burgerModel) 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | export default function BurgerModel() { 21 | return ( 22 | 23 | 24 | Burger Model - Three.js Journey to R3F 25 | 26 | 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /pages/fox-model.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useGLTF, Loader } from "@react-three/drei" 5 | import { Suspense } from "react" 6 | import { AnimationMixer, DoubleSide } from "three" 7 | import { useControls } from "leva" 8 | 9 | function Scene() { 10 | const { animation } = useControls({ 11 | animation: { 12 | value: 0, 13 | options: { 14 | 0: 0, 15 | 1: 1, 16 | 2: 2, 17 | }, 18 | }, 19 | }) 20 | 21 | const three = useThree() 22 | const { animations, scene } = useGLTF("/models/Fox/glTF/Fox.gltf") 23 | scene.scale.set(0.025, 0.025, 0.025) 24 | three.scene.add(scene) 25 | 26 | const mixer = new AnimationMixer(scene) 27 | const action = mixer.clipAction(animations[animation]) 28 | action.play() 29 | 30 | useFrame((state, delta) => { 31 | if (mixer) { 32 | mixer.update(delta) 33 | } 34 | }) 35 | 36 | return ( 37 | <> 38 | 39 | 40 | 46 | 47 | 48 | ) 49 | } 50 | 51 | export default function FoxModel() { 52 | return ( 53 | 54 | 55 | Fox Model - Three.js Journey to R3F 56 | 57 | 58 | 59 | 64 | 65 | 66 | 67 | 72 | 73 | 74 | 75 | 76 | ) 77 | } 78 | -------------------------------------------------------------------------------- /pages/full-screen.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { useRef } from "react" 5 | import { useFullScreen } from "../hooks/useFullScreen" 6 | import { OrbitControls } from "@react-three/drei" 7 | import { Texts } from "../components/Texts" 8 | 9 | export default function FullScreen() { 10 | const canvas = useRef(null) 11 | useFullScreen(canvas) 12 | 13 | return ( 14 | 15 | 16 | Full Screen - Three.js Journey to R3F 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |

on desktop,

27 |

double-click to go full screen.

28 | 29 | 30 | 31 |
32 | 33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /pages/galaxy.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { useControls, Leva } from "leva" 6 | import { useEffect, useRef } from "react" 7 | import { AdditiveBlending, BufferAttribute, Color } from "three" 8 | 9 | function Scene() { 10 | const { 11 | star_count, 12 | star_size, 13 | galaxy_radius, 14 | galaxy_spin, 15 | galaxy_branches, 16 | galaxy_random_power, 17 | galaxy_randomness, 18 | inside_color, 19 | outside_color, 20 | } = useControls({ 21 | star_count: { 22 | value: 100000, 23 | min: 10000, 24 | max: 500000, 25 | step: 10000, 26 | }, 27 | star_size: { 28 | value: 0.01, 29 | min: 0.001, 30 | max: 0.1, 31 | step: 0.001, 32 | }, 33 | galaxy_radius: { 34 | value: 5, 35 | min: 1, 36 | max: 20, 37 | step: 1, 38 | }, 39 | galaxy_spin: { 40 | value: 1, 41 | min: -5, 42 | max: 5, 43 | step: 1, 44 | }, 45 | galaxy_branches: { 46 | value: 4, 47 | min: 1, 48 | max: 20, 49 | step: 1, 50 | }, 51 | galaxy_random_power: { 52 | value: 3, 53 | min: 1, 54 | max: 10, 55 | step: 0.1, 56 | }, 57 | galaxy_randomness: { 58 | value: 0.2, 59 | min: 0, 60 | max: 2, 61 | step: 0.01, 62 | }, 63 | inside_color: "#00b2ff", 64 | outside_color: "#ff0000", 65 | }) 66 | 67 | const geomRef = useRef(null) 68 | 69 | const positions = new Float32Array(star_count * 3) 70 | const colors = new Float32Array(star_count * 3) 71 | 72 | const colorInside = new Color(inside_color) 73 | const colorOutside = new Color(outside_color) 74 | 75 | for (let i = 0; i < star_count; i++) { 76 | const i3 = i * 3 77 | 78 | const radius = Math.random() * galaxy_radius 79 | 80 | const spinAngle = radius * galaxy_spin 81 | const branchAngle = ((i % galaxy_branches) / galaxy_branches) * Math.PI * 2 82 | 83 | const randomX = 84 | Math.pow(Math.random(), galaxy_random_power) * 85 | (Math.random() < 0.5 ? 1 : -1) * 86 | galaxy_randomness * 87 | radius 88 | const randomY = 89 | Math.pow(Math.random(), galaxy_random_power) * 90 | (Math.random() < 0.5 ? 1 : -1) * 91 | galaxy_randomness * 92 | radius 93 | const randomZ = 94 | Math.pow(Math.random(), galaxy_random_power) * 95 | (Math.random() < 0.5 ? 1 : -1) * 96 | galaxy_randomness * 97 | radius 98 | 99 | positions[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX 100 | positions[i3 + 1] = randomY 101 | positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ 102 | 103 | const mixedColor = colorInside.clone() 104 | mixedColor.lerp(colorOutside, radius / galaxy_radius) 105 | 106 | colors[i3] = mixedColor.r 107 | colors[i3 + 1] = mixedColor.g 108 | colors[i3 + 2] = mixedColor.b 109 | } 110 | 111 | useEffect(() => { 112 | const geom = geomRef.current 113 | if (geom) { 114 | geom.setAttribute("position", new BufferAttribute(positions, 3)) 115 | geom.setAttribute("color", new BufferAttribute(colors, 3)) 116 | } 117 | }) 118 | 119 | return ( 120 | <> 121 | 122 | 123 | 130 | 131 | 132 | ) 133 | } 134 | 135 | export default function Galaxy() { 136 | return ( 137 | 138 | 139 | Galaxy - Three.js Journey to R3F 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | ) 149 | } 150 | -------------------------------------------------------------------------------- /pages/geometry.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useUpdate } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { BufferAttribute, BufferGeometry } from "three" 5 | import { OrbitControls } from "@react-three/drei" 6 | 7 | const triangleCount = 50 8 | const verticePerTriangle = 3 9 | const floatPerVertice = 3 10 | const floatCount = floatPerVertice * verticePerTriangle * triangleCount 11 | const positionsArray = new Float32Array(floatCount) 12 | for (let i = 0; i < floatCount; i++) 13 | positionsArray[i] = (Math.random() - 0.5) * 4 14 | 15 | function Scene() { 16 | const ref = useUpdate((geometry: BufferGeometry) => { 17 | geometry.setAttribute( 18 | "position", 19 | new BufferAttribute(positionsArray, floatPerVertice) 20 | ) 21 | }, []) 22 | 23 | return ( 24 | <> 25 | 26 | 27 | 28 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default function Geometry() { 35 | return ( 36 | 37 | 38 | Geometry - Three.js Journey to R3F 39 | 40 | 41 | 42 | 43 | 44 | 45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /pages/ghost-house.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, Loader } from "@react-three/drei" 5 | import { Suspense } from "react" 6 | import { Graves } from "../components/ghost-house/Graves" 7 | import { Land } from "../components/ghost-house/Land" 8 | import { Lights } from "../components/ghost-house/Lights" 9 | import { Ghosts } from "../components/ghost-house/Ghosts" 10 | import { House } from "../components/ghost-house/House" 11 | import { Fog } from "three" 12 | 13 | function Scene() { 14 | const { gl, scene } = useThree() 15 | gl.setClearColor("#262837") 16 | const fog = new Fog("#262837", 1, 15) 17 | scene.fog = fog 18 | 19 | return ( 20 | <> 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default function GhostHouse() { 34 | return ( 35 | 36 | 37 | Ghost House - Three.js Journey to R3F 38 | 39 | 40 | 41 | 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | -------------------------------------------------------------------------------- /pages/github-2020-v2.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { useControls, Leva } from "leva" 5 | import { Suspense } from "react" 6 | import { useGLTF, Loader } from "@react-three/drei" 7 | import { OrbitControls } from "@react-three/drei" 8 | 9 | function Scene() { 10 | const three = useThree() 11 | const { scene } = useGLTF("/models/fnick851-github-2020.glb") 12 | scene.scale.set(0.05, 0.05, 0.05) 13 | scene.rotation.set(-Math.PI * 0.5, 0, 0) 14 | three.scene.add(scene) 15 | 16 | const { 17 | ambient_light_color, 18 | ambient_light_intensity, 19 | point_light_color, 20 | point_light_intensity, 21 | spot_light_color, 22 | spot_light_intensity, 23 | } = useControls({ 24 | ambient_light_color: "blue", 25 | ambient_light_intensity: 0.1, 26 | point_light_color: "hotpink", 27 | point_light_intensity: 0.2, 28 | spot_light_color: "gold", 29 | spot_light_intensity: 1, 30 | }) 31 | 32 | return ( 33 | <> 34 | 35 | 41 | 47 | 48 | 49 | ) 50 | } 51 | 52 | export default function Github2020V2() { 53 | return ( 54 | 55 | 56 | Github 2020 V2 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | ) 68 | } 69 | -------------------------------------------------------------------------------- /pages/github-2020.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { useControls, Leva } from "leva" 5 | import { useFrame } from "react-three-fiber" 6 | import { Suspense, useRef } from "react" 7 | import { useGLTF, Loader } from "@react-three/drei" 8 | import { OrbitControls } from "@react-three/drei" 9 | 10 | function Scene() { 11 | const gltf = useGLTF("/models/fnick851-github-2020.glb") 12 | const { nodes } = gltf 13 | 14 | const { 15 | mat_color, 16 | ambient_light_color, 17 | ambient_light_intensity, 18 | point_light_color, 19 | point_light_intensity, 20 | spot_light_color, 21 | spot_light_intensity, 22 | } = useControls({ 23 | mat_color: { r: 200, b: 125, g: 125, a: 0.5 }, 24 | ambient_light_color: "#ff0000", 25 | ambient_light_intensity: 0.1, 26 | point_light_color: "#b9d400", 27 | point_light_intensity: 1, 28 | spot_light_color: "#6495ed", 29 | spot_light_intensity: 3, 30 | }) 31 | const rot_x = 1.3 32 | const rot_y = 3.1 33 | const rot_z = 2 34 | const scaleFactor = 0.02 35 | 36 | const meshRef = useRef(null) 37 | 38 | useFrame(() => { 39 | const mesh = meshRef.current 40 | if (mesh) mesh.rotation.z += 0.01 41 | }) 42 | 43 | return ( 44 | <> 45 | 52 | 57 | 58 | 59 | 64 | 69 | 70 | 71 | ) 72 | } 73 | 74 | export default function Github2020() { 75 | return ( 76 | 77 | 78 | Github 2020 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ) 90 | } 91 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { useRef, useState } from "react" 3 | import { Canvas, MeshProps, useFrame } from "react-three-fiber" 4 | import { Mesh } from "three" 5 | import { Layout } from "../components/Layout" 6 | import { OrbitControls } from "@react-three/drei" 7 | import { Texts } from "../components/Texts" 8 | import { useBodyPointerCursor } from "../hooks/useBodyPointerCursor" 9 | 10 | function ClickableBox(props: MeshProps) { 11 | const meshRef = useRef() 12 | 13 | const [hovered, setHover] = useState(false) 14 | const [active, setActive] = useState(false) 15 | 16 | useBodyPointerCursor(hovered) 17 | 18 | useFrame(() => { 19 | const mesh = meshRef.current 20 | if (mesh) mesh.rotation.x = mesh.rotation.y += 0.01 21 | }) 22 | 23 | return ( 24 | setActive(!active)} 29 | onPointerOver={() => setHover(true)} 30 | onPointerOut={() => setHover(false)} 31 | > 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | export default function Home() { 39 | return ( 40 | 41 | 42 | Home 43 | 44 | 45 | 46 | 47 |

welcome :)

48 |
49 |

50 | please click upper left corner to open menu. 51 |

52 |
53 | 54 |
55 |

drag with left mouse button to rotate,

56 |

drag with right mouse button to pan,

57 |

drag with middle mouse button, or scroll, to zoom,

58 |

some objects are clickable too.

59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | ) 71 | } 72 | -------------------------------------------------------------------------------- /pages/labels.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useGLTF } from "@react-three/drei" 5 | import { MutableRefObject, Suspense, useEffect, useRef } from "react" 6 | import { 7 | CubeTextureLoader, 8 | Raycaster, 9 | ReinhardToneMapping, 10 | sRGBEncoding, 11 | Vector3, 12 | } from "three" 13 | 14 | function Scene(props: { labels: MutableRefObject[] }) { 15 | const { scene, gl: renderer, camera, size } = useThree() 16 | renderer.physicallyCorrectLights = true 17 | renderer.outputEncoding = sRGBEncoding 18 | renderer.toneMappingExposure = 3 19 | renderer.toneMapping = ReinhardToneMapping 20 | 21 | const cubeTextureLoader = new CubeTextureLoader() 22 | const environmentMap = cubeTextureLoader.load([ 23 | "/textures/environmentMaps/sky/nx.jpg", 24 | "/textures/environmentMaps/sky/ny.jpg", 25 | "/textures/environmentMaps/sky/nz.jpg", 26 | "/textures/environmentMaps/sky/px.jpg", 27 | "/textures/environmentMaps/sky/py.jpg", 28 | "/textures/environmentMaps/sky/pz.jpg", 29 | ]) 30 | environmentMap.encoding = sRGBEncoding 31 | scene.background = environmentMap 32 | scene.environment = environmentMap 33 | 34 | const { scene: helmetModel } = useGLTF( 35 | "/models/DamagedHelmet/glTF/DamagedHelmet.gltf" 36 | ) 37 | helmetModel.scale.set(2.5, 2.5, 2.5) 38 | helmetModel.rotation.y = Math.PI * 0.5 39 | scene.add(helmetModel) 40 | 41 | const directionalLightRef = useRef(null) 42 | useEffect(() => { 43 | const directionalLight = directionalLightRef.current 44 | if (directionalLight) { 45 | directionalLight.shadow.camera.far = 15 46 | directionalLight.shadow.mapSize.set(1024, 1024) 47 | directionalLight.shadow.normalBias = 0.05 48 | } 49 | }) 50 | 51 | const raycaster = new Raycaster() 52 | let points = [] 53 | const { labels } = props 54 | const [label1, label2, label3] = labels 55 | if (label1.current && label1.current && label1.current) { 56 | points = [ 57 | { 58 | position: new Vector3(1.55, 0.3, -0.6), 59 | element: label1.current, 60 | }, 61 | { 62 | position: new Vector3(0.5, 0.8, -1.6), 63 | element: label2.current, 64 | }, 65 | { 66 | position: new Vector3(1.6, -1.3, -0.7), 67 | element: label3.current, 68 | }, 69 | ] 70 | } 71 | 72 | useFrame(() => { 73 | for (const point of points) { 74 | const screenPosition = point.position.clone() 75 | screenPosition.project(camera) 76 | 77 | raycaster.setFromCamera(screenPosition, camera) 78 | const intersects = raycaster.intersectObjects(scene.children, true) 79 | 80 | if (intersects.length === 0) { 81 | point.element.firstChild.classList.add("scale-100") 82 | } else { 83 | const intersectionDistance = intersects[0].distance 84 | const pointDistance = point.position.distanceTo(camera.position) 85 | 86 | if (intersectionDistance < pointDistance) { 87 | point.element.firstChild.classList.remove("scale-100") 88 | } else { 89 | point.element.firstChild.classList.add("scale-100") 90 | } 91 | } 92 | 93 | const translateX = screenPosition.x * size.width * 0.5 94 | const translateY = -screenPosition.y * size.height * 0.5 95 | point.element.style.transform = `translateX(${translateX}px) translateY(${translateY}px)` 96 | } 97 | }) 98 | 99 | return ( 100 | <> 101 | 106 | 107 | 108 | ) 109 | } 110 | 111 | export default function Labels() { 112 | const labelsConfig = [ 113 | { 114 | ref: useRef(null), 115 | text: "Front and top screen with HUD aggregating terrain and battle informations.", 116 | }, 117 | { 118 | ref: useRef(null), 119 | text: "Ventilation with air purifier and detection of environment toxicity.", 120 | }, 121 | { 122 | ref: useRef(null), 123 | text: "Cameras supporting night vision and heat vision with automatic adjustment.", 124 | }, 125 | ] 126 | 127 | return ( 128 | 129 | 130 | Labels - Three.js Journey to R3F 131 | 132 | 133 | 138 | 139 | item.ref)} /> 140 | 141 | 142 | {labelsConfig.map(({ ref, text }, index) => ( 143 |
144 |
145 | {index} 146 |
147 |
148 | {text} 149 |
150 |
151 | ))} 152 | 153 | ) 154 | } 155 | -------------------------------------------------------------------------------- /pages/leva.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { useControls } from "leva" 5 | import { OrbitControls } from "@react-three/drei" 6 | import { Texts } from "../components/Texts" 7 | 8 | function Scene() { 9 | const { text, width, height, depth, color } = useControls({ 10 | text: "say something...", 11 | width: 1, 12 | height: 1, 13 | depth: 1, 14 | color: { r: 200, b: 125, g: 125, a: 0.5 }, 15 | }) 16 | 17 | return ( 18 | <> 19 | 20 | 21 | 26 | 27 | 28 |

{text}

29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default function Leva() { 36 | return ( 37 | 38 | 39 | Leva 40 | 41 | 42 | 43 | 44 | 45 | 46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /pages/lights.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useHelper } from "@react-three/drei" 5 | import { 6 | DirectionalLightHelper, 7 | DoubleSide, 8 | HemisphereLightHelper, 9 | MeshStandardMaterial, 10 | PointLightHelper, 11 | SpotLightHelper, 12 | Vector3, 13 | } from "three" 14 | import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js" 15 | import { useEffect, useRef } from "react" 16 | 17 | function Scene() { 18 | const { scene } = useThree() 19 | 20 | const hemisphereLightRef = useRef(null) 21 | useHelper(hemisphereLightRef, HemisphereLightHelper, 0.2) 22 | 23 | const directionalLightRef = useRef(null) 24 | useHelper(directionalLightRef, DirectionalLightHelper, 0.2) 25 | 26 | const pointLightRef = useRef(null) 27 | useHelper(pointLightRef, PointLightHelper, 0.2) 28 | 29 | const rectAreaLightRef = useRef(null) 30 | useEffect(() => { 31 | const light = rectAreaLightRef.current 32 | if (light) { 33 | light.lookAt(new Vector3()) 34 | const rectAreaLightHelper = new RectAreaLightHelper(light) 35 | light.add(rectAreaLightHelper) 36 | } 37 | }) 38 | 39 | const spotLightRef = useRef(null) 40 | useEffect(() => { 41 | const light = spotLightRef.current 42 | if (light) { 43 | const spotLightTarget = light.target 44 | spotLightTarget.position.x = 0.5 45 | scene.add(spotLightTarget) 46 | } 47 | }) 48 | useHelper(spotLightRef, SpotLightHelper) 49 | 50 | const material = new MeshStandardMaterial() 51 | material.roughness = 0.4 52 | 53 | const sphereRef = useRef(null) 54 | const cubeRef = useRef(null) 55 | const torusRef = useRef(null) 56 | useFrame((state) => { 57 | const elapsedTime = state.clock.getElapsedTime() 58 | const sphere = sphereRef.current 59 | const cube = cubeRef.current 60 | const torus = torusRef.current 61 | 62 | if (sphere && cube && torus) { 63 | sphere.rotation.y = 0.1 * elapsedTime 64 | cube.rotation.y = 0.2 * elapsedTime 65 | torus.rotation.y = 0.3 * elapsedTime 66 | 67 | sphere.rotation.x = 0.2 * elapsedTime 68 | cube.rotation.x = 0.15 * elapsedTime 69 | torus.rotation.x = 0.1 * elapsedTime 70 | } 71 | }) 72 | 73 | return ( 74 | <> 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 99 | 104 | 109 | 114 | 119 | 120 | ) 121 | } 122 | 123 | export default function Lights() { 124 | return ( 125 | 126 | 127 | Lights - Three.js Journey to R3F 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | ) 136 | } 137 | -------------------------------------------------------------------------------- /pages/materials.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Layout } from "../components/Layout" 3 | import { OrbitControls } from "@react-three/drei" 4 | import { useRef } from "react" 5 | import { Canvas, useFrame } from "react-three-fiber" 6 | import { CubeTextureLoader, DoubleSide } from "three" 7 | import { useControls } from "leva" 8 | 9 | function Scene() { 10 | const { metalness, roughness } = useControls({ 11 | metalness: { 12 | value: 1, 13 | min: 0, 14 | max: 1, 15 | step: 0.01, 16 | }, 17 | roughness: { 18 | value: 0, 19 | min: 0, 20 | max: 1, 21 | step: 0.01, 22 | }, 23 | }) 24 | 25 | const cubeTextureLoader = new CubeTextureLoader() 26 | const envMapTexture = cubeTextureLoader.load([ 27 | "/textures/environmentMaps/0/px.jpg", 28 | "/textures/environmentMaps/0/nx.jpg", 29 | "/textures/environmentMaps/0/py.jpg", 30 | "/textures/environmentMaps/0/ny.jpg", 31 | "/textures/environmentMaps/0/pz.jpg", 32 | "/textures/environmentMaps/0/nz.jpg", 33 | ]) 34 | 35 | const sphereRef = useRef(null) 36 | const planeRef = useRef(null) 37 | const torusRef = useRef(null) 38 | 39 | useFrame((state) => { 40 | const elapsedTime = state.clock.getElapsedTime() 41 | const sphere = sphereRef.current 42 | const plane = planeRef.current 43 | const torus = torusRef.current 44 | 45 | if (sphere && plane && torus) { 46 | sphere.rotation.y = 0.2 * elapsedTime 47 | plane.rotation.y = 0.2 * elapsedTime 48 | torus.rotation.y = 0.2 * elapsedTime 49 | 50 | sphere.rotation.x = 0.2 * elapsedTime 51 | plane.rotation.x = 0.2 * elapsedTime 52 | torus.rotation.x = 0.2 * elapsedTime 53 | } 54 | }) 55 | 56 | return ( 57 | <> 58 | 59 | 60 | 65 | 66 | 67 | 68 | 74 | 75 | 76 | 77 | 82 | 83 | 84 | ) 85 | } 86 | 87 | export default function Materials() { 88 | return ( 89 | 90 | 91 | Materials - Three.js Journey to R3F 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | ) 102 | } 103 | -------------------------------------------------------------------------------- /pages/morphing-head.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useLoader, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useGLTF, Loader } from "@react-three/drei" 5 | import { 6 | ACESFilmicToneMapping, 7 | CubeTextureLoader, 8 | DoubleSide, 9 | Mesh, 10 | MeshDepthMaterial, 11 | MeshStandardMaterial, 12 | RGBADepthPacking, 13 | sRGBEncoding, 14 | TextureLoader, 15 | } from "three" 16 | import { Suspense, useEffect, useRef } from "react" 17 | 18 | function Scene() { 19 | const three = useThree() 20 | 21 | // env 22 | const cubeTextureLoader = new CubeTextureLoader() 23 | const envMapTexture = cubeTextureLoader.load([ 24 | "/textures/environmentMaps/3/px.jpg", 25 | "/textures/environmentMaps/3/nx.jpg", 26 | "/textures/environmentMaps/3/py.jpg", 27 | "/textures/environmentMaps/3/ny.jpg", 28 | "/textures/environmentMaps/3/pz.jpg", 29 | "/textures/environmentMaps/3/nz.jpg", 30 | ]) 31 | envMapTexture.encoding = sRGBEncoding 32 | three.scene.background = envMapTexture 33 | three.scene.environment = envMapTexture 34 | 35 | // textures 36 | const mapTexture = useLoader(TextureLoader, "/models/LeePerrySmith/color.jpg") 37 | mapTexture.encoding = sRGBEncoding 38 | const normalTexture = useLoader( 39 | TextureLoader, 40 | "/models/LeePerrySmith/normal.jpg" 41 | ) 42 | 43 | // materials 44 | const customUniforms = { 45 | uTime: { value: 0 }, 46 | } 47 | const material = new MeshStandardMaterial({ 48 | map: mapTexture, 49 | normalMap: normalTexture, 50 | }) 51 | const depthMaterial = new MeshDepthMaterial({ 52 | depthPacking: RGBADepthPacking, 53 | }) 54 | 55 | material.onBeforeCompile = (shader) => { 56 | shader.uniforms.uTime = customUniforms.uTime 57 | shader.vertexShader = shader.vertexShader.replace( 58 | /*glsl*/ `#include `, 59 | /*glsl*/ ` 60 | #include 61 | 62 | uniform float uTime; 63 | 64 | mat2 get2dRotateMatrix(float _angle) 65 | { 66 | return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle)); 67 | } 68 | ` 69 | ) 70 | shader.vertexShader = shader.vertexShader.replace( 71 | /*glsl*/ `#include `, 72 | /*glsl*/ ` 73 | #include 74 | 75 | float angle = (sin(position.y + uTime)) * 0.4; 76 | mat2 rotateMatrix = get2dRotateMatrix(angle); 77 | 78 | objectNormal.xz = rotateMatrix * objectNormal.xz; 79 | ` 80 | ) 81 | shader.vertexShader = shader.vertexShader.replace( 82 | /*glsl*/ `#include `, 83 | /*glsl*/ ` 84 | #include 85 | 86 | transformed.xz = rotateMatrix * transformed.xz; 87 | ` 88 | ) 89 | } 90 | depthMaterial.onBeforeCompile = (shader) => { 91 | shader.uniforms.uTime = customUniforms.uTime 92 | shader.vertexShader = shader.vertexShader.replace( 93 | /*glsl*/ `#include `, 94 | /*glsl*/ ` 95 | #include 96 | 97 | uniform float uTime; 98 | 99 | mat2 get2dRotateMatrix(float _angle) 100 | { 101 | return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle)); 102 | } 103 | ` 104 | ) 105 | shader.vertexShader = shader.vertexShader.replace( 106 | /*glsl*/ `#include `, 107 | /*glsl*/ ` 108 | #include 109 | 110 | float angle = (sin(position.y + uTime)) * 0.4; 111 | mat2 rotateMatrix = get2dRotateMatrix(angle); 112 | 113 | transformed.xz = rotateMatrix * transformed.xz; 114 | ` 115 | ) 116 | } 117 | 118 | const gltf = useGLTF("/models/LeePerrySmith/LeePerrySmith.glb") 119 | const mesh = gltf.scene.children[0] 120 | if (mesh) { 121 | mesh.rotation.y = Math.PI * 0.5 122 | //@ts-ignore 123 | mesh.material = material 124 | mesh.customDepthMaterial = depthMaterial 125 | } 126 | useEffect(() => { 127 | three.scene.traverse((child) => { 128 | if ( 129 | child instanceof Mesh && 130 | child.material instanceof MeshStandardMaterial 131 | ) { 132 | child.material.envMapIntensity = 5 133 | child.material.needsUpdate = true 134 | child.castShadow = true 135 | child.receiveShadow = true 136 | } 137 | }) 138 | }) 139 | 140 | three.gl.physicallyCorrectLights = true 141 | three.gl.outputEncoding = sRGBEncoding 142 | three.gl.toneMapping = ACESFilmicToneMapping 143 | three.gl.toneMappingExposure = 1 144 | 145 | useFrame((state) => { 146 | const elapsedTime = state.clock.getElapsedTime() 147 | customUniforms.uTime.value = elapsedTime 148 | }) 149 | 150 | const directionalLightRef = useRef(null) 151 | useEffect(() => { 152 | const directionalLight = directionalLightRef.current 153 | if (directionalLight) { 154 | directionalLight.shadow.mapSize.set(1024, 1024) 155 | directionalLight.shadow.camera.far = 15 156 | directionalLight.shadow.normalBias = 0.05 157 | } 158 | }) 159 | 160 | return ( 161 | <> 162 | 163 | 164 | 165 | 166 | 167 | 168 | 174 | 175 | ) 176 | } 177 | 178 | export default function MorphingHead() { 179 | return ( 180 | 181 | 182 | Morphing Head - Three.js Journey to R3F 183 | 184 | 185 | 186 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | ) 198 | } 199 | -------------------------------------------------------------------------------- /pages/particles.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useLoader, useUpdate } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, Loader } from "@react-three/drei" 5 | import { 6 | AdditiveBlending, 7 | BufferAttribute, 8 | BufferGeometry, 9 | TextureLoader, 10 | } from "three" 11 | import { Suspense } from "react" 12 | import { useControls, Leva } from "leva" 13 | 14 | function Scene() { 15 | const { particle_style } = useControls({ 16 | particle_style: { 17 | value: "8.png", 18 | options: { 19 | "1.png": "1.png", 20 | "2.png": "2.png", 21 | "3.png": "3.png", 22 | "4.png": "4.png", 23 | "5.png": "5.png", 24 | "6.png": "6.png", 25 | "7.png": "7.png", 26 | "8.png": "8.png", 27 | "9.png": "9.png", 28 | "10.png": "10.png", 29 | "11.png": "11.png", 30 | "12.png": "12.png", 31 | "13.png": "13.png", 32 | }, 33 | }, 34 | }) 35 | 36 | const particleTexture = useLoader( 37 | TextureLoader, 38 | `/textures/particles/${particle_style}` 39 | ) 40 | 41 | const count = 15000 42 | const positions = new Float32Array(count * 3) 43 | const colors = new Float32Array(count * 3) 44 | for (let i = 0; i < count * 3; i++) { 45 | positions[i] = (Math.random() - 0.5) * 10 46 | colors[i] = Math.random() 47 | } 48 | 49 | const particlesGeomRef = useUpdate((geometry: BufferGeometry) => { 50 | geometry.setAttribute("position", new BufferAttribute(positions, 3)) 51 | geometry.setAttribute("color", new BufferAttribute(colors, 3)) 52 | }, []) 53 | 54 | useFrame((state) => { 55 | const elapsedTime = state.clock.getElapsedTime() 56 | const particlesGeometry = particlesGeomRef.current 57 | if (particlesGeometry) { 58 | const geomPos = particlesGeometry.attributes.position 59 | for (let i = 0; i < count; i++) { 60 | const x = geomPos.getX(i) 61 | geomPos.setY(i, Math.tan(elapsedTime + x)) 62 | } 63 | geomPos.needsUpdate = true 64 | } 65 | }) 66 | 67 | return ( 68 | 69 | 70 | 80 | 81 | ) 82 | } 83 | 84 | export default function Particles() { 85 | return ( 86 | 87 | 88 | Particles - Three.js Journey to R3F 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | ) 101 | } 102 | -------------------------------------------------------------------------------- /pages/performance.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useLoader } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { Suspense, useEffect, useRef } from "react" 6 | import { DoubleSide, ShaderMaterial, TextureLoader } from "three" 7 | import { Stats, Loader } from "@react-three/drei" 8 | import { useControls, Leva } from "leva" 9 | 10 | function Scene() { 11 | const { turn_on_shader_object, turn_on_standard_objects, turn_on_spotlight } = 12 | useControls({ 13 | turn_on_shader_object: true, 14 | turn_on_standard_objects: true, 15 | turn_on_spotlight: true, 16 | }) 17 | const displacementTexture = useLoader( 18 | TextureLoader, 19 | "/textures/displacementMap.png" 20 | ) 21 | 22 | const shaderMaterial = new ShaderMaterial({ 23 | precision: "lowp", 24 | uniforms: { 25 | uDisplacementTexture: { value: displacementTexture }, 26 | }, 27 | defines: { 28 | DISPLACMENT_STRENGH: 1.5, 29 | }, 30 | vertexShader: /* glsl */ ` 31 | uniform sampler2D uDisplacementTexture; 32 | 33 | varying vec3 vColor; 34 | 35 | void main() 36 | { 37 | // Position 38 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 39 | float elevation = texture2D(uDisplacementTexture, uv).r; 40 | modelPosition.y += max(elevation, 0.5) * DISPLACMENT_STRENGH; 41 | gl_Position = projectionMatrix * viewMatrix * modelPosition; 42 | 43 | // Color 44 | float colorElevation = max(elevation, 0.25); 45 | vec3 color = mix(vec3(1.0, 0.1, 0.1), vec3(0.1, 0.0, 0.5), colorElevation); 46 | 47 | // Varying 48 | vColor = color; 49 | } 50 | `, 51 | fragmentShader: /* glsl */ ` 52 | varying vec3 vColor; 53 | 54 | void main() 55 | { 56 | gl_FragColor = vec4(vColor, 1.0); 57 | } 58 | `, 59 | }) 60 | 61 | const node = useRef(document.createElement("div")) 62 | useEffect(() => { 63 | node.current.classList.add("fixed", "bottom-1", "right-1", "flex") 64 | document.body.appendChild(node.current) 65 | 66 | return () => { 67 | document.body.removeChild(node.current) 68 | } 69 | }, []) 70 | 71 | return ( 72 | <> 73 | {[0, 1, 2].map((num, index) => ( 74 | 80 | ))} 81 | {turn_on_standard_objects ? ( 82 | <> 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 101 | 102 | 103 | 104 | 105 | ) : null} 106 | {turn_on_shader_object ? ( 107 | 112 | 113 | 114 | ) : null} 115 | {turn_on_spotlight ? ( 116 | 117 | ) : null} 118 | 119 | ) 120 | } 121 | 122 | export default function Performance() { 123 | return ( 124 | 125 | 126 | Performance - Three.js Journey to R3F 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | ) 140 | } 141 | -------------------------------------------------------------------------------- /pages/post-processing.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, Loader } from "@react-three/drei" 5 | import { Suspense } from "react" 6 | import { Leva } from "leva" 7 | import { PostEffects } from "../components/post-processing/PostEffects" 8 | import { Scene } from "../components/post-processing/Scene" 9 | 10 | export default function PostProcessing() { 11 | return ( 12 | 13 | 14 | Post Processing - Three.js Journey to R3F 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /pages/raycaster.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, MeshProps, useFrame } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useHelper } from "@react-three/drei" 5 | import { useMemo, useRef, useState } from "react" 6 | import { useBodyPointerCursor } from "../hooks/useBodyPointerCursor" 7 | import { SpotLightHelper } from "three" 8 | 9 | function Ball(props: MeshProps) { 10 | const [hovered, setHover] = useState(false) 11 | const [active, setActive] = useState(false) 12 | 13 | useBodyPointerCursor(hovered) 14 | 15 | const ballRef = useRef(null) 16 | const rate = useMemo(() => Math.random() + 0.5, []) 17 | useFrame((state) => { 18 | const elapsedTime = state.clock.getElapsedTime() 19 | const ball = ballRef.current 20 | 21 | if (ball) { 22 | ball.position.y = Math.sin(elapsedTime * rate) 23 | } 24 | }) 25 | 26 | return ( 27 | setActive(!active)} 31 | scale={ 32 | active 33 | ? [5 * Math.random(), 5 * Math.random(), 5 * Math.random()] 34 | : [1, 1, 1] 35 | } 36 | onPointerOver={() => setHover(true)} 37 | onPointerOut={() => setHover(false)} 38 | > 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | function Scene() { 46 | const ballPosX = [-2, 0, 2] 47 | 48 | const spotLightRef = useRef(null) 49 | useHelper(spotLightRef, SpotLightHelper) 50 | 51 | return ( 52 | <> 53 | {" "} 54 | {ballPosX.map((posX, index) => ( 55 | 56 | ))} 57 | 58 | 59 | 60 | 61 | ) 62 | } 63 | 64 | export default function Raycaster() { 65 | return ( 66 | 67 | 68 | Raycaster - Three.js Journey to R3F 69 | 70 | 71 | 72 | 73 | 74 | 75 | ) 76 | } 77 | -------------------------------------------------------------------------------- /pages/realistic-helmet.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useGLTF, Loader } from "@react-three/drei" 5 | import { 6 | ACESFilmicToneMapping, 7 | CineonToneMapping, 8 | CubeTextureLoader, 9 | LinearToneMapping, 10 | Mesh, 11 | MeshStandardMaterial, 12 | NoToneMapping, 13 | ReinhardToneMapping, 14 | sRGBEncoding, 15 | } from "three" 16 | import { Suspense, useEffect, useRef } from "react" 17 | import { useControls, Leva } from "leva" 18 | 19 | function Scene() { 20 | const { 21 | toneMapping, 22 | toneMappingExposure, 23 | rotation, 24 | envMapIntensity, 25 | directionalLightIntensity, 26 | directionalLightPos_X, 27 | directionalLightPos_Y, 28 | directionalLightPos_Z, 29 | } = useControls({ 30 | toneMapping: { 31 | value: ReinhardToneMapping, 32 | options: { 33 | No: NoToneMapping, 34 | Linear: LinearToneMapping, 35 | Reinhard: ReinhardToneMapping, 36 | Cineon: CineonToneMapping, 37 | ACESFilmic: ACESFilmicToneMapping, 38 | }, 39 | }, 40 | toneMappingExposure: { 41 | value: 3, 42 | min: 0, 43 | max: 10, 44 | step: 0.001, 45 | }, 46 | rotation: { 47 | value: Math.PI * 0.5, 48 | min: -Math.PI, 49 | max: Math.PI, 50 | step: 0.001, 51 | }, 52 | envMapIntensity: { 53 | value: 5, 54 | min: 0, 55 | max: 20, 56 | step: 0.001, 57 | }, 58 | directionalLightIntensity: { 59 | value: 3, 60 | min: 0, 61 | max: 10, 62 | step: 0.001, 63 | }, 64 | directionalLightPos_X: { 65 | value: 0.25, 66 | min: -5, 67 | max: 5, 68 | step: 0.001, 69 | }, 70 | directionalLightPos_Y: { 71 | value: 3, 72 | min: -5, 73 | max: 5, 74 | step: 0.001, 75 | }, 76 | directionalLightPos_Z: { 77 | value: -2.25, 78 | min: -5, 79 | max: 5, 80 | step: 0.001, 81 | }, 82 | }) 83 | 84 | const cubeTextureLoader = new CubeTextureLoader() 85 | const envMapTexture = cubeTextureLoader.load([ 86 | "/textures/environmentMaps/1/px.jpg", 87 | "/textures/environmentMaps/1/nx.jpg", 88 | "/textures/environmentMaps/1/py.jpg", 89 | "/textures/environmentMaps/1/ny.jpg", 90 | "/textures/environmentMaps/1/pz.jpg", 91 | "/textures/environmentMaps/1/nz.jpg", 92 | ]) 93 | envMapTexture.encoding = sRGBEncoding 94 | 95 | const three = useThree() 96 | three.scene.background = envMapTexture 97 | three.scene.environment = envMapTexture 98 | three.scene.traverse((child) => { 99 | if ( 100 | child instanceof Mesh && 101 | child.material instanceof MeshStandardMaterial 102 | ) { 103 | child.material.envMapIntensity = envMapIntensity 104 | child.material.needsUpdate = true 105 | child.castShadow = true 106 | child.receiveShadow = true 107 | } 108 | }) 109 | 110 | three.gl.physicallyCorrectLights = true 111 | three.gl.outputEncoding = sRGBEncoding 112 | three.gl.toneMapping = toneMapping 113 | three.gl.toneMappingExposure = toneMappingExposure 114 | 115 | const { scene } = useGLTF("/models/FlightHelmet/glTF/FlightHelmet.gltf") 116 | scene.scale.set(10, 10, 10) 117 | scene.position.set(0, -4, 0) 118 | scene.rotation.y = rotation 119 | three.scene.add(scene) 120 | 121 | const directionalLightRef = useRef(null) 122 | useEffect(() => { 123 | const directionalLight = directionalLightRef.current 124 | if (directionalLight) { 125 | directionalLight.shadow.camera.far = 15 126 | directionalLight.shadow.mapSize.set(1024, 1024) 127 | directionalLight.shadow.normalBias = 0.05 128 | } 129 | }) 130 | 131 | return ( 132 | 142 | ) 143 | } 144 | 145 | export default function RealisticHelmet() { 146 | return ( 147 | 148 | 149 | Realistic Helmet - Three.js Journey to R3F 150 | 151 | 152 | 153 | 154 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | ) 167 | } 168 | -------------------------------------------------------------------------------- /pages/shader-flag.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useLoader } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, Loader } from "@react-three/drei" 5 | import { 6 | BufferAttribute, 7 | Color, 8 | DoubleSide, 9 | PlaneGeometry, 10 | ShaderMaterial, 11 | TextureLoader, 12 | Vector2, 13 | } from "three" 14 | import { Suspense } from "react" 15 | 16 | const vertexShader = /*glsl*/ ` 17 | uniform vec2 uFrequency; 18 | uniform float uTime; 19 | 20 | varying vec2 vUv; 21 | varying float vElevation; 22 | 23 | void main() 24 | { 25 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 26 | 27 | float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1; 28 | elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1; 29 | 30 | modelPosition.z += elevation; 31 | 32 | vec4 viewPosition = viewMatrix * modelPosition; 33 | vec4 projectedPosition = projectionMatrix * viewPosition; 34 | 35 | gl_Position = projectedPosition; 36 | 37 | vUv = uv; 38 | vElevation = elevation; 39 | } 40 | ` 41 | 42 | const fragmentShader = /*glsl*/ ` 43 | uniform vec3 uColor; 44 | uniform sampler2D uTexture; 45 | 46 | varying vec2 vUv; 47 | varying float vElevation; 48 | 49 | void main() 50 | { 51 | vec4 textureColor = texture2D(uTexture, vUv); 52 | textureColor.rgb *= vElevation * 2.0 + 0.65; 53 | gl_FragColor = textureColor; 54 | } 55 | ` 56 | 57 | function Scene() { 58 | const flagTexture = useLoader(TextureLoader, "/textures/flag-mgs.jpg") 59 | 60 | const sizeFactor = 2 61 | const geometry = new PlaneGeometry( 62 | 1.92 * sizeFactor, 63 | 1.08 * sizeFactor, 64 | 64, 65 | 64 66 | ) 67 | const count = geometry.attributes.position.count 68 | const randoms = new Float32Array(count) 69 | for (let i = 0; i < count; i++) { 70 | randoms[i] = Math.random() 71 | } 72 | geometry.setAttribute("aRandom", new BufferAttribute(randoms, 1)) 73 | 74 | const uniforms = { 75 | uFrequency: { value: new Vector2(2, 2) }, 76 | uTime: { value: 0 }, 77 | uColor: { value: new Color("orange") }, 78 | uTexture: { value: flagTexture }, 79 | } 80 | 81 | const material = new ShaderMaterial({ 82 | vertexShader: vertexShader, 83 | fragmentShader: fragmentShader, 84 | side: DoubleSide, 85 | uniforms, 86 | }) 87 | 88 | useFrame((state) => { 89 | const elapsedTime = state.clock.getElapsedTime() 90 | material.uniforms.uTime.value = elapsedTime 91 | }) 92 | 93 | return 94 | } 95 | 96 | export default function ShaderFlag() { 97 | return ( 98 | 99 | 100 | Shader Flag - Three.js Journey to R3F 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | ) 112 | } 113 | -------------------------------------------------------------------------------- /pages/shader-galaxy.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { 6 | AdditiveBlending, 7 | BufferAttribute, 8 | BufferGeometry, 9 | Color, 10 | ShaderMaterial, 11 | } from "three" 12 | import { useControls, Leva } from "leva" 13 | import { vertexShader } from "../components/shader-galaxy/vertex.glsl" 14 | import { fragmentShader } from "../components/shader-galaxy/fragment.glsl" 15 | 16 | function Scene() { 17 | const { 18 | count, 19 | radius, 20 | branches, 21 | randomness, 22 | randomnessPower, 23 | insideColor, 24 | outsideColor, 25 | starStyle, 26 | } = useControls({ 27 | count: { value: 200000, step: 100, min: 100, max: 1000000 }, 28 | radius: { value: 5, step: 0.01, min: 0.01, max: 20 }, 29 | branches: { value: 3, step: 1, min: 2, max: 20 }, 30 | randomness: { value: 0.2, step: 0.001, min: 0, max: 2 }, 31 | randomnessPower: { value: 3, step: 0.001, min: 1, max: 10 }, 32 | insideColor: "#ff6030", 33 | outsideColor: "#1b3984", 34 | starStyle: { 35 | value: 2, 36 | options: { 37 | disc: 0, 38 | diffuse_point: 1, 39 | light_point: 2, 40 | }, 41 | }, 42 | }) 43 | 44 | const geometry = new BufferGeometry() 45 | 46 | const positionsArr = new Float32Array(count * 3) 47 | const randomnessArr = new Float32Array(count * 3) 48 | const colorsArr = new Float32Array(count * 3) 49 | const scalesArr = new Float32Array(count * 1) 50 | const inColor = new Color(insideColor) 51 | const outColor = new Color(outsideColor) 52 | for (let i = 0; i < count; i++) { 53 | const i3 = i * 3 54 | 55 | // Position 56 | const r = Math.random() * radius 57 | const branchAngle = ((i % branches) / branches) * Math.PI * 2 58 | const randomX = 59 | Math.pow(Math.random(), randomnessPower) * 60 | (Math.random() < 0.5 ? 1 : -1) * 61 | randomness * 62 | r 63 | const randomY = 64 | Math.pow(Math.random(), randomnessPower) * 65 | (Math.random() < 0.5 ? 1 : -1) * 66 | randomness * 67 | r 68 | const randomZ = 69 | Math.pow(Math.random(), randomnessPower) * 70 | (Math.random() < 0.5 ? 1 : -1) * 71 | randomness * 72 | r 73 | positionsArr[i3] = Math.cos(branchAngle) * r 74 | positionsArr[i3 + 1] = 0 75 | positionsArr[i3 + 2] = Math.sin(branchAngle) * r 76 | randomnessArr[i3] = randomX 77 | randomnessArr[i3 + 1] = randomY 78 | randomnessArr[i3 + 2] = randomZ 79 | 80 | // Color 81 | const mixedColor = inColor.clone() 82 | mixedColor.lerp(outColor, r / radius) 83 | colorsArr[i3] = mixedColor.r 84 | colorsArr[i3 + 1] = mixedColor.g 85 | colorsArr[i3 + 2] = mixedColor.b 86 | 87 | // Scale 88 | scalesArr[i] = Math.random() 89 | } 90 | 91 | geometry.setAttribute("position", new BufferAttribute(positionsArr, 3)) 92 | geometry.setAttribute("aRandomness", new BufferAttribute(randomnessArr, 3)) 93 | geometry.setAttribute("color", new BufferAttribute(colorsArr, 3)) 94 | geometry.setAttribute("aScale", new BufferAttribute(scalesArr, 1)) 95 | 96 | const { gl } = useThree() 97 | const material = new ShaderMaterial({ 98 | depthWrite: false, 99 | blending: AdditiveBlending, 100 | vertexColors: true, 101 | uniforms: { 102 | uTime: { value: 0 }, 103 | uSize: { value: 30 * gl.getPixelRatio() }, 104 | }, 105 | vertexShader, 106 | fragmentShader: fragmentShader(starStyle), 107 | }) 108 | 109 | useFrame((state) => { 110 | const elapsedTime = state.clock.getElapsedTime() 111 | material.uniforms.uTime.value = elapsedTime 112 | }) 113 | 114 | return 115 | } 116 | 117 | export default function ShaderGalaxy() { 118 | return ( 119 | 120 | 121 | Shader Galaxy - Three.js Journey to R3F 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | ) 131 | } 132 | -------------------------------------------------------------------------------- /pages/shader-patterns.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { DoubleSide, ShaderMaterial } from "three" 6 | import { vertexShader } from "../components/shader-patterns/vertex.glsl" 7 | import { fragmentShader } from "../components/shader-patterns/fragment.glsl" 8 | import { useControls } from "leva" 9 | 10 | export default function ShaderPatterns() { 11 | const { pattern, monochromic } = useControls({ 12 | pattern: { 13 | value: 0, 14 | step: 1, 15 | min: 0, 16 | max: 49, 17 | }, 18 | monochromic: { value: false, render: (get) => get("pattern") > 1 }, 19 | }) 20 | 21 | const frag = fragmentShader(pattern, monochromic) 22 | const material = new ShaderMaterial({ 23 | vertexShader, 24 | fragmentShader: frag, 25 | side: DoubleSide, 26 | }) 27 | 28 | return ( 29 | 30 | 31 | Shader Patterns - Three.js Journey to R3F 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /pages/shader-water.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { Color, DoubleSide, ShaderMaterial, Vector2 } from "three" 6 | import { useControls, Leva } from "leva" 7 | import { vertexShader } from "../components/shader-water/vertex.glsl" 8 | import { fragmentShader } from "../components/shader-water/fragment.glsl" 9 | 10 | function Scene() { 11 | const { 12 | uDepthColor, 13 | uSurfaceColor, 14 | uColorOffset, 15 | uColorMultiplier, 16 | 17 | uBigWavesElevation, 18 | uBigWavesFrequencyX, 19 | uBigWavesFrequencyY, 20 | uBigWavesSpeed, 21 | 22 | uSmallWavesElevation, 23 | uSmallWavesFrequency, 24 | uSmallWavesSpeed, 25 | uSmallIterations, 26 | } = useControls({ 27 | uDepthColor: "#186691", 28 | uSurfaceColor: "#9bd8ff", 29 | uColorOffset: { 30 | value: 0.08, 31 | step: 0.001, 32 | min: 0, 33 | max: 1, 34 | }, 35 | uColorMultiplier: { value: 5, step: 0.01, min: 0, max: 10 }, 36 | 37 | uBigWavesElevation: { value: 0.2, step: 0.001, min: 0, max: 1 }, 38 | uBigWavesFrequencyX: { value: 4, step: 0.01, min: 0, max: 10 }, 39 | uBigWavesFrequencyY: { value: 1.5, step: 0.01, min: 0, max: 10 }, 40 | uBigWavesSpeed: { value: 0.75, step: 0.005, min: 0, max: 4 }, 41 | 42 | uSmallWavesElevation: { value: 0.15, step: 0.001, min: 0, max: 1 }, 43 | uSmallWavesFrequency: { value: 3, step: 0.1, min: 0, max: 30 }, 44 | uSmallWavesSpeed: { value: 0.2, step: 0.005, min: 0, max: 4 }, 45 | uSmallIterations: { value: 4, step: 0.005, min: 0, max: 5 }, 46 | }) 47 | 48 | const material = new ShaderMaterial({ 49 | vertexShader, 50 | fragmentShader, 51 | side: DoubleSide, 52 | uniforms: { 53 | uTime: { value: 0 }, 54 | 55 | uDepthColor: { value: new Color(uDepthColor) }, 56 | uSurfaceColor: { value: new Color(uSurfaceColor) }, 57 | uColorOffset: { value: uColorOffset }, 58 | uColorMultiplier: { value: uColorMultiplier }, 59 | 60 | uBigWavesElevation: { value: uBigWavesElevation }, 61 | uBigWavesFrequency: { 62 | value: new Vector2(uBigWavesFrequencyX, uBigWavesFrequencyY), 63 | }, 64 | uBigWavesSpeed: { value: uBigWavesSpeed }, 65 | 66 | uSmallWavesElevation: { value: uSmallWavesElevation }, 67 | uSmallWavesFrequency: { value: uSmallWavesFrequency }, 68 | uSmallWavesSpeed: { value: uSmallWavesSpeed }, 69 | uSmallIterations: { value: uSmallIterations }, 70 | }, 71 | }) 72 | 73 | useFrame((state) => { 74 | const elapsedTime = state.clock.getElapsedTime() 75 | material.uniforms.uTime.value = elapsedTime 76 | }) 77 | 78 | return ( 79 | 80 | 81 | 82 | ) 83 | } 84 | 85 | export default function ShaderWater() { 86 | return ( 87 | 88 | 89 | Shader Water - Three.js Journey to R3F 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | ) 99 | } 100 | -------------------------------------------------------------------------------- /pages/shadows.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useFrame, useLoader, useThree } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls, useHelper, Loader } from "@react-three/drei" 5 | import { useControls, Leva } from "leva" 6 | import { CameraHelper, DoubleSide, SpotLightHelper, TextureLoader } from "three" 7 | import { Suspense, useEffect, useRef } from "react" 8 | 9 | function Scene() { 10 | const { ambient_intensity, directional_intensity, directional_position } = 11 | useControls({ 12 | ambient_intensity: 0.1, 13 | directional_intensity: 0.1, 14 | directional_position: [3, 2, 1], 15 | }) 16 | 17 | const simpleShadow = useLoader( 18 | TextureLoader, 19 | "/textures/shadow/simpleShadow.jpg" 20 | ) 21 | 22 | const { scene } = useThree() 23 | const directionalLightRef = useRef(null) 24 | useEffect(() => { 25 | const light = directionalLightRef.current 26 | if (light) { 27 | light.shadow.mapSize.width = 1024 28 | light.shadow.mapSize.height = 1024 29 | light.shadow.camera.near = 1 30 | light.shadow.camera.far = 6 31 | light.shadow.camera.top = 2 32 | light.shadow.camera.right = 2 33 | light.shadow.camera.bottom = -2 34 | light.shadow.camera.left = -2 35 | 36 | const directionalLightCameraHelper = new CameraHelper(light.shadow.camera) 37 | directionalLightCameraHelper.visible = true 38 | scene.add(directionalLightCameraHelper) 39 | } 40 | }) 41 | 42 | const spotLightRef = useRef(null) 43 | useEffect(() => { 44 | const light = spotLightRef.current 45 | if (light) { 46 | light.shadow.mapSize.width = 1024 47 | light.shadow.mapSize.height = 1024 48 | light.shadow.camera.near = 1 49 | light.shadow.camera.far = 6 50 | light.shadow.camera.fov = 30 51 | scene.add(light.target) 52 | } 53 | }) 54 | useHelper(spotLightRef, SpotLightHelper) 55 | 56 | const pointLightRef = useRef(null) 57 | useEffect(() => { 58 | const light = pointLightRef.current 59 | if (light) { 60 | light.shadow.mapSize.width = 1024 61 | light.shadow.mapSize.height = 1024 62 | light.shadow.camera.near = 0.1 63 | light.shadow.camera.far = 5 64 | 65 | const pointLightCameraHelper = new CameraHelper(light.shadow.camera) 66 | pointLightCameraHelper.visible = true 67 | scene.add(pointLightCameraHelper) 68 | } 69 | }) 70 | 71 | const sphereRef = useRef(null) 72 | const sphereShadowRef = useRef(null) 73 | useFrame((state) => { 74 | const elapsedTime = state.clock.getElapsedTime() 75 | const sphere = sphereRef.current 76 | const sphereShadow = sphereShadowRef.current 77 | 78 | if (sphere && sphereShadow) { 79 | sphere.position.x = Math.cos(elapsedTime) * 1.5 80 | sphere.position.z = Math.sin(elapsedTime) * 1.5 81 | sphere.position.y = Math.abs(Math.sin(elapsedTime * 3)) 82 | 83 | sphereShadow.position.x = sphere.position.x 84 | sphereShadow.position.z = sphere.position.z 85 | sphereShadow.material.opacity = 1 - Math.abs(sphere.position.y) 86 | } 87 | }) 88 | 89 | const planePosY = -0.5 90 | return ( 91 | <> 92 | 93 | 94 | 95 | 96 | 101 | 102 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 120 | 126 | 132 | 133 | ) 134 | } 135 | 136 | export default function Shadows() { 137 | return ( 138 | 139 | 140 | Shadows - Three.js Journey to R3F 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | ) 153 | } 154 | -------------------------------------------------------------------------------- /pages/simple-physics.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { OrbitControls } from "@react-three/drei" 5 | import { CubeTextureLoader } from "three" 6 | import { Physics, usePlane, useBox, useSphere } from "@react-three/cannon" 7 | import { useState } from "react" 8 | 9 | let environmentMapTexture 10 | let playHitSound 11 | if (typeof window !== "undefined") { 12 | const cubeTextureLoader = new CubeTextureLoader() 13 | environmentMapTexture = cubeTextureLoader.load([ 14 | "/textures/environmentMaps/simple-physics/px.png", 15 | "/textures/environmentMaps/simple-physics/nx.png", 16 | "/textures/environmentMaps/simple-physics/py.png", 17 | "/textures/environmentMaps/simple-physics/ny.png", 18 | "/textures/environmentMaps/simple-physics/pz.png", 19 | "/textures/environmentMaps/simple-physics/nz.png", 20 | ]) 21 | 22 | const hitSound = new Audio("/sounds/hit.mp3") 23 | playHitSound = (collision) => { 24 | const impactStrength = collision.contact.impactVelocity 25 | if (impactStrength > 1.5) { 26 | hitSound.volume = Math.random() 27 | hitSound.currentTime = 0 28 | hitSound.play() 29 | } 30 | } 31 | } 32 | 33 | function Ball(props) { 34 | const [ref] = useSphere(() => ({ 35 | mass: 1, 36 | position: [0, 9, 0], 37 | onCollide: (collision) => { 38 | playHitSound(collision) 39 | }, 40 | ...props, 41 | })) 42 | 43 | return ( 44 | 45 | 46 | 51 | 52 | ) 53 | } 54 | 55 | function Box(props) { 56 | const [ref] = useBox(() => ({ 57 | mass: 1, 58 | position: [0, 8, 0], 59 | rotation: [0.4, 0.2, 0.5], 60 | onCollide: (collision) => { 61 | playHitSound(collision) 62 | }, 63 | ...props, 64 | })) 65 | 66 | return ( 67 | 68 | 69 | 74 | 75 | ) 76 | } 77 | 78 | function Floor(props) { 79 | const [ref] = usePlane(() => ({ rotation: [-Math.PI * 0.5, 0, 0], ...props })) 80 | 81 | return ( 82 | <> 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | ) 93 | } 94 | 95 | function Scene({ nBox, nBall }) { 96 | let boxes = [] 97 | for (let i = 0; i < nBox; i++) boxes.push() 98 | 99 | let balls = [] 100 | for (let i = 0; i < nBall; i++) balls.push() 101 | 102 | return ( 103 | <> 104 | 105 | {boxes} 106 | {balls} 107 | 108 | 109 | 110 | ) 111 | } 112 | 113 | export default function SimplePhysics() { 114 | const [nBox, setNBox] = useState(1) 115 | const [nBall, setNBall] = useState(0) 116 | 117 | return ( 118 | 119 | 120 | Simple Physics - Three.js Journey to R3F 121 | 122 | 123 | 128 | 129 | 130 | 131 | 138 | 139 | 140 |
141 | 147 | 153 |
154 | 155 | ) 156 | } 157 | -------------------------------------------------------------------------------- /pages/textures.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { Canvas, useLoader } from "react-three-fiber" 3 | import { Layout } from "../components/Layout" 4 | import { NearestFilter, TextureLoader } from "three" 5 | import { Suspense } from "react" 6 | import { OrbitControls, Loader } from "@react-three/drei" 7 | 8 | const textureImgs = [ 9 | "/textures/minecraft.png", 10 | "/textures/checkerboard-8x8.png", 11 | "/textures/checkerboard-1024x1024.png", 12 | ] 13 | 14 | function Scene() { 15 | const textures = textureImgs.map((img) => { 16 | const texture = useLoader(TextureLoader, img) 17 | texture.generateMipmaps = false 18 | texture.minFilter = NearestFilter 19 | texture.magFilter = NearestFilter 20 | return texture 21 | }) 22 | 23 | return ( 24 | <> 25 | {textures.map((texture, i) => ( 26 | 27 | 28 | 29 | 30 | ))} 31 | 32 | 33 | ) 34 | } 35 | 36 | export default function Textures() { 37 | return ( 38 | 39 | 40 | Textures - Three.js Journey to R3F 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | -------------------------------------------------------------------------------- /pages/transform.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | import { useMemo } from "react" 3 | import { Canvas } from "react-three-fiber" 4 | import { BoxBufferGeometry, MeshBasicMaterial } from "three" 5 | import { Layout } from "../components/Layout" 6 | import { OrbitControls } from "@react-three/drei" 7 | 8 | export default function Transform() { 9 | const boxPositions = [-1.5, 0, 1.5] 10 | const geo = useMemo(() => new BoxBufferGeometry(1, 1, 1), []) 11 | const mat = useMemo(() => new MeshBasicMaterial({ color: 0x0d5dcb }), []) 12 | const boxMeshes = boxPositions.map((pos, i) => ( 13 | 14 | )) 15 | 16 | return ( 17 | 18 | 19 | Transform - Three.js Journey to R3F 20 | 21 | 22 | 23 | 24 | 25 | {boxMeshes} 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | "tailwindcss", 4 | "postcss-flexbugs-fixes", 5 | [ 6 | "postcss-preset-env", 7 | { 8 | autoprefixer: { 9 | flexbox: "no-2009", 10 | }, 11 | stage: 3, 12 | features: { 13 | "custom-properties": false, 14 | }, 15 | }, 16 | ], 17 | ], 18 | } 19 | -------------------------------------------------------------------------------- /public/images/favicon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/images/favicon-logo.png -------------------------------------------------------------------------------- /public/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/images/favicon.ico -------------------------------------------------------------------------------- /public/models/DamagedHelmet/README.md: -------------------------------------------------------------------------------- 1 | # Damaged Helmet 2 | 3 | ## Screenshot 4 | 5 | ![screenshot](screenshot/screenshot.png) 6 | 7 | ## License Information 8 | 9 | Battle Damaged Sci-fi Helmet - PBR by [theblueturtle_](https://sketchfab.com/theblueturtle_), published under a Creative Commons Attribution-NonCommercial license 10 | 11 | https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4 12 | 13 | ## Modifications 14 | 15 | The original model was built on an early draft of glTF 2.0 that did not become final. This new model has been imported and re-exported from Blender to bring it into alignment with the final release glTF 2.0 specification. 16 | -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/DamagedHelmet.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/DamagedHelmet.bin -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/DamagedHelmet.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "componentType" : 5123, 6 | "count" : 46356, 7 | "max" : [ 8 | 14555 9 | ], 10 | "min" : [ 11 | 0 12 | ], 13 | "type" : "SCALAR" 14 | }, 15 | { 16 | "bufferView" : 1, 17 | "componentType" : 5126, 18 | "count" : 14556, 19 | "max" : [ 20 | 0.9424954056739807, 21 | 0.8128451108932495, 22 | 0.900973916053772 23 | ], 24 | "min" : [ 25 | -0.9474585652351379, 26 | -1.18715500831604, 27 | -0.9009949564933777 28 | ], 29 | "type" : "VEC3" 30 | }, 31 | { 32 | "bufferView" : 2, 33 | "componentType" : 5126, 34 | "count" : 14556, 35 | "max" : [ 36 | 1.0, 37 | 1.0, 38 | 1.0 39 | ], 40 | "min" : [ 41 | -1.0, 42 | -1.0, 43 | -1.0 44 | ], 45 | "type" : "VEC3" 46 | }, 47 | { 48 | "bufferView" : 3, 49 | "componentType" : 5126, 50 | "count" : 14556, 51 | "max" : [ 52 | 0.9999759793281555, 53 | 1.998665988445282 54 | ], 55 | "min" : [ 56 | 0.002448640065267682, 57 | 1.0005531199858524 58 | ], 59 | "type" : "VEC2" 60 | } 61 | ], 62 | "asset" : { 63 | "generator" : "Khronos Blender glTF 2.0 exporter", 64 | "version" : "2.0" 65 | }, 66 | "bufferViews" : [ 67 | { 68 | "buffer" : 0, 69 | "byteLength" : 92712, 70 | "byteOffset" : 0, 71 | "target" : 34963 72 | }, 73 | { 74 | "buffer" : 0, 75 | "byteLength" : 174672, 76 | "byteOffset" : 92712, 77 | "target" : 34962 78 | }, 79 | { 80 | "buffer" : 0, 81 | "byteLength" : 174672, 82 | "byteOffset" : 267384, 83 | "target" : 34962 84 | }, 85 | { 86 | "buffer" : 0, 87 | "byteLength" : 116448, 88 | "byteOffset" : 442056, 89 | "target" : 34962 90 | } 91 | ], 92 | "buffers" : [ 93 | { 94 | "byteLength" : 558504, 95 | "uri" : "DamagedHelmet.bin" 96 | } 97 | ], 98 | "images" : [ 99 | { 100 | "uri" : "Default_albedo.jpg" 101 | }, 102 | { 103 | "uri" : "Default_metalRoughness.jpg" 104 | }, 105 | { 106 | "uri" : "Default_emissive.jpg" 107 | }, 108 | { 109 | "uri" : "Default_AO.jpg" 110 | }, 111 | { 112 | "uri" : "Default_normal.jpg" 113 | } 114 | ], 115 | "materials" : [ 116 | { 117 | "emissiveFactor" : [ 118 | 1.0, 119 | 1.0, 120 | 1.0 121 | ], 122 | "emissiveTexture" : { 123 | "index" : 2 124 | }, 125 | "name" : "Material_MR", 126 | "normalTexture" : { 127 | "index" : 4 128 | }, 129 | "occlusionTexture" : { 130 | "index" : 3 131 | }, 132 | "pbrMetallicRoughness" : { 133 | "baseColorTexture" : { 134 | "index" : 0 135 | }, 136 | "metallicRoughnessTexture" : { 137 | "index" : 1 138 | } 139 | } 140 | } 141 | ], 142 | "meshes" : [ 143 | { 144 | "name" : "mesh_helmet_LP_13930damagedHelmet", 145 | "primitives" : [ 146 | { 147 | "attributes" : { 148 | "NORMAL" : 2, 149 | "POSITION" : 1, 150 | "TEXCOORD_0" : 3 151 | }, 152 | "indices" : 0, 153 | "material" : 0 154 | } 155 | ] 156 | } 157 | ], 158 | "nodes" : [ 159 | { 160 | "mesh" : 0, 161 | "name" : "node_damagedHelmet_-6514", 162 | "rotation" : [ 163 | 0.7071068286895752, 164 | 0.0, 165 | -0.0, 166 | 0.7071068286895752 167 | ] 168 | } 169 | ], 170 | "samplers" : [ 171 | {} 172 | ], 173 | "scene" : 0, 174 | "scenes" : [ 175 | { 176 | "name" : "Scene", 177 | "nodes" : [ 178 | 0 179 | ] 180 | } 181 | ], 182 | "textures" : [ 183 | { 184 | "sampler" : 0, 185 | "source" : 0 186 | }, 187 | { 188 | "sampler" : 0, 189 | "source" : 1 190 | }, 191 | { 192 | "sampler" : 0, 193 | "source" : 2 194 | }, 195 | { 196 | "sampler" : 0, 197 | "source" : 3 198 | }, 199 | { 200 | "sampler" : 0, 201 | "source" : 4 202 | } 203 | ] 204 | } 205 | -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/Default_AO.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/Default_AO.jpg -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/Default_albedo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/Default_albedo.jpg -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/Default_emissive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/Default_emissive.jpg -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/Default_metalRoughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/Default_metalRoughness.jpg -------------------------------------------------------------------------------- /public/models/DamagedHelmet/glTF/Default_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/DamagedHelmet/glTF/Default_normal.jpg -------------------------------------------------------------------------------- /public/models/Duck/README.md: -------------------------------------------------------------------------------- 1 | # Duck 2 | ## Screenshot 3 | 4 | ![screenshot](screenshot/screenshot.png) 5 | 6 | ## License Information 7 | 8 | Copyright 2006 Sony Computer Entertainment Inc. 9 | 10 | Licensed under the SCEA Shared Source License, Version 1.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: 11 | 12 | http://research.scea.com/scea_shared_source_license.html 13 | 14 | Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -------------------------------------------------------------------------------- /public/models/Duck/glTF-Binary/Duck.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF-Binary/Duck.glb -------------------------------------------------------------------------------- /public/models/Duck/glTF-Draco/0.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF-Draco/0.bin -------------------------------------------------------------------------------- /public/models/Duck/glTF-Draco/Duck.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF-Draco/Duck.bin -------------------------------------------------------------------------------- /public/models/Duck/glTF-Draco/Duck.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "generator": "COLLADA2GLTF", 4 | "version": "2.0" 5 | }, 6 | "scene": 0, 7 | "scenes": [ 8 | { 9 | "nodes": [ 10 | 0 11 | ] 12 | } 13 | ], 14 | "nodes": [ 15 | { 16 | "children": [ 17 | 2, 18 | 1 19 | ], 20 | "matrix": [ 21 | 0.009999999776482582, 22 | 0, 23 | 0, 24 | 0, 25 | 0, 26 | 0.009999999776482582, 27 | 0, 28 | 0, 29 | 0, 30 | 0, 31 | 0.009999999776482582, 32 | 0, 33 | 0, 34 | 0, 35 | 0, 36 | 1 37 | ] 38 | }, 39 | { 40 | "matrix": [ 41 | -0.7289686799049377, 42 | 0, 43 | -0.6845470666885376, 44 | 0, 45 | -0.4252049028873444, 46 | 0.7836934328079224, 47 | 0.4527972936630249, 48 | 0, 49 | 0.5364750623703003, 50 | 0.6211478114128113, 51 | -0.571287989616394, 52 | 0, 53 | 400.1130065917969, 54 | 463.2640075683594, 55 | -431.0780334472656, 56 | 1 57 | ], 58 | "camera": 0 59 | }, 60 | { 61 | "mesh": 0 62 | } 63 | ], 64 | "cameras": [ 65 | { 66 | "perspective": { 67 | "aspectRatio": 1.5, 68 | "yfov": 0.6605925559997559, 69 | "zfar": 10000, 70 | "znear": 1 71 | }, 72 | "type": "perspective" 73 | } 74 | ], 75 | "meshes": [ 76 | { 77 | "primitives": [ 78 | { 79 | "attributes": { 80 | "NORMAL": 1, 81 | "POSITION": 2, 82 | "TEXCOORD_0": 3 83 | }, 84 | "indices": 0, 85 | "mode": 4, 86 | "material": 0, 87 | "extensions": { 88 | "KHR_draco_mesh_compression": { 89 | "bufferView": 0, 90 | "attributes": { 91 | "NORMAL": 0, 92 | "POSITION": 1, 93 | "TEXCOORD_0": 2 94 | } 95 | } 96 | } 97 | } 98 | ], 99 | "name": "LOD3spShape" 100 | } 101 | ], 102 | "accessors": [ 103 | { 104 | "componentType": 5123, 105 | "count": 12636, 106 | "max": [ 107 | 2398 108 | ], 109 | "min": [ 110 | 0 111 | ], 112 | "type": "SCALAR" 113 | }, 114 | { 115 | "componentType": 5126, 116 | "count": 2399, 117 | "max": [ 118 | 1.0083384775647932, 119 | 1.007422473383885, 120 | 1.0075904988775068 121 | ], 122 | "min": [ 123 | -1.0069254898557476, 124 | -1.0078414940366558, 125 | -1.007673468543034 126 | ], 127 | "type": "VEC3" 128 | }, 129 | { 130 | "componentType": 5126, 131 | "count": 2399, 132 | "max": [ 133 | 96.26074059602396, 134 | 164.09024489374352, 135 | 54.029730459044615 136 | ], 137 | "min": [ 138 | -69.37933953401223, 139 | 9.848530453475558, 140 | -61.40903695222513 141 | ], 142 | "type": "VEC3" 143 | }, 144 | { 145 | "componentType": 5126, 146 | "count": 2399, 147 | "max": [ 148 | 0.9846059706495423, 149 | 0.9809754626608782 150 | ], 151 | "min": [ 152 | 0.025470511450678954, 153 | 0.019024537339121947 154 | ], 155 | "type": "VEC2" 156 | } 157 | ], 158 | "materials": [ 159 | { 160 | "pbrMetallicRoughness": { 161 | "baseColorTexture": { 162 | "index": 0, 163 | "texCoord": 0 164 | }, 165 | "metallicFactor": 0, 166 | "baseColorFactor": [ 167 | 1, 168 | 1, 169 | 1, 170 | 1 171 | ], 172 | "roughnessFactor": 1 173 | }, 174 | "emissiveFactor": [ 175 | 0, 176 | 0, 177 | 0 178 | ], 179 | "name": "blinn3-fx", 180 | "alphaMode": "OPAQUE", 181 | "doubleSided": false 182 | } 183 | ], 184 | "textures": [ 185 | { 186 | "sampler": 0, 187 | "source": 0 188 | } 189 | ], 190 | "images": [ 191 | { 192 | "name": "DuckCM", 193 | "uri": "DuckCM.png" 194 | } 195 | ], 196 | "samplers": [ 197 | { 198 | "magFilter": 9729, 199 | "minFilter": 9986, 200 | "wrapS": 10497, 201 | "wrapT": 10497 202 | } 203 | ], 204 | "bufferViews": [ 205 | { 206 | "buffer": 0, 207 | "byteOffset": 0, 208 | "byteLength": 10366 209 | } 210 | ], 211 | "buffers": [ 212 | { 213 | "name": "Duck", 214 | "byteLength": 10368, 215 | "uri": "Duck.bin" 216 | } 217 | ], 218 | "extensionsRequired": [ 219 | "KHR_draco_mesh_compression" 220 | ], 221 | "extensionsUsed": [ 222 | "KHR_draco_mesh_compression" 223 | ] 224 | } 225 | -------------------------------------------------------------------------------- /public/models/Duck/glTF-Draco/DuckCM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF-Draco/DuckCM.png -------------------------------------------------------------------------------- /public/models/Duck/glTF/Duck.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "generator": "COLLADA2GLTF", 4 | "version": "2.0" 5 | }, 6 | "scene": 0, 7 | "scenes": [ 8 | { 9 | "nodes": [ 10 | 0 11 | ] 12 | } 13 | ], 14 | "nodes": [ 15 | { 16 | "children": [ 17 | 2, 18 | 1 19 | ], 20 | "matrix": [ 21 | 0.009999999776482582, 22 | 0.0, 23 | 0.0, 24 | 0.0, 25 | 0.0, 26 | 0.009999999776482582, 27 | 0.0, 28 | 0.0, 29 | 0.0, 30 | 0.0, 31 | 0.009999999776482582, 32 | 0.0, 33 | 0.0, 34 | 0.0, 35 | 0.0, 36 | 1.0 37 | ] 38 | }, 39 | { 40 | "matrix": [ 41 | -0.7289686799049377, 42 | 0.0, 43 | -0.6845470666885376, 44 | 0.0, 45 | -0.4252049028873444, 46 | 0.7836934328079224, 47 | 0.4527972936630249, 48 | 0.0, 49 | 0.5364750623703003, 50 | 0.6211478114128113, 51 | -0.571287989616394, 52 | 0.0, 53 | 400.1130065917969, 54 | 463.2640075683594, 55 | -431.0780334472656, 56 | 1.0 57 | ], 58 | "camera": 0 59 | }, 60 | { 61 | "mesh": 0 62 | } 63 | ], 64 | "cameras": [ 65 | { 66 | "perspective": { 67 | "aspectRatio": 1.5, 68 | "yfov": 0.6605925559997559, 69 | "zfar": 10000.0, 70 | "znear": 1.0 71 | }, 72 | "type": "perspective" 73 | } 74 | ], 75 | "meshes": [ 76 | { 77 | "primitives": [ 78 | { 79 | "attributes": { 80 | "NORMAL": 1, 81 | "POSITION": 2, 82 | "TEXCOORD_0": 3 83 | }, 84 | "indices": 0, 85 | "mode": 4, 86 | "material": 0 87 | } 88 | ], 89 | "name": "LOD3spShape" 90 | } 91 | ], 92 | "accessors": [ 93 | { 94 | "bufferView": 0, 95 | "byteOffset": 0, 96 | "componentType": 5123, 97 | "count": 12636, 98 | "max": [ 99 | 2398 100 | ], 101 | "min": [ 102 | 0 103 | ], 104 | "type": "SCALAR" 105 | }, 106 | { 107 | "bufferView": 1, 108 | "byteOffset": 0, 109 | "componentType": 5126, 110 | "count": 2399, 111 | "max": [ 112 | 0.9995989799499512, 113 | 0.999580979347229, 114 | 0.9984359741210938 115 | ], 116 | "min": [ 117 | -0.9990839958190918, 118 | -1.0, 119 | -0.9998319745063782 120 | ], 121 | "type": "VEC3" 122 | }, 123 | { 124 | "bufferView": 1, 125 | "byteOffset": 28788, 126 | "componentType": 5126, 127 | "count": 2399, 128 | "max": [ 129 | 96.17990112304688, 130 | 163.97000122070313, 131 | 53.92519760131836 132 | ], 133 | "min": [ 134 | -69.29850006103516, 135 | 9.929369926452637, 136 | -61.32819747924805 137 | ], 138 | "type": "VEC3" 139 | }, 140 | { 141 | "bufferView": 2, 142 | "byteOffset": 0, 143 | "componentType": 5126, 144 | "count": 2399, 145 | "max": [ 146 | 0.9833459854125976, 147 | 0.9800369739532472 148 | ], 149 | "min": [ 150 | 0.026409000158309938, 151 | 0.01996302604675293 152 | ], 153 | "type": "VEC2" 154 | } 155 | ], 156 | "materials": [ 157 | { 158 | "pbrMetallicRoughness": { 159 | "baseColorTexture": { 160 | "index": 0 161 | }, 162 | "metallicFactor": 0.0 163 | }, 164 | "emissiveFactor": [ 165 | 0.0, 166 | 0.0, 167 | 0.0 168 | ], 169 | "name": "blinn3-fx" 170 | } 171 | ], 172 | "textures": [ 173 | { 174 | "sampler": 0, 175 | "source": 0 176 | } 177 | ], 178 | "images": [ 179 | { 180 | "uri": "DuckCM.png" 181 | } 182 | ], 183 | "samplers": [ 184 | { 185 | "magFilter": 9729, 186 | "minFilter": 9986, 187 | "wrapS": 10497, 188 | "wrapT": 10497 189 | } 190 | ], 191 | "bufferViews": [ 192 | { 193 | "buffer": 0, 194 | "byteOffset": 76768, 195 | "byteLength": 25272, 196 | "target": 34963 197 | }, 198 | { 199 | "buffer": 0, 200 | "byteOffset": 0, 201 | "byteLength": 57576, 202 | "byteStride": 12, 203 | "target": 34962 204 | }, 205 | { 206 | "buffer": 0, 207 | "byteOffset": 57576, 208 | "byteLength": 19192, 209 | "byteStride": 8, 210 | "target": 34962 211 | } 212 | ], 213 | "buffers": [ 214 | { 215 | "byteLength": 102040, 216 | "uri": "Duck0.bin" 217 | } 218 | ] 219 | } 220 | -------------------------------------------------------------------------------- /public/models/Duck/glTF/Duck0.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF/Duck0.bin -------------------------------------------------------------------------------- /public/models/Duck/glTF/DuckCM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/glTF/DuckCM.png -------------------------------------------------------------------------------- /public/models/Duck/screenshot/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Duck/screenshot/screenshot.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/README.md: -------------------------------------------------------------------------------- 1 | # Flight Helmet 2 | 3 | ## Screenshot 4 | 5 | ![screenshot](screenshot/screenshot.jpg) 6 | 7 | ## License Information 8 | 9 | Donated by Microsoft for glTF testing 10 | 11 | [![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/) 12 | To the extent possible under law, Microsoft has waived all copyright and related or neighboring rights to this asset. 13 | -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet.bin -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "version": "2.0", 4 | "generator": "babylon.js glTF exporter for Maya 2018 v20200228.3 (with minor hand modifications)" 5 | }, 6 | "scene": 0, 7 | "scenes": [ 8 | { 9 | "nodes": [ 10 | 0, 11 | 1, 12 | 2, 13 | 3, 14 | 4, 15 | 5 16 | ] 17 | } 18 | ], 19 | "nodes": [ 20 | { 21 | "mesh": 0, 22 | "name": "Hose_low" 23 | }, 24 | { 25 | "mesh": 1, 26 | "name": "RubberWood_low" 27 | }, 28 | { 29 | "mesh": 2, 30 | "name": "GlassPlastic_low" 31 | }, 32 | { 33 | "mesh": 3, 34 | "name": "MetalParts_low" 35 | }, 36 | { 37 | "mesh": 4, 38 | "name": "LeatherParts_low" 39 | }, 40 | { 41 | "mesh": 5, 42 | "name": "Lenses_low" 43 | } 44 | ], 45 | "meshes": [ 46 | { 47 | "primitives": [ 48 | { 49 | "attributes": { 50 | "POSITION": 1, 51 | "TANGENT": 2, 52 | "NORMAL": 3, 53 | "TEXCOORD_0": 4 54 | }, 55 | "indices": 0, 56 | "material": 0 57 | } 58 | ], 59 | "name": "Hose_low" 60 | }, 61 | { 62 | "primitives": [ 63 | { 64 | "attributes": { 65 | "POSITION": 6, 66 | "TANGENT": 7, 67 | "NORMAL": 8, 68 | "TEXCOORD_0": 9 69 | }, 70 | "indices": 5, 71 | "material": 1 72 | } 73 | ], 74 | "name": "RubberWood_low" 75 | }, 76 | { 77 | "primitives": [ 78 | { 79 | "attributes": { 80 | "POSITION": 11, 81 | "TANGENT": 12, 82 | "NORMAL": 13, 83 | "TEXCOORD_0": 14 84 | }, 85 | "indices": 10, 86 | "material": 2 87 | } 88 | ], 89 | "name": "GlassPlastic_low" 90 | }, 91 | { 92 | "primitives": [ 93 | { 94 | "attributes": { 95 | "POSITION": 16, 96 | "TANGENT": 17, 97 | "NORMAL": 18, 98 | "TEXCOORD_0": 19 99 | }, 100 | "indices": 15, 101 | "material": 3 102 | } 103 | ], 104 | "name": "MetalParts_low" 105 | }, 106 | { 107 | "primitives": [ 108 | { 109 | "attributes": { 110 | "POSITION": 21, 111 | "TANGENT": 22, 112 | "NORMAL": 23, 113 | "TEXCOORD_0": 24 114 | }, 115 | "indices": 20, 116 | "material": 4 117 | } 118 | ], 119 | "name": "LeatherParts_low" 120 | }, 121 | { 122 | "primitives": [ 123 | { 124 | "attributes": { 125 | "POSITION": 26, 126 | "TANGENT": 27, 127 | "NORMAL": 28, 128 | "TEXCOORD_0": 29 129 | }, 130 | "indices": 25, 131 | "material": 5 132 | } 133 | ], 134 | "name": "Lenses_low" 135 | } 136 | ], 137 | "accessors": [ 138 | { 139 | "bufferView": 0, 140 | "componentType": 5123, 141 | "count": 59040, 142 | "type": "SCALAR", 143 | "name": "accessorIndices" 144 | }, 145 | { 146 | "bufferView": 1, 147 | "componentType": 5126, 148 | "count": 10472, 149 | "max": [ 150 | 0.10810829, 151 | 0.356580257, 152 | 0.190409869 153 | ], 154 | "min": [ 155 | -0.07221258, 156 | 0.104120225, 157 | -0.088394776 158 | ], 159 | "type": "VEC3", 160 | "name": "accessorPositions" 161 | }, 162 | { 163 | "bufferView": 2, 164 | "componentType": 5126, 165 | "count": 10472, 166 | "type": "VEC4", 167 | "name": "accessorTangents" 168 | }, 169 | { 170 | "bufferView": 1, 171 | "byteOffset": 125664, 172 | "componentType": 5126, 173 | "count": 10472, 174 | "type": "VEC3", 175 | "name": "accessorNormals" 176 | }, 177 | { 178 | "bufferView": 3, 179 | "componentType": 5126, 180 | "count": 10472, 181 | "type": "VEC2", 182 | "name": "accessorUVs" 183 | }, 184 | { 185 | "bufferView": 0, 186 | "byteOffset": 118080, 187 | "componentType": 5123, 188 | "count": 72534, 189 | "type": "SCALAR", 190 | "name": "accessorIndices" 191 | }, 192 | { 193 | "bufferView": 1, 194 | "byteOffset": 251328, 195 | "componentType": 5126, 196 | "count": 13638, 197 | "max": [ 198 | 0.162940636, 199 | 0.7025226, 200 | 0.200029165 201 | ], 202 | "min": [ 203 | -0.158857465, 204 | -2.14242937E-05, 205 | -0.171545789 206 | ], 207 | "type": "VEC3", 208 | "name": "accessorPositions" 209 | }, 210 | { 211 | "bufferView": 2, 212 | "byteOffset": 167552, 213 | "componentType": 5126, 214 | "count": 13638, 215 | "type": "VEC4", 216 | "name": "accessorTangents" 217 | }, 218 | { 219 | "bufferView": 1, 220 | "byteOffset": 414984, 221 | "componentType": 5126, 222 | "count": 13638, 223 | "type": "VEC3", 224 | "name": "accessorNormals" 225 | }, 226 | { 227 | "bufferView": 3, 228 | "byteOffset": 83776, 229 | "componentType": 5126, 230 | "count": 13638, 231 | "type": "VEC2", 232 | "name": "accessorUVs" 233 | }, 234 | { 235 | "bufferView": 0, 236 | "byteOffset": 263148, 237 | "componentType": 5123, 238 | "count": 24408, 239 | "type": "SCALAR", 240 | "name": "accessorIndices" 241 | }, 242 | { 243 | "bufferView": 1, 244 | "byteOffset": 578640, 245 | "componentType": 5126, 246 | "count": 4676, 247 | "max": [ 248 | 0.140494063, 249 | 0.61828655, 250 | 0.147373646 251 | ], 252 | "min": [ 253 | -0.140846014, 254 | 0.440957, 255 | -0.107818365 256 | ], 257 | "type": "VEC3", 258 | "name": "accessorPositions" 259 | }, 260 | { 261 | "bufferView": 2, 262 | "byteOffset": 385760, 263 | "componentType": 5126, 264 | "count": 4676, 265 | "type": "VEC4", 266 | "name": "accessorTangents" 267 | }, 268 | { 269 | "bufferView": 1, 270 | "byteOffset": 634752, 271 | "componentType": 5126, 272 | "count": 4676, 273 | "type": "VEC3", 274 | "name": "accessorNormals" 275 | }, 276 | { 277 | "bufferView": 3, 278 | "byteOffset": 192880, 279 | "componentType": 5126, 280 | "count": 4676, 281 | "type": "VEC2", 282 | "name": "accessorUVs" 283 | }, 284 | { 285 | "bufferView": 0, 286 | "byteOffset": 311964, 287 | "componentType": 5123, 288 | "count": 60288, 289 | "type": "SCALAR", 290 | "name": "accessorIndices" 291 | }, 292 | { 293 | "bufferView": 1, 294 | "byteOffset": 690864, 295 | "componentType": 5126, 296 | "count": 13636, 297 | "max": [ 298 | 0.132708371, 299 | 0.6024364, 300 | 0.199477077 301 | ], 302 | "min": [ 303 | -0.203642711, 304 | 0.02116075, 305 | -0.147512689 306 | ], 307 | "type": "VEC3", 308 | "name": "accessorPositions" 309 | }, 310 | { 311 | "bufferView": 2, 312 | "byteOffset": 460576, 313 | "componentType": 5126, 314 | "count": 13636, 315 | "type": "VEC4", 316 | "name": "accessorTangents" 317 | }, 318 | { 319 | "bufferView": 1, 320 | "byteOffset": 854496, 321 | "componentType": 5126, 322 | "count": 13636, 323 | "type": "VEC3", 324 | "name": "accessorNormals" 325 | }, 326 | { 327 | "bufferView": 3, 328 | "byteOffset": 230288, 329 | "componentType": 5126, 330 | "count": 13636, 331 | "type": "VEC2", 332 | "name": "accessorUVs" 333 | }, 334 | { 335 | "bufferView": 0, 336 | "byteOffset": 432540, 337 | "componentType": 5123, 338 | "count": 65688, 339 | "type": "SCALAR", 340 | "name": "accessorIndices" 341 | }, 342 | { 343 | "bufferView": 1, 344 | "byteOffset": 1018128, 345 | "componentType": 5126, 346 | "count": 12534, 347 | "max": [ 348 | 0.124933377, 349 | 0.716000438, 350 | 0.129168555 351 | ], 352 | "min": [ 353 | -0.125863016, 354 | 0.2958266, 355 | -0.1541516 356 | ], 357 | "type": "VEC3", 358 | "name": "accessorPositions" 359 | }, 360 | { 361 | "bufferView": 2, 362 | "byteOffset": 678752, 363 | "componentType": 5126, 364 | "count": 12534, 365 | "type": "VEC4", 366 | "name": "accessorTangents" 367 | }, 368 | { 369 | "bufferView": 1, 370 | "byteOffset": 1168536, 371 | "componentType": 5126, 372 | "count": 12534, 373 | "type": "VEC3", 374 | "name": "accessorNormals" 375 | }, 376 | { 377 | "bufferView": 3, 378 | "byteOffset": 339376, 379 | "componentType": 5126, 380 | "count": 12534, 381 | "type": "VEC2", 382 | "name": "accessorUVs" 383 | }, 384 | { 385 | "bufferView": 0, 386 | "byteOffset": 563916, 387 | "componentType": 5123, 388 | "count": 2208, 389 | "type": "SCALAR", 390 | "name": "accessorIndices" 391 | }, 392 | { 393 | "bufferView": 1, 394 | "byteOffset": 1318944, 395 | "componentType": 5126, 396 | "count": 436, 397 | "max": [ 398 | 0.101920746, 399 | 0.5936986, 400 | 0.152926728 401 | ], 402 | "min": [ 403 | -0.101920947, 404 | 0.5300429, 405 | 0.090174824 406 | ], 407 | "type": "VEC3", 408 | "name": "accessorPositions" 409 | }, 410 | { 411 | "bufferView": 2, 412 | "byteOffset": 879296, 413 | "componentType": 5126, 414 | "count": 436, 415 | "type": "VEC4", 416 | "name": "accessorTangents" 417 | }, 418 | { 419 | "bufferView": 1, 420 | "byteOffset": 1324176, 421 | "componentType": 5126, 422 | "count": 436, 423 | "type": "VEC3", 424 | "name": "accessorNormals" 425 | }, 426 | { 427 | "bufferView": 3, 428 | "byteOffset": 439648, 429 | "componentType": 5126, 430 | "count": 436, 431 | "type": "VEC2", 432 | "name": "accessorUVs" 433 | } 434 | ], 435 | "bufferViews": [ 436 | { 437 | "buffer": 0, 438 | "byteLength": 568332, 439 | "name": "bufferViewScalar" 440 | }, 441 | { 442 | "buffer": 0, 443 | "byteOffset": 568332, 444 | "byteLength": 1329408, 445 | "byteStride": 12, 446 | "name": "bufferViewFloatVec3" 447 | }, 448 | { 449 | "buffer": 0, 450 | "byteOffset": 1897740, 451 | "byteLength": 886272, 452 | "byteStride": 16, 453 | "name": "bufferViewFloatVec4" 454 | }, 455 | { 456 | "buffer": 0, 457 | "byteOffset": 2784012, 458 | "byteLength": 443136, 459 | "byteStride": 8, 460 | "name": "bufferViewFloatVec2" 461 | } 462 | ], 463 | "buffers": [ 464 | { 465 | "uri": "FlightHelmet.bin", 466 | "byteLength": 3227148 467 | } 468 | ], 469 | "materials": [ 470 | { 471 | "pbrMetallicRoughness": { 472 | "baseColorTexture": { 473 | "index": 2 474 | }, 475 | "metallicRoughnessTexture": { 476 | "index": 1 477 | } 478 | }, 479 | "normalTexture": { 480 | "index": 0 481 | }, 482 | "occlusionTexture": { 483 | "index": 1 484 | }, 485 | "doubleSided": true, 486 | "name": "HoseMat" 487 | }, 488 | { 489 | "pbrMetallicRoughness": { 490 | "baseColorTexture": { 491 | "index": 2 492 | }, 493 | "metallicRoughnessTexture": { 494 | "index": 1 495 | } 496 | }, 497 | "normalTexture": { 498 | "index": 0 499 | }, 500 | "occlusionTexture": { 501 | "index": 1 502 | }, 503 | "name": "RubberWoodMat" 504 | }, 505 | { 506 | "pbrMetallicRoughness": { 507 | "baseColorTexture": { 508 | "index": 5 509 | }, 510 | "metallicRoughnessTexture": { 511 | "index": 4 512 | } 513 | }, 514 | "normalTexture": { 515 | "index": 3 516 | }, 517 | "occlusionTexture": { 518 | "index": 4 519 | }, 520 | "name": "GlassPlasticMat" 521 | }, 522 | { 523 | "pbrMetallicRoughness": { 524 | "baseColorTexture": { 525 | "index": 8 526 | }, 527 | "metallicRoughnessTexture": { 528 | "index": 7 529 | } 530 | }, 531 | "normalTexture": { 532 | "index": 6 533 | }, 534 | "occlusionTexture": { 535 | "index": 7 536 | }, 537 | "name": "MetalPartsMat" 538 | }, 539 | { 540 | "pbrMetallicRoughness": { 541 | "baseColorTexture": { 542 | "index": 11 543 | }, 544 | "metallicRoughnessTexture": { 545 | "index": 10 546 | } 547 | }, 548 | "normalTexture": { 549 | "index": 9 550 | }, 551 | "occlusionTexture": { 552 | "index": 10 553 | }, 554 | "name": "LeatherPartsMat" 555 | }, 556 | { 557 | "pbrMetallicRoughness": { 558 | "baseColorTexture": { 559 | "index": 14 560 | }, 561 | "metallicRoughnessTexture": { 562 | "index": 13 563 | } 564 | }, 565 | "normalTexture": { 566 | "index": 12 567 | }, 568 | "occlusionTexture": { 569 | "index": 13 570 | }, 571 | "alphaMode": "BLEND", 572 | "name": "LensesMat" 573 | } 574 | ], 575 | "textures": [ 576 | { 577 | "sampler": 0, 578 | "source": 0, 579 | "name": "FlightHelmet_Materials_RubberWoodMat_Normal.png" 580 | }, 581 | { 582 | "sampler": 0, 583 | "source": 1, 584 | "name": "FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png" 585 | }, 586 | { 587 | "sampler": 0, 588 | "source": 2, 589 | "name": "FlightHelmet_Materials_RubberWoodMat_BaseColor.png" 590 | }, 591 | { 592 | "sampler": 0, 593 | "source": 3, 594 | "name": "FlightHelmet_Materials_GlassPlasticMat_Normal.png" 595 | }, 596 | { 597 | "sampler": 0, 598 | "source": 4, 599 | "name": "FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png" 600 | }, 601 | { 602 | "sampler": 0, 603 | "source": 5, 604 | "name": "FlightHelmet_Materials_GlassPlasticMat_BaseColor.png" 605 | }, 606 | { 607 | "sampler": 0, 608 | "source": 6, 609 | "name": "FlightHelmet_Materials_MetalPartsMat_Normal.png" 610 | }, 611 | { 612 | "sampler": 0, 613 | "source": 7, 614 | "name": "FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png" 615 | }, 616 | { 617 | "sampler": 0, 618 | "source": 8, 619 | "name": "FlightHelmet_Materials_MetalPartsMat_BaseColor.png" 620 | }, 621 | { 622 | "sampler": 0, 623 | "source": 9, 624 | "name": "FlightHelmet_Materials_LeatherPartsMat_Normal.png" 625 | }, 626 | { 627 | "sampler": 0, 628 | "source": 10, 629 | "name": "FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png" 630 | }, 631 | { 632 | "sampler": 0, 633 | "source": 11, 634 | "name": "FlightHelmet_Materials_LeatherPartsMat_BaseColor.png" 635 | }, 636 | { 637 | "sampler": 0, 638 | "source": 12, 639 | "name": "FlightHelmet_Materials_LensesMat_Normal.png" 640 | }, 641 | { 642 | "sampler": 0, 643 | "source": 13, 644 | "name": "FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png" 645 | }, 646 | { 647 | "sampler": 0, 648 | "source": 14, 649 | "name": "FlightHelmet_Materials_LensesMat_BaseColor.png" 650 | } 651 | ], 652 | "images": [ 653 | { 654 | "uri": "FlightHelmet_Materials_RubberWoodMat_Normal.png" 655 | }, 656 | { 657 | "uri": "FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png" 658 | }, 659 | { 660 | "uri": "FlightHelmet_Materials_RubberWoodMat_BaseColor.png" 661 | }, 662 | { 663 | "uri": "FlightHelmet_Materials_GlassPlasticMat_Normal.png" 664 | }, 665 | { 666 | "uri": "FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png" 667 | }, 668 | { 669 | "uri": "FlightHelmet_Materials_GlassPlasticMat_BaseColor.png" 670 | }, 671 | { 672 | "uri": "FlightHelmet_Materials_MetalPartsMat_Normal.png" 673 | }, 674 | { 675 | "uri": "FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png" 676 | }, 677 | { 678 | "uri": "FlightHelmet_Materials_MetalPartsMat_BaseColor.png" 679 | }, 680 | { 681 | "uri": "FlightHelmet_Materials_LeatherPartsMat_Normal.png" 682 | }, 683 | { 684 | "uri": "FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png" 685 | }, 686 | { 687 | "uri": "FlightHelmet_Materials_LeatherPartsMat_BaseColor.png" 688 | }, 689 | { 690 | "uri": "FlightHelmet_Materials_LensesMat_Normal.png" 691 | }, 692 | { 693 | "uri": "FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png" 694 | }, 695 | { 696 | "uri": "FlightHelmet_Materials_LensesMat_BaseColor.png" 697 | } 698 | ], 699 | "samplers": [ 700 | { 701 | "magFilter": 9729, 702 | "minFilter": 9987 703 | } 704 | ] 705 | } 706 | -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_BaseColor.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_Normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_Normal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_BaseColor.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_Normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_Normal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_BaseColor.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_Normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_Normal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_BaseColor.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_Normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_Normal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_BaseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_BaseColor.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_Normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_Normal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/glTF/FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png -------------------------------------------------------------------------------- /public/models/FlightHelmet/screenshot/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/FlightHelmet/screenshot/screenshot.jpg -------------------------------------------------------------------------------- /public/models/Fox/README.md: -------------------------------------------------------------------------------- 1 | # Fox 2 | 3 | ## Screenshot 4 | 5 | ![screenshot](screenshot/screenshot.jpg) 6 | 7 | ## Description 8 | 9 | This model demonstrates animated rigging with three different animation cycles: Survey, Walk, and Run. These animations all drive the same joints, so for this model, only one animation should be active at any given time. glTF [specifies](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations) that the client implementation may choose when to play any of the available animations. 10 | 11 | ## License Information 12 | 13 | [CC0](https://creativecommons.org/publicdomain/zero/1.0/): Low poly fox [by PixelMannen](https://opengameart.org/content/fox-and-shiba) 14 | 15 | [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/): Rigging and animation [by @tomkranis on Sketchfab](https://sketchfab.com/models/371dea88d7e04a76af5763f2a36866bc) 16 | 17 | glTF conversion [by @AsoboStudio and @scurest](https://github.com/KhronosGroup/glTF-Sample-Models/pull/150#issuecomment-406300118) 18 | -------------------------------------------------------------------------------- /public/models/Fox/glTF-Binary/Fox.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Fox/glTF-Binary/Fox.glb -------------------------------------------------------------------------------- /public/models/Fox/glTF/Fox.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Fox/glTF/Fox.bin -------------------------------------------------------------------------------- /public/models/Fox/glTF/Texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Fox/glTF/Texture.png -------------------------------------------------------------------------------- /public/models/Fox/screenshot/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/Fox/screenshot/screenshot.jpg -------------------------------------------------------------------------------- /public/models/LeePerrySmith/LeePerrySmith.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/LeePerrySmith/LeePerrySmith.glb -------------------------------------------------------------------------------- /public/models/LeePerrySmith/LeePerrySmith_License.txt: -------------------------------------------------------------------------------- 1 | Creative Commons Licence 2 | Infinite, 3D Head Scan by Lee Perry-Smith is licensed under a Creative Commons Attribution 3.0 Unported License. 3 | Based on a work at www.triplegangers.com. 4 | File named modified by Bruno SIMON to simplify importing. 5 | Permissions beyond the scope of this license may be available at http://www.ir-ltd.net/ 6 | Please remember: Do what you want with the files, but always mention where you got them from... 7 | -------------------------------------------------------------------------------- /public/models/LeePerrySmith/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/LeePerrySmith/color.jpg -------------------------------------------------------------------------------- /public/models/LeePerrySmith/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/LeePerrySmith/normal.jpg -------------------------------------------------------------------------------- /public/models/fnick851-github-2020.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/fnick851-github-2020.glb -------------------------------------------------------------------------------- /public/models/hamburger.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/models/hamburger.glb -------------------------------------------------------------------------------- /public/sounds/hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/sounds/hit.mp3 -------------------------------------------------------------------------------- /public/textures/checkerboard-1024x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/checkerboard-1024x1024.png -------------------------------------------------------------------------------- /public/textures/checkerboard-8x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/checkerboard-8x8.png -------------------------------------------------------------------------------- /public/textures/displacementMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/displacementMap.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/nx.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/ny.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/nz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/px.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/py.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/0/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/0/pz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/nx.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/ny.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/nz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/px.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/py.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/1/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/1/pz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/nx.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/ny.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/nz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/px.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/py.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/2/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/2/pz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/nx.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/ny.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/nz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/px.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/py.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/3/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/3/pz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/nx.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/ny.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/nz.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/px.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/py.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/simple-physics/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/simple-physics/pz.png -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/nx.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/ny.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/nz.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/px.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/py.jpg -------------------------------------------------------------------------------- /public/textures/environmentMaps/sky/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/environmentMaps/sky/pz.jpg -------------------------------------------------------------------------------- /public/textures/flag-mgs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/flag-mgs.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/bricks/ambientOcclusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/bricks/ambientOcclusion.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/bricks/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/bricks/color.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/bricks/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/bricks/normal.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/bricks/roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/bricks/roughness.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/alpha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/alpha.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/ambientOcclusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/ambientOcclusion.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/color.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/height.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/height.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/metalness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/metalness.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/normal.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/door/roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/door/roughness.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/grass/ambientOcclusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/grass/ambientOcclusion.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/grass/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/grass/color.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/grass/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/grass/normal.jpg -------------------------------------------------------------------------------- /public/textures/ghost-house/grass/roughness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/ghost-house/grass/roughness.jpg -------------------------------------------------------------------------------- /public/textures/gradients/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/gradients/3.jpg -------------------------------------------------------------------------------- /public/textures/gradients/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/gradients/5.jpg -------------------------------------------------------------------------------- /public/textures/interfaceNormalMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/interfaceNormalMap.png -------------------------------------------------------------------------------- /public/textures/matcaps/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/1.png -------------------------------------------------------------------------------- /public/textures/matcaps/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/2.png -------------------------------------------------------------------------------- /public/textures/matcaps/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/3.png -------------------------------------------------------------------------------- /public/textures/matcaps/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/4.png -------------------------------------------------------------------------------- /public/textures/matcaps/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/5.png -------------------------------------------------------------------------------- /public/textures/matcaps/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/6.png -------------------------------------------------------------------------------- /public/textures/matcaps/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/7.png -------------------------------------------------------------------------------- /public/textures/matcaps/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/matcaps/8.png -------------------------------------------------------------------------------- /public/textures/minecraft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/minecraft.png -------------------------------------------------------------------------------- /public/textures/particles/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/1.png -------------------------------------------------------------------------------- /public/textures/particles/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/10.png -------------------------------------------------------------------------------- /public/textures/particles/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/11.png -------------------------------------------------------------------------------- /public/textures/particles/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/12.png -------------------------------------------------------------------------------- /public/textures/particles/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/13.png -------------------------------------------------------------------------------- /public/textures/particles/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/2.png -------------------------------------------------------------------------------- /public/textures/particles/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/3.png -------------------------------------------------------------------------------- /public/textures/particles/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/4.png -------------------------------------------------------------------------------- /public/textures/particles/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/5.png -------------------------------------------------------------------------------- /public/textures/particles/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/6.png -------------------------------------------------------------------------------- /public/textures/particles/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/7.png -------------------------------------------------------------------------------- /public/textures/particles/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/8.png -------------------------------------------------------------------------------- /public/textures/particles/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/particles/9.png -------------------------------------------------------------------------------- /public/textures/shadow/bakedShadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/shadow/bakedShadow.jpg -------------------------------------------------------------------------------- /public/textures/shadow/simpleShadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnick851/next-three-fiber/6a3a10ca3252169cf108da2b29bdf8867abcd0f2/public/textures/shadow/simpleShadow.jpg -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require("tailwindcss/defaultTheme") 2 | const plugin = require("tailwindcss/plugin") 3 | 4 | module.exports = { 5 | purge: ["./pages/**/*.tsx", "./components/**/*.tsx"], 6 | theme: { 7 | extend: { 8 | fontFamily: { 9 | sans: ["Inter var", ...defaultTheme.fontFamily.sans], 10 | }, 11 | zIndex: { 12 | 17000000: 17000000, 13 | }, 14 | borderRadius: { 15 | "50%": "50%", 16 | }, 17 | }, 18 | }, 19 | variants: { 20 | extend: {}, 21 | }, 22 | plugins: [ 23 | plugin(function ({ addUtilities }) { 24 | const newUtilities = { 25 | ".pos-unset": { 26 | position: "unset !important", 27 | }, 28 | } 29 | 30 | addUtilities(newUtilities) 31 | }), 32 | ], 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": false, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve" 16 | }, 17 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 18 | "exclude": ["node_modules"] 19 | } 20 | --------------------------------------------------------------------------------