├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── blender └── test.blend ├── index.html ├── package.json ├── public ├── box │ ├── nx.png │ ├── ny.png │ ├── nz.png │ ├── px.png │ ├── py.png │ └── pz.png ├── courtyard-transformed.glb ├── img │ ├── courtyard.jpg │ └── ship.jpg ├── ship.glb └── textures │ ├── concrete_rough_009_diffuse_xtm_05k.jpg │ ├── concrete_rough_009_normal_xtm_05k.jpg │ ├── concrete_rough_009_roughness_xtm_05k.jpg │ ├── cwSandstoneFloor-2K-1.png │ ├── cwSandstoneFloor-2K.jpg │ ├── hollow_bricks_009_diffuse_xtm_05k.jpg │ ├── hollow_bricks_009_normal_xtm_05k.jpg │ ├── hollow_bricks_009_roughness_xtm_05k.png │ ├── old_concrete_roof_001_diffuse_xtm_05k.jpg │ ├── old_concrete_roof_001_normal_xtm_05k.jpg │ ├── old_concrete_roof_001_roughness_xtm_05k.png │ ├── wood_plain_dark_013_diffuse_xtm_4k.jpg │ ├── wood_plain_dark_013_normal_xtm_4k.jpg │ └── wood_plain_dark_013_roughness_xtm_4k.png ├── sandbox.config.json ├── src ├── App.jsx ├── Courtyard.jsx ├── Home.jsx ├── ShipModel.jsx ├── Spock.jsx ├── index.jsx ├── prepare.js ├── ship.jsx └── styles.css └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json 4 | 5 | # testing 6 | /coverage 7 | 8 | # next.js 9 | /.next/ 10 | /out/ 11 | 12 | # production 13 | /build 14 | /dist 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | /.cert/ 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env* 28 | .env.local 29 | !.env.sample 30 | 31 | # vercel 32 | .vercel 33 | 34 | # next-pwa 35 | /public/workbox-*.js 36 | /public/sw.js 37 | 38 | report.*.json 39 | 40 | # .vscode Debugging 41 | .vscode/*-debug-profile 42 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 140, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": false, 7 | "quoteProps": "consistent", 8 | "jsxSingleQuote": true, 9 | "trailingComma": "es5", 10 | "bracketSpacing": true, 11 | "jsxBracketSameLine": false, 12 | "arrowParens": "avoid", 13 | "endOfLine": "lf" 14 | } 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "search.exclude": { 3 | "**/node_modules": false 4 | } 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Benjamin Miles 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web 3D Tutorial 2 | 3 | _Blender to Web3D as fast as possible_ 4 | 5 | I'M LEAVING THIS ONE HERE BUT I RECOMMEND STARTING HERE NOW: https://github.com/SuddenDevelopment/web3d 6 | 7 | ![Preview](/public/preview.png) 8 | 9 | This repo is meant to accompany a tutorial series on Youtube that starts here: https://youtu.be/1BvLpt7egss 10 | 11 | As the course advances I'll add scripts here to make some tasks easier and grow this to be a Blender to Web toolkit. 12 | 13 | Discuss here on Discord: https://discord.gg/5rTCdzpKnj 14 | 15 | ### Requirements: 16 | 17 | - [Node.js](https://nodejs.org/en/download/) 18 | - [VS Code](https://code.visualstudio.com/download) , to follow along with the tutorial 19 | - [Blender](https://www.blender.org/download/) , We are focusing on Blender to Web 20 | ### Resources: 21 | 22 | - [Flying Apartment Asset](https://www.cgtrader.com/3d-models/exterior/cityscape/cyberpunk-flying-apartment) 23 | - [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/): Three.js Renderer 24 | - [Drei](https://github.com/pmndrs/drei): React Three Fiber Helpers 25 | - [Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene): 3D Engine 26 | - [Vite](https://vitejs.dev/guide/): Static Web Server 27 | - [CodeSandbox](https://codesandbox.io/docs/configuration): Online Prototyping Container (optional) 28 | 29 | ### Installation 30 | 31 | ``` 32 | npm install 33 | ``` 34 | 35 | ### Getting Started 36 | 37 | 1. Open a model in Blender you want to publish (places like [CG Trader](https://www.cgtrader.com/) are a good start) 38 | 2. Export to `public/model.glb` 39 | 3. open a terminal to `/src` directory 40 | 4. run `npx gltfjsx ../public/model.glb` 41 | 5. rename the new `Model.js` to `Model.jsx` 42 | 6. run `npm run dev` from terminal 43 | 7. look at what you did, tune and repeat 44 | ### Scripts 45 | 46 | ``` 47 | npm run dev 48 | npm run build 49 | npm run preview 50 | npm run sandbox 51 | ``` 52 | ### detailed notes for Blender -> Web3D 53 | 54 | #### Models 55 | 56 | 1. Import your model (I got an stl from printables.com) 57 | 2. Models CAN be created progmatically if that makes sense to do. 58 | 3. Models can come from multiple files 59 | 4. test things with gltf export NOT glb 60 | 5. Split parts 61 | 1. by whats separate 62 | 2. by materials 63 | 3. select faces + more technique 64 | 6. Reduce geometry 65 | 1. Remove unnecessary components for 3d printing 66 | 2. highlight and dissolve unnecessary vertices 67 | 3. limited dissolve intricate parts 68 | 7. join parts and set origins logically for use later 69 | 8. rename parts to what's easy to recognize 70 | 9. parent objects based on what needs to move together 71 | 10. add materials (detailed separately) 72 | 11. add lights (detailed separately) 73 | 74 | 75 | #### Materials 76 | 77 | 1. Materials in Blender 78 | 2. UVs 79 | 1. bulk script on Gist 80 | 3. GLTF export materials 81 | 4. BSDF Material 82 | 5. Baking Materials 83 | 6. Materials in R3F 84 | 1. Special materials 85 | 2. Cloning 86 | 3. Modifying 87 | 4. Unique capabilities 88 | 89 | #### Lighting 90 | 91 | 1. more lights == slower performance 92 | 2. use '-s' in gltfjsx transform 93 | 1. include drei Instances if using -i 94 | 3. add these properties to each light: castShadow shadow-mapSize={[2048, 2048]} shadow-bias={-.0000001} in Model.jsx 95 | 4. adjust intensity values and shadow-bias 96 | 5. add castShadow receiveShadow to instance Merged tag in Model.jsx 97 | 98 | #### Animating 99 | 100 | 1. useFrame lerp https://medium.com/@zmommaerts/animate-a-camera-in-react-three-fiber-7398326dad5d 101 | 2. Theater js https://www.theatrejs.com/ 102 | 3. useAnimations: 103 | 1. naming is everything! 104 | 2. NLA tracks are a pain 105 | 3. can group virtually 106 | 4. onClick interactions 107 | 5. play forward and backward. 108 | 4. Spring https:/docs.pmnd.rs/react-three-fiber/tutorials/using-with-react-spring 109 | 5. Drei Animations 110 | -------------------------------------------------------------------------------- /blender/test.blend: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/blender/test.blend -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web3D Site 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-three-vite", 3 | "version": "1.0.1", 4 | "description": "A simple React Three Fiber + Vite starter with an import-ready CodeSandbox config.", 5 | "keywords": [ 6 | "r3f", 7 | "react", 8 | "three", 9 | "vite", 10 | "starter", 11 | "react three fiber", 12 | "sandbox", 13 | "codesandbox" 14 | ], 15 | "author": "Benjamin Miles (https://github.com/benjaminmiles)", 16 | "repository": "github:benjaminmiles/react-three-vite", 17 | "license": "MIT", 18 | "dependencies": { 19 | "@react-three/drei": "^9.65.3", 20 | "@react-three/fiber": "^8.12.0", 21 | "@react-three/postprocessing": "^2.7.0", 22 | "babel-plugin-glsl": "^1.0.0", 23 | "gltfjsx": "^6.1.4", 24 | "r3f-perf": "^6.7.0", 25 | "react": "18.2.0", 26 | "react-dom": "18.2.0", 27 | "react-router-dom": "^6.11.0", 28 | "three": "^0.151.3" 29 | }, 30 | "devDependencies": { 31 | "@vitejs/plugin-react": "^2.2.0", 32 | "vite": "^3.2.4" 33 | }, 34 | "scripts": { 35 | "dev": "vite --host", 36 | "sandbox": "APP_ENV=sandbox vite", 37 | "build": "vite build", 38 | "preview": "vite preview" 39 | }, 40 | "browserslist": [ 41 | ">0.2%", 42 | "not dead", 43 | "not ie <= 11", 44 | "not op_mini all" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /public/box/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/nx.png -------------------------------------------------------------------------------- /public/box/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/ny.png -------------------------------------------------------------------------------- /public/box/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/nz.png -------------------------------------------------------------------------------- /public/box/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/px.png -------------------------------------------------------------------------------- /public/box/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/py.png -------------------------------------------------------------------------------- /public/box/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/box/pz.png -------------------------------------------------------------------------------- /public/courtyard-transformed.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/courtyard-transformed.glb -------------------------------------------------------------------------------- /public/img/courtyard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/img/courtyard.jpg -------------------------------------------------------------------------------- /public/img/ship.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/img/ship.jpg -------------------------------------------------------------------------------- /public/ship.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/ship.glb -------------------------------------------------------------------------------- /public/textures/concrete_rough_009_diffuse_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/concrete_rough_009_diffuse_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/concrete_rough_009_normal_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/concrete_rough_009_normal_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/concrete_rough_009_roughness_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/concrete_rough_009_roughness_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/cwSandstoneFloor-2K-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/cwSandstoneFloor-2K-1.png -------------------------------------------------------------------------------- /public/textures/cwSandstoneFloor-2K.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/cwSandstoneFloor-2K.jpg -------------------------------------------------------------------------------- /public/textures/hollow_bricks_009_diffuse_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/hollow_bricks_009_diffuse_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/hollow_bricks_009_normal_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/hollow_bricks_009_normal_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/hollow_bricks_009_roughness_xtm_05k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/hollow_bricks_009_roughness_xtm_05k.png -------------------------------------------------------------------------------- /public/textures/old_concrete_roof_001_diffuse_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/old_concrete_roof_001_diffuse_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/old_concrete_roof_001_normal_xtm_05k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/old_concrete_roof_001_normal_xtm_05k.jpg -------------------------------------------------------------------------------- /public/textures/old_concrete_roof_001_roughness_xtm_05k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/old_concrete_roof_001_roughness_xtm_05k.png -------------------------------------------------------------------------------- /public/textures/wood_plain_dark_013_diffuse_xtm_4k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/wood_plain_dark_013_diffuse_xtm_4k.jpg -------------------------------------------------------------------------------- /public/textures/wood_plain_dark_013_normal_xtm_4k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/wood_plain_dark_013_normal_xtm_4k.jpg -------------------------------------------------------------------------------- /public/textures/wood_plain_dark_013_roughness_xtm_4k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/public/textures/wood_plain_dark_013_roughness_xtm_4k.png -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "container": { 6 | "node": "16", 7 | "startScript": "sandbox" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; 3 | import Home from "./Home.jsx"; 4 | import Ship from "./ShipModel.jsx"; 5 | import Courtyard from "./Courtyard.jsx"; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | } /> 12 | } /> 13 | } /> 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/Courtyard.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | Command: npx gltfjsx@6.1.4 ../public/courtyard.glb -i -s 4 | 5 | Camera move example: https://codesandbox.io/s/three-fiber-zoom-to-object-camera-controls-solution-final-sbgx0?file=/src/App.js 6 | */ 7 | 8 | import React, { Suspense, useMemo, useContext, createContext, useState } from 'react' 9 | import { useGLTF, Merged, PerspectiveCamera, Environment, Cloud } from '@react-three/drei' 10 | import { Canvas, useFrame } from "@react-three/fiber"; 11 | import * as THREE from "three"; 12 | 13 | const context = createContext() 14 | export function Instances({ children, ...props }) { 15 | const { nodes } = useGLTF('/courtyard-transformed.glb') 16 | const instances = useMemo( 17 | () => ({ 18 | Cube: nodes.Cube, 19 | Cube1: nodes.Cube001, 20 | StoneLampStoneLamp: nodes.Stone_Lamp_Stone_Lamp009, 21 | StoneLampCube: nodes.Stone_Lamp_Cube002, 22 | StoneLampCandle: nodes.Stone_Lamp_Candle003, 23 | PavillionPavillion: nodes.Pavillion_Pavillion001, 24 | PavillionPillarCube: nodes.Pavillion_Pillar_Cube002, 25 | PavillionPillarPillar: nodes.Pavillion_Pillar_Pillar001, 26 | PavillionRoofSquareWithHole: nodes.Pavillion_Roof_Square_With_Hole002, 27 | PavillionSmallTableSmallTable: nodes.Pavillion_Small_Table_Small_Table001, 28 | PavillionStoolStool: nodes.Pavillion_Stool_Stool001, 29 | RailRail: nodes.Rail_Rail001, 30 | RailRail8: nodes.Rail_Rail012, 31 | RailRail9: nodes.Rail_Rail013, 32 | RailRail10: nodes.Rail_Rail015, 33 | RailRail11: nodes.Rail_Rail019, 34 | RailRail13: nodes.Rail_Rail029, 35 | RailRail74: nodes.Rail_Rail094, 36 | RailRail75: nodes.Rail_Rail097, 37 | RailRail76: nodes.Rail_Rail108, 38 | RailRail77: nodes.Rail_Rail109, 39 | RailRail78: nodes.Rail_Rail110, 40 | RailRail80: nodes.Rail_Rail169, 41 | PillarPillar: nodes.Pillar_2_Pillar_2001, 42 | DoorAssemblyDoorAssemblyDoorOpeningDoorDoor: nodes.Door_Assembly_Door_Assembly_Door_Opening_Door_Door009, 43 | DoorAssemblyDoorAssemblyDoorOpeningPlane: nodes.Door_Assembly_Door_Assembly_Door_Opening_Plane005, 44 | Plane5: nodes.Plane451, 45 | Plane6: nodes.Plane451_1, 46 | Plane7: nodes.Plane351, 47 | Plane8: nodes.Plane351_1, 48 | Plane9: nodes.Plane490, 49 | Plane10: nodes.Plane490_1, 50 | Plane11: nodes.Plane358, 51 | Plane12: nodes.Plane358_1, 52 | WindowWindowWindowOpeningWindowFrame: nodes.Window_Window_Window_Opening_Window_Frame001, 53 | WindowWindowWindowOpeningWindowFrame1: nodes.Window_Window_Window_Opening_Window_Frame005, 54 | WindowWindowWindowOpeningWindowFrame2: nodes.Window_Window_Window_Opening_Window_Frame013, 55 | WindowWindowWindowOpeningWindowFrame3: nodes.Window_Window_Window_Opening_Window_Frame024, 56 | AwningAssemblyCube: nodes.Awning_Assembly_Cube002, 57 | AwningAssemblyPillarCube: nodes.Awning_Assembly_Pillar_Cube004, 58 | AwningAssemblyCube2: nodes.Awning_Assembly_Cube001, 59 | SupportSupport: nodes.Support_Support003, 60 | SupportSupport1: nodes.Support_Support004, 61 | }), 62 | [nodes] 63 | ) 64 | return ( 65 | 66 | {(instances) => } 67 | 68 | ) 69 | } 70 | 71 | function Model(props) { 72 | const instances = useContext(context) 73 | const cameraState = useContext(SceneContext); 74 | const { nodes, materials } = useGLTF('/courtyard-transformed.glb') 75 | materials['Old Concrete Roof 001_05k'].color.set(0x6688bb) 76 | materials['CW Sandstone Floor'].color.set(0x889999) 77 | materials['Hollow Bricks 009_05k'].color.set(0xbbbbbb) 78 | 79 | useFrame(state => { 80 | const vectorGo = new THREE.Vector3(); 81 | vectorGo.set(...cameraState.position); 82 | const vector = new THREE.Vector3(); 83 | const vector2 = new THREE.Vector3(); 84 | vector.set(...cameraState.target); 85 | vector2.set(...cameraState.target); 86 | // const intDistance = 10.75; 87 | // state.camera.position.x = intDistance * Math.sin(state.clock.getElapsedTime() / 10); 88 | // state.camera.position.z = intDistance * Math.cos(state.clock.getElapsedTime() / 10); 89 | state.camera.lookAt(vector2.lerp(vector, 0.01)); 90 | state.camera.position.lerp(vectorGo, 0.01); 91 | state.camera.updateProjectionMatrix(); 92 | }); 93 | 94 | return ( 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | {moveTo(e.object.position);}} position={[-6.78, 0.07, 3.99]} /> 496 | {moveTo(e.object.position);}} position={[1.28, 0.67, 0]} /> 497 | {moveTo(e.object.position);}} position={[-4.24, 0.07, 3.99]} /> 498 | {moveTo(e.object.position);}} position={[6.77, 0.07, 3.99]} /> 499 | {moveTo(e.object.position);}} position={[4.22, 0.07, 3.99]} /> 500 | {moveTo(e.object.position);}} position={[-6.78, 0.07, -3.95]} /> 501 | {moveTo(e.object.position);}} position={[-4.24, 0.07, -3.95]} /> 502 | {moveTo(e.object.position);}} position={[6.77, 0.07, -3.95]} /> 503 | {moveTo(e.object.position);}} position={[4.22, 0.07, -3.95]} /> 504 | {moveTo(e.object.position);}} position={[-1.27, 0.67, 0]} /> 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 | 1068 | 1069 | 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | 1095 | 1096 | 1097 | 1098 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | 1112 | 1113 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | 1143 | 1144 | 1145 | 1146 | 1147 | 1148 | 1149 | 1150 | 1151 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | 1159 | 1160 | 1161 | 1162 | 1163 | 1164 | 1165 | 1166 | 1167 | 1168 | 1169 | 1170 | 1171 | 1172 | 1173 | 1174 | 1175 | 1176 | 1177 | 1178 | 1179 | 1180 | 1181 | 1182 | 1183 | 1184 | 1185 | 1186 | 1187 | 1188 | 1189 | 1190 | 1191 | 1192 | 1193 | 1194 | 1195 | 1196 | 1197 | 1198 | 1199 | 1200 | 1201 | 1202 | 1203 | 1204 | 1205 | 1206 | 1207 | 1208 | 1209 | 1210 | 1211 | 1212 | 1213 | 1214 | 1215 | 1216 | 1217 | 1218 | 1219 | 1220 | 1221 | 1222 | 1223 | 1224 | 1225 | 1226 | 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | 1240 | 1241 | 1242 | 1243 | 1244 | 1245 | 1246 | 1247 | 1248 | 1249 | 1250 | 1251 | 1252 | 1253 | 1254 | 1255 | 1256 | 1257 | 1258 | 1259 | 1260 | 1261 | 1262 | 1263 | 1264 | 1265 | 1266 | 1267 | 1268 | 1269 | 1270 | 1271 | 1272 | 1273 | 1274 | 1275 | 1276 | 1277 | 1278 | 1279 | 1280 | 1281 | 1282 | 1283 | 1284 | 1285 | 1286 | 1287 | 1288 | 1289 | 1290 | 1291 | 1292 | 1293 | 1294 | 1295 | 1296 | 1297 | 1298 | 1299 | 1300 | 1301 | 1302 | 1303 | 1304 | 1305 | 1306 | 1307 | 1308 | 1309 | 1310 | 1311 | 1312 | 1313 | 1314 | 1315 | 1316 | 1317 | 1318 | 1319 | 1320 | 1321 | 1322 | 1323 | 1324 | 1325 | 1326 | 1327 | 1328 | 1329 | 1330 | 1331 | 1332 | 1333 | 1334 | 1335 | 1336 | 1337 | 1338 | 1339 | 1340 | 1341 | 1342 | 1343 | 1344 | 1345 | 1346 | 1347 | 1348 | 1349 | 1350 | 1351 | 1352 | 1353 | 1354 | 1355 | 1356 | 1357 | 1358 | 1359 | 1360 | 1361 | 1362 | 1363 | 1364 | 1365 | 1366 | 1367 | 1368 | 1369 | 1370 | 1371 | 1372 | 1373 | 1374 | 1375 | 1376 | 1377 | 1378 | 1379 | 1380 | 1381 | 1382 | 1383 | 1384 | 1385 | 1386 | 1387 | 1388 | 1389 | 1390 | 1391 | 1392 | 1393 | 1394 | 1395 | 1396 | 1397 | 1398 | 1399 | 1400 | 1401 | 1402 | 1403 | 1404 | 1405 | 1406 | 1407 | 1408 | 1409 | 1410 | 1411 | 1412 | 1413 | 1414 | 1415 | 1416 | 1417 | 1418 | 1419 | 1420 | 1421 | 1422 | 1423 | 1424 | 1425 | 1426 | 1427 | 1428 | 1429 | 1430 | 1431 | 1432 | 1433 | 1434 | 1435 | 1436 | 1437 | 1438 | 1439 | 1440 | 1441 | 1442 | 1443 | 1444 | 1445 | 1446 | 1447 | 1448 | 1449 | 1450 | 1451 | 1452 | 1453 | 1454 | 1455 | 1456 | 1457 | 1458 | 1459 | 1460 | 1461 | 1462 | 1463 | 1464 | 1465 | 1466 | 1467 | 1468 | 1469 | 1470 | 1471 | 1472 | 1473 | 1474 | 1475 | 1476 | 1477 | 1478 | 1479 | 1480 | 1481 | 1482 | 1483 | 1484 | 1485 | 1486 | 1487 | 1488 | 1489 | 1490 | 1491 | 1492 | 1493 | 1494 | 1495 | 1496 | 1497 | 1498 | 1499 | 1500 | 1501 | 1502 | 1503 | 1504 | 1505 | 1506 | 1507 | 1508 | 1509 | 1510 | 1511 | 1512 | 1513 | 1514 | 1515 | 1516 | 1517 | 1518 | 1519 | 1520 | 1521 | 1522 | 1523 | 1524 | 1525 | 1526 | 1527 | 1528 | 1529 | 1530 | 1531 | 1532 | 1533 | 1534 | 1535 | 1536 | 1537 | 1538 | 1539 | 1540 | 1541 | 1542 | 1543 | 1544 | 1545 | 1546 | 1547 | 1548 | 1549 | 1550 | 1551 | 1552 | 1553 | 1554 | 1555 | 1556 | 1557 | 1558 | 1559 | 1560 | 1561 | 1562 | 1563 | 1564 | 1565 | 1566 | 1567 | 1568 | 1569 | 1570 | 1571 | 1572 | 1573 | 1574 | 1575 | 1576 | 1577 | 1578 | 1579 | 1580 | 1581 | 1582 | 1583 | 1584 | 1585 | 1586 | 1587 | 1588 | 1589 | 1590 | 1591 | 1592 | 1593 | 1594 | 1595 | 1596 | 1597 | 1598 | 1599 | 1600 | 1601 | 1602 | 1603 | 1604 | 1605 | 1606 | 1607 | 1608 | 1609 | 1610 | 1611 | 1612 | 1613 | 1614 | 1615 | 1616 | 1617 | 1618 | 1619 | 1620 | 1621 | 1622 | 1623 | 1624 | 1625 | 1626 | 1627 | 1628 | 1629 | 1630 | 1631 | 1632 | 1633 | 1634 | 1635 | 1636 | 1637 | 1638 | 1639 | 1640 | 1641 | 1642 | 1643 | 1644 | 1645 | 1646 | 1647 | 1648 | 1649 | 1650 | 1651 | 1652 | 1653 | 1654 | 1655 | 1656 | 1657 | 1658 | 1659 | 1660 | 1661 | 1662 | 1663 | 1664 | 1665 | 1666 | 1667 | 1668 | 1669 | 1670 | 1671 | 1672 | 1673 | 1674 | 1675 | 1676 | 1677 | 1678 | 1679 | 1680 | 1681 | 1682 | 1683 | 1684 | 1685 | 1686 | 1687 | 1688 | 1689 | 1690 | 1691 | 1692 | 1693 | 1694 | 1695 | 1696 | 1697 | 1698 | 1699 | 1700 | 1701 | 1702 | 1703 | 1704 | 1705 | 1706 | 1707 | 1708 | 1709 | 1710 | 1711 | 1712 | 1713 | 1714 | 1715 | 1716 | 1717 | 1718 | 1719 | 1720 | 1721 | 1722 | 1723 | 1724 | 1725 | 1726 | 1727 | 1728 | 1729 | 1730 | 1731 | 1732 | 1733 | 1734 | 1735 | 1736 | 1737 | 1738 | 1739 | 1740 | 1741 | 1742 | 1743 | 1744 | 1745 | 1746 | 1747 | 1748 | 1749 | 1750 | 1751 | 1752 | 1753 | 1754 | 1755 | 1756 | 1757 | 1758 | 1759 | 1760 | 1761 | 1762 | 1763 | 1764 | 1765 | 1766 | 1767 | 1768 | 1769 | 1770 | 1771 | 1772 | 1773 | 1774 | 1775 | 1776 | 1777 | 1778 | 1779 | 1780 | 1781 | 1782 | 1783 | 1784 | 1785 | 1786 | 1787 | 1788 | 1789 | 1790 | 1791 | 1792 | 1793 | 1794 | 1795 | 1796 | 1797 | 1798 | 1799 | 1800 | 1801 | 1802 | 1803 | 1804 | 1805 | 1806 | 1807 | 1808 | 1809 | 1810 | 1811 | 1812 | 1813 | 1814 | 1815 | 1816 | 1817 | 1818 | 1819 | 1820 | 1821 | 1822 | 1823 | 1824 | 1825 | 1826 | 1827 | 1828 | 1829 | 1830 | 1831 | 1832 | 1833 | 1834 | 1835 | 1836 | 1837 | 1838 | 1839 | 1840 | 1841 | 1842 | 1843 | 1844 | 1845 | 1846 | 1847 | 1848 | 1849 | 1850 | 1851 | 1852 | 1853 | 1854 | 1855 | 1856 | 1857 | 1858 | 1859 | 1860 | 1861 | 1862 | 1863 | 1864 | 1865 | 1866 | 1867 | 1868 | 1869 | 1870 | 1871 | 1872 | 1873 | 1874 | 1875 | 1876 | 1877 | 1878 | 1879 | 1880 | 1881 | 1882 | 1883 | 1884 | 1885 | 1886 | 1887 | 1888 | 1889 | 1890 | 1891 | 1892 | 1893 | 1894 | 1895 | 1896 | 1897 | 1898 | 1899 | 1900 | 1901 | 1902 | 1903 | 1904 | 1905 | 1906 | 1907 | 1908 | 1909 | 1910 | 1911 | 1912 | 1913 | 1914 | 1915 | 1916 | 1917 | 1918 | 1919 | 1920 | 1921 | 1922 | 1923 | 1924 | 1925 | 1926 | 1927 | 1928 | 1929 | 1930 | 1931 | 1932 | 1933 | 1934 | 1935 | 1936 | 1937 | 1938 | 1939 | 1940 | 1941 | 1942 | 1943 | 1944 | 1945 | 1946 | 1947 | 1948 | 1949 | 1950 | 1951 | 1952 | 1953 | 1954 | 1955 | 1956 | 1957 | 1958 | 1959 | 1960 | 1961 | 1962 | 1963 | 1964 | 1965 | 1966 | 1967 | 1968 | 1969 | 1970 | 1971 | 1972 | 1973 | 1974 | 1975 | 1976 | 1977 | 1978 | 1979 | 1980 | 1981 | 1982 | 1983 | 1984 | 1985 | 1986 | 1987 | 1988 | 1989 | 1990 | 1991 | 1992 | 1993 | 1994 | 1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | 2014 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 2021 | 2022 | 2023 | 2024 | 2025 | 2026 | 2027 | 2028 | 2029 | 2030 | 2031 | 2032 | 2033 | 2034 | 2035 | 2036 | 2037 | 2038 | 2039 | 2040 | 2041 | 2042 | 2043 | 2044 | 2045 | 2046 | 2047 | 2048 | 2049 | 2050 | 2051 | 2052 | 2053 | 2054 | 2055 | 2056 | 2057 | 2058 | 2059 | 2060 | 2061 | 2062 | 2063 | 2064 | 2065 | 2066 | 2067 | 2068 | 2069 | 2070 | 2071 | 2072 | 2073 | 2074 | 2075 | 2076 | 2077 | 2078 | 2079 | 2080 | 2081 | 2082 | 2083 | 2084 | 2085 | 2086 | 2087 | 2088 | 2089 | 2090 | 2091 | 2092 | 2093 | 2094 | 2095 | 2096 | 2097 | 2098 | 2099 | 2100 | 2101 | 2102 | 2103 | 2104 | 2105 | 2106 | 2107 | 2108 | 2109 | 2110 | 2111 | 2112 | 2113 | 2114 | 2115 | 2116 | 2117 | 2118 | 2119 | 2120 | 2121 | 2122 | 2123 | 2124 | 2125 | 2126 | 2127 | 2128 | 2129 | 2130 | 2131 | 2132 | 2133 | 2134 | 2135 | 2136 | 2137 | 2138 | 2139 | 2140 | 2141 | 2142 | 2143 | 2144 | 2145 | 2146 | 2147 | 2148 | 2149 | 2150 | 2151 | 2152 | 2153 | 2154 | 2155 | 2156 | 2157 | 2158 | 2159 | 2160 | 2161 | 2162 | 2163 | 2164 | 2165 | 2166 | 2167 | 2168 | 2169 | 2170 | 2171 | 2172 | 2173 | 2174 | 2175 | 2176 | 2177 | 2178 | 2179 | 2180 | 2181 | 2182 | 2183 | 2184 | 2185 | 2186 | 2187 | 2188 | 2189 | 2190 | 2191 | 2192 | 2193 | 2194 | 2195 | 2196 | 2197 | 2198 | 2199 | 2200 | 2201 | 2202 | 2203 | 2204 | 2205 | 2206 | 2207 | 2208 | 2209 | 2210 | 2211 | 2212 | 2213 | 2214 | 2215 | 2216 | 2217 | 2218 | 2219 | 2220 | 2221 | 2222 | 2223 | 2224 | 2225 | 2226 | 2227 | 2228 | 2229 | 2230 | 2231 | 2232 | 2233 | 2234 | 2235 | 2236 | 2237 | 2238 | 2239 | 2240 | 2241 | 2242 | 2243 | 2244 | 2245 | 2246 | 2247 | 2248 | 2249 | 2250 | 2251 | 2252 | 2253 | 2254 | 2255 | 2256 | 2257 | 2258 | 2259 | 2260 | 2261 | 2262 | 2263 | 2264 | 2265 | 2266 | 2267 | 2268 | 2269 | 2270 | 2271 | 2272 | 2273 | 2274 | 2275 | 2276 | 2277 | 2278 | 2279 | 2280 | 2281 | 2282 | 2283 | 2284 | 2285 | 2286 | 2287 | 2288 | 2289 | 2290 | 2291 | 2292 | 2293 | 2294 | 2295 | 2296 | 2297 | 2298 | 2299 | 2300 | 2301 | 2302 | 2303 | 2304 | 2305 | 2306 | 2307 | 2308 | 2309 | 2310 | 2311 | 2312 | 2313 | 2314 | 2315 | 2316 | 2317 | 2318 | 2319 | 2320 | 2321 | 2322 | 2323 | 2324 | 2325 | 2326 | 2327 | 2328 | 2329 | 2330 | 2331 | 2332 | 2333 | 2334 | 2335 | 2336 | 2337 | 2338 | 2339 | 2340 | 2341 | 2342 | 2343 | 2344 | 2345 | 2346 | 2347 | 2348 | 2349 | 2350 | 2351 | 2352 | 2353 | 2354 | 2355 | 2356 | 2357 | 2358 | 2359 | 2360 | 2361 | 2362 | 2363 | 2364 | 2365 | 2366 | 2367 | 2368 | 2369 | 2370 | 2371 | 2372 | 2373 | 2374 | 2375 | 2376 | 2377 | 2378 | 2379 | 2380 | 2381 | 2382 | 2383 | 2384 | 2385 | 2386 | 2387 | 2388 | 2389 | 2390 | 2391 | 2392 | 2393 | 2394 | 2395 | 2396 | 2397 | 2398 | 2399 | 2400 | 2401 | 2402 | 2403 | 2404 | 2405 | 2406 | 2407 | 2408 | 2409 | 2410 | 2411 | 2412 | 2413 | 2414 | 2415 | 2416 | 2417 | 2418 | 2419 | 2420 | 2421 | 2422 | 2423 | 2424 | 2425 | 2426 | 2427 | 2428 | 2429 | 2430 | 2431 | 2432 | 2433 | 2434 | 2435 | 2436 | 2437 | 2438 | 2439 | 2440 | 2441 | 2442 | 2443 | 2444 | 2445 | 2446 | 2447 | 2448 | 2449 | 2450 | 2451 | 2452 | 2453 | 2454 | 2455 | 2456 | 2457 | 2458 | 2459 | 2460 | 2461 | 2462 | 2463 | 2464 | 2465 | 2466 | 2467 | 2468 | 2469 | 2470 | 2471 | 2472 | 2473 | 2474 | 2475 | 2476 | 2477 | 2478 | 2479 | 2480 | 2481 | 2482 | 2483 | 2484 | 2485 | 2486 | 2487 | 2488 | 2489 | 2490 | 2491 | 2492 | 2493 | 2494 | 2495 | 2496 | 2497 | 2498 | 2499 | 2500 | 2501 | 2502 | 2503 | 2504 | 2505 | 2506 | 2507 | 2508 | 2509 | 2510 | 2511 | 2512 | 2513 | 2514 | 2515 | 2516 | 2517 | 2518 | 2519 | 2520 | 2521 | 2522 | 2523 | 2524 | 2525 | 2526 | 2527 | 2528 | 2529 | 2530 | 2531 | 2532 | 2533 | 2534 | 2535 | 2536 | 2537 | 2538 | 2539 | 2540 | 2541 | 2542 | 2543 | 2544 | 2545 | 2546 | 2547 | 2548 | 2549 | 2550 | 2551 | 2552 | 2553 | 2554 | 2555 | 2556 | 2557 | 2558 | 2559 | 2560 | 2561 | 2562 | 2563 | 2564 | 2565 | 2566 | 2567 | 2568 | 2569 | 2570 | 2571 | 2572 | 2573 | 2574 | 2575 | 2576 | 2577 | 2578 | 2579 | 2580 | 2581 | 2582 | 2583 | 2584 | 2585 | 2586 | 2587 | 2588 | 2589 | 2590 | 2591 | 2592 | 2593 | 2594 | 2595 | 2596 | 2597 | 2598 | 2599 | 2600 | 2601 | 2602 | 2603 | 2604 | 2605 | 2606 | 2607 | 2608 | 2609 | 2610 | 2611 | 2612 | 2613 | 2614 | 2615 | 2616 | 2617 | 2618 | 2619 | 2620 | 2621 | 2622 | 2623 | 2624 | 2625 | 2626 | 2627 | 2628 | 2629 | 2630 | 2631 | 2632 | 2633 | 2634 | 2635 | 2636 | 2637 | 2638 | 2639 | 2640 | 2641 | 2642 | 2643 | 2644 | 2645 | 2646 | 2647 | 2648 | 2649 | 2650 | 2651 | 2652 | 2653 | 2654 | 2655 | 2656 | 2657 | 2658 | 2659 | 2660 | 2661 | 2662 | 2663 | 2664 | 2665 | 2666 | 2667 | 2668 | 2669 | 2670 | 2671 | 2672 | 2673 | 2674 | 2675 | 2676 | 2677 | 2678 | 2679 | 2680 | 2681 | 2682 | 2683 | 2684 | 2685 | 2686 | 2687 | 2688 | 2689 | 2690 | 2691 | 2692 | 2693 | 2694 | 2695 | 2696 | 2697 | 2698 | 2699 | 2700 | 2701 | 2702 | 2703 | 2704 | 2705 | 2706 | 2707 | 2708 | 2709 | 2710 | 2711 | 2712 | 2713 | 2714 | 2715 | 2716 | 2717 | 2718 | 2719 | 2720 | 2721 | 2722 | 2723 | 2724 | 2725 | 2726 | 2727 | 2728 | 2729 | 2730 | 2731 | 2732 | 2733 | 2734 | 2735 | 2736 | 2737 | 2738 | 2739 | 2740 | 2741 | 2742 | 2743 | 2744 | 2745 | 2746 | 2747 | 2748 | 2749 | 2750 | 2751 | 2752 | 2753 | 2754 | 2755 | 2756 | 2757 | 2758 | 2759 | 2760 | 2761 | 2762 | 2763 | 2764 | 2765 | 2766 | 2767 | 2768 | 2769 | 2770 | 2771 | 2772 | 2773 | 2774 | 2775 | 2776 | 2777 | 2778 | 2779 | 2780 | 2781 | 2782 | 2783 | 2784 | 2785 | 2786 | 2787 | 2788 | 2789 | 2790 | 2791 | 2792 | 2793 | 2794 | 2795 | 2796 | 2797 | 2798 | 2799 | 2800 | 2801 | 2802 | 2803 | 2804 | 2805 | 2806 | 2807 | 2808 | 2809 | 2810 | 2811 | 2812 | 2813 | 2814 | 2815 | 2816 | 2817 | 2818 | 2819 | 2820 | 2821 | 2822 | 2823 | 2824 | 2825 | 2826 | 2827 | 2828 | 2829 | 2830 | 2831 | 2832 | 2833 | 2834 | 2835 | 2836 | 2837 | 2838 | 2839 | 2840 | 2841 | 2842 | 2843 | 2844 | 2845 | 2846 | 2847 | 2848 | 2849 | 2850 | 2851 | 2852 | 2853 | 2854 | 2855 | 2856 | 2857 | 2858 | 2859 | 2860 | 2861 | 2862 | 2863 | 2864 | 2865 | 2866 | 2867 | 2868 | 2869 | 2870 | 2871 | 2872 | 2873 | 2874 | 2875 | 2876 | 2877 | 2878 | 2879 | 2880 | 2881 | 2882 | 2883 | 2884 | 2885 | 2886 | 2887 | 2888 | 2889 | 2890 | 2891 | 2892 | 2893 | 2894 | 2895 | 2896 | 2897 | 2898 | 2899 | 2900 | 2901 | 2902 | 2903 | 2904 | 2905 | 2906 | 2907 | 2908 | 2909 | 2910 | 2911 | 2912 | 2913 | 2914 | 2915 | 2916 | 2917 | 2918 | 2919 | 2920 | 2921 | 2922 | 2923 | 2924 | 2925 | 2926 | 2927 | 2928 | 2929 | 2930 | 2931 | 2932 | 2933 | 2934 | 2935 | 2936 | 2937 | 2938 | 2939 | 2940 | 2941 | 2942 | 2943 | 2944 | 2945 | 2946 | 2947 | 2948 | 2949 | 2950 | 2951 | 2952 | 2953 | 2954 | 2955 | 2956 | 2957 | 2958 | 2959 | 2960 | 2961 | 2962 | 2963 | 2964 | 2965 | 2966 | 2967 | 2968 | 2969 | 2970 | 2971 | 2972 | 2973 | 2974 | 2975 | 2976 | 2977 | 2978 | 2979 | 2980 | 2981 | 2982 | 2983 | 2984 | 2985 | 2986 | 2987 | 2988 | 2989 | 2990 | 2991 | 2992 | 2993 | 2994 | 2995 | 2996 | 2997 | 2998 | 2999 | 3000 | 3001 | 3002 | 3003 | 3004 | 3005 | 3006 | 3007 | 3008 | 3009 | 3010 | 3011 | 3012 | 3013 | 3014 | 3015 | 3016 | 3017 | 3018 | 3019 | 3020 | 3021 | 3022 | 3023 | 3024 | 3025 | 3026 | 3027 | 3028 | 3029 | 3030 | 3031 | 3032 | 3033 | 3034 | 3035 | 3036 | 3037 | 3038 | 3039 | 3040 | 3041 | 3042 | 3043 | 3044 | 3045 | 3046 | 3047 | 3048 | ) 3049 | } 3050 | 3051 | useGLTF.preload('/courtyard-transformed.glb'); 3052 | 3053 | const Scene = () => { 3054 | const sceneContext = React.useContext(SceneContext) 3055 | return ( 3056 | <> 3057 | 3058 | 3059 | 3060 | 3061 | 3062 | 3063 | 3064 | {/* REPLACE THIS LIGHT AS NEEDED IT'S A GOOD START */} 3065 | 3066 | 3067 | ); 3068 | }; 3069 | const SceneContext = createContext(); 3070 | const Courtyard = () => { 3071 | const [cameraState, setCameraState] = useState({target: [0,2,0], position: [0,1,13]}); 3072 | const moveTo = (target, position) => { 3073 | setCameraState({ 3074 | target: target, 3075 | position: position}); 3076 | } 3077 | return ( 3078 | 3079 | 3080 | 3081 | 3082 |
3083 |
{moveTo([0,1,0],[0,2,0])}}> Center Table
3084 |
{moveTo([0,2,0],[0,1,13])}}> Entrance
3085 |
3086 | 3087 | ); 3088 | }; 3089 | 3090 | export default Courtyard; 3091 | -------------------------------------------------------------------------------- /src/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Home = () => { 4 | return ( 5 | <> 6 |
7 |

Web3D Experiments

8 |

Web3D Discord Channel

 9 |
10 |
11 |
12 | 13 | Sunset over the ocean 17 | 18 |
Ship from the Expanse TV show. Features: Environment Box, Animations.
19 |
20 |
21 | 22 | Mountain landscape 26 | 27 |
Low Poly Chinese Courtyard, Features: Instances, Material changes, Clouds, Camera moves
28 |
29 |
30 | 31 | ); 32 | }; 33 | 34 | export default Home; 35 | -------------------------------------------------------------------------------- /src/ShipModel.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | Command: npx gltfjsx@6.1.4 ../public/model.gltf -T 4 | */ 5 | 6 | import React, { useRef, useEffect, Suspense } from 'react' 7 | import { useGLTF, PerspectiveCamera, useAnimations } from '@react-three/drei' 8 | import { OrbitControls, Environment } from "@react-three/drei"; 9 | import { Canvas } from "@react-three/fiber"; 10 | 11 | const animationGroups = { 12 | 'pdc1': ['pdc1','pdc1-door1', 'pdc1-door2', 'pdc1-frame'], 13 | 'pdc2': ['pdc2','pdc2-door1', 'pdc2-door2', 'pdc2-frame'], 14 | 'pdc3': ['pdc3-door1', 'pdc3-door2', 'pdc3-frame'], 15 | 'pdc4': ['pdc4','pdc4-door1', 'pdc4-door2', 'pdc4-frame'], 16 | 'pdc6': ['pdc6','pdc-top-open', 'pdc6-door2.004', 'pdc6-frame'], 17 | 'missiles': ['misile_door-topAction','missile_door-bottomAction', 'missile1Action', 'missile2Action'], 18 | 'gangway': ['hatch-upper','gangway'], 19 | 'drone': ['hatch-lower'], 20 | } 21 | 22 | function Model(props) { 23 | const group = useRef() 24 | const { nodes, materials, animations } = useGLTF('/ship.glb') 25 | const { actions } = useAnimations(animations, group) 26 | 27 | const playActions = function(strGroup, intTimeScale){ 28 | animationGroups[strGroup].forEach(function(strAction){ 29 | const action = actions[strAction] 30 | action.clampWhenFinished = true 31 | action.timeScale = intTimeScale 32 | action.setLoop(1,1).reset().play() 33 | }); 34 | if(intTimeScale === 1 ){ 35 | setTimeout(function(){ 36 | playActions(strGroup, -1); 37 | }, 3000); 38 | } 39 | } 40 | 41 | useEffect(() => { 42 | let i=0; 43 | for (const key in animationGroups) { 44 | setTimeout(function(){ 45 | playActions(key, 1); 46 | }, 1000* i); 47 | i++; 48 | } 49 | }, []); 50 | 51 | return ( 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | {playActions('drone',1)}}/> 78 | {playActions('gangway',1)}} 80 | /> 81 | {playActions('missiles',1)}} /> 83 | {playActions('missiles',1)}}/> 85 | 86 | 87 | 88 | 89 | 90 | {playActions('pdc1',1)}} 92 | /> 93 | {playActions('pdc1',1)}}/> 95 | 96 | 97 | 98 | 99 | 100 | 101 | {playActions('pdc2',1)}}/> 103 | {playActions('pdc2',1)}}/> 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | {playActions('pdc3',1)}}/> 114 | {playActions('pdc3',1)}}/> 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | {playActions('pdc4',1)}}/> 126 | {playActions('pdc4',1)}}/> 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | {playActions('pdc6',1)}}/> 138 | {playActions('pdc6',1)}}/> 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 150 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | ); 163 | } 164 | 165 | useGLTF.preload('/ship.glb'); 166 | 167 | const Scene = () => { 168 | return ( 169 | <> 170 | 171 | 172 | 173 | {/* REPLACE THIS LIGHT AS NEEDED IT'S A GOOD START */} 174 | 175 | 176 | ); 177 | }; 178 | 179 | const Ship = () => { 180 | return ( 181 | 182 | {/* REMOVE ORBIT CONTROLS TO FORCE THE CAMERA VIEW */} 183 | 187 | 188 | 189 | 190 | 191 | 192 | ); 193 | }; 194 | 195 | export default Ship; -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | import "./styles.css"; 5 | 6 | const root = createRoot(document.getElementById("root")); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /src/prepare.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuddenDevelopment/Web-3D-Tutorial/876916c28fbeb1e73765f33bb786be9dfcb27c23/src/prepare.js -------------------------------------------------------------------------------- /src/ship.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | Command: npx gltfjsx@6.1.4 ../public/ship.glb 4 | */ 5 | 6 | import React, { useRef } from 'react' 7 | import { useGLTF, PerspectiveCamera, useAnimations } from '@react-three/drei' 8 | 9 | export function Model(props) { 10 | const group = useRef() 11 | const { nodes, materials, animations } = useGLTF('/ship.glb') 12 | const { actions } = useAnimations(animations, group) 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | ) 107 | } 108 | 109 | useGLTF.preload('/ship.glb') 110 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body, 7 | #root { 8 | width: 100%; 9 | height: 100%; 10 | margin: 0; 11 | padding: 0; 12 | background-color: #272727; 13 | -webkit-touch-callout: none; 14 | -webkit-user-select: none; 15 | -khtml-user-select: none; 16 | -moz-user-select: none; 17 | -ms-user-select: none; 18 | user-select: none; 19 | overflow: hidden; 20 | color: #fff; 21 | background-color: #333; 22 | } 23 | 24 | #root { 25 | overflow: auto; 26 | } 27 | 28 | body { 29 | position: fixed; 30 | overflow: hidden; 31 | overscroll-behavior-y: none; 32 | font-family: helvetica neue, helvetica, arial, sans-serif; 33 | -webkit-font-smoothing: antialiased; 34 | } 35 | 36 | header { 37 | color: #fff; 38 | padding: 20px; 39 | text-align: center; 40 | } 41 | 42 | main { 43 | max-width: 1200px; 44 | margin: 0 auto; 45 | padding: 20px; 46 | } 47 | 48 | figcaption { 49 | font-size: 22px; 50 | font-style: italic; 51 | text-align: center; 52 | margin-top: 0; 53 | margin-bottom: 10px; 54 | } 55 | 56 | img { 57 | max-width: 100%; 58 | height: auto; 59 | margin-top: 20px; 60 | } 61 | 62 | .btn { 63 | cursor: pointer; 64 | border-radius: 5px; 65 | margin: 8px; 66 | padding: 8px; 67 | font-weight: bold; 68 | background: rgba(0, 0, 0, 0.7); 69 | color:aliceblue 70 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | import { defineConfig } from "vite"; 3 | import react from "@vitejs/plugin-react"; 4 | 5 | // This is required for Vite to work correctly with CodeSandbox 6 | const server = process.env.APP_ENV === "sandbox" ? { hmr: { clientPort: 443 } } : {}; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | server: server, 11 | resolve: { 12 | alias: { 13 | "@src": resolve(__dirname, "./src"), 14 | }, 15 | }, 16 | plugins: [react()], 17 | }); 18 | --------------------------------------------------------------------------------