import Head from 'next/head' ; import Link from 'next/link' ; import styles from '../styles/Home.module.css' ; import HomepageScene from './HomepageScene' ; export default function Home ( ) { return ( < div className = { styles . container } > < Head > < title > Three . js Fundamentals ( React Three Fiber Version ) < /title> < link rel = "icon" href = "/favicon.ico" / > < meta property = "og:url" content = "https://github.com/belaklubos/three-js-fundamentals-r3f" key = "ogurl" / > < meta property = "og:image" content = "/static/images/homepage-og-image.png" key = "ogimage" / > < meta property = "og:site_name" content = "Three.js Fundamentals (R3F Version)" key = "ogsitename" / > < meta property = "og:title" content = "Three.js Fundamentals (React Three Fiber Version)" key = "ogtitle" / > < meta property = "og:description" content = "Recreation of the Three.js Fundamentals in react-three-fiber renderer" key = "ogdesc" / > < /Head> < HomepageScene zoomSpeed = { 0.25 } / > < main className = { styles . main } > < svg className = { styles . heading } fill = "white" height = "221" viewBox = "0 0 764 221" width = "764" > < title > Three . js Fundamentals < /title> < path d = "M25.48 87H36.28V10.68H61.36V0.839993H0.4V10.68H25.48V87ZM70.3422 87H80.9022V44.88H91.5822C91.5822 36 95.7822 32.4 103.822 32.4C111.862 32.4 115.342 35.88 115.342 44.16V87H125.902V44.16C125.902 31.8 117.142 23.04 105.262 23.04C96.9822 23.04 89.9022 27.72 85.5822 36H80.9022V0.839993H70.3422V87ZM140.598 87H151.158V48.72H163.038C163.038 39 166.278 36.36 173.478 36.36H180.798V23.04C163.398 23.16 157.518 34.32 155.958 39.84H151.158V24.24H140.598V87ZM212.746 88.2C224.506 88.2 236.506 79.56 240.706 67.68H228.466C227.506 75.48 222.826 78.84 212.746 78.84C200.026 78.84 194.626 73.8 194.626 61.56V58.8H240.946V54.36C240.946 36.72 228.586 23.04 212.746 23.04C195.706 23.04 182.866 37.92 182.866 56.88C182.866 75.24 195.586 88.2 212.746 88.2ZM194.626 49.92V48.6C194.626 37.32 200.386 32.4 212.866 32.4C224.746 32.4 229.186 37.08 229.186 48.36V49.92H194.626ZM278.666 88.2C290.426 88.2 302.426 79.56 306.626 67.68H294.386C293.426 75.48 288.746 78.84 278.666 78.84C265.946 78.84 260.546 73.8 260.546 61.56V58.8H306.866V54.36C306.866 36.72 294.506 23.04 278.666 23.04C261.626 23.04 248.786 37.92 248.786 56.88C248.786 75.24 261.506 88.2 278.666 88.2ZM260.546 49.92V48.6C260.546 37.32 266.306 32.4 278.786 32.4C290.666 32.4 295.106 37.08 295.106 48.36V49.92H260.546ZM326 87.84C330.92 87.84 334.52 84.24 334.52 79.32C334.52 74.28 330.92 70.68 326 70.68C321.08 70.68 317.48 74.28 317.48 79.32C317.48 84.24 321.08 87.84 326 87.84ZM334.919 112.44H342.119C352.079 112.44 359.879 105 359.879 95.76V24.24H349.319V98.16C349.319 101.28 347.639 102.96 344.519 102.96H334.919V112.44ZM354.599 16.44C359.159 16.44 362.639 12.96 362.639 8.28C362.639 3.48 359.159 0.119996 354.599 0.119996C349.919 0.119996 346.439 3.48 346.439 8.28C346.439 12.96 349.919 16.44 354.599 16.44ZM398.433 88.2C412.473 88.2 423.273 78.84 423.273 68.28C423.273 58.8 416.553 52.32 405.153 51.12L393.633 49.92C387.393 49.32 384.753 47.16 384.753 42.72V40.32C384.753 34.8 388.713 32.4 397.833 32.4C407.553 32.4 411.033 35.04 411.393 42.96H422.553C420.993 30.48 410.313 23.04 397.593 23.04C384.993 23.04 374.073 32.28 374.073 42.6C374.073 52.2 380.313 58.56 391.593 59.76L403.353 60.96C409.953 61.68 412.713 63.6 412.713 68.04V70.68C412.713 76.2 408.273 78.84 398.193 78.84C387.393 78.84 383.553 76.32 383.073 68.28H371.913C373.233 80.04 383.913 88.2 398.433 88.2ZM7.84 219H18.64V181.68H51.4V172.08H18.64V142.32H55V132.84H7.84V219ZM82.2625 220.2C90.1825 220.2 96.7825 215.52 100.863 207.24H105.422V219H115.983V156.24H105.422V198.36H94.7425C94.7425 207.24 91.0225 210.84 83.7025 210.84C76.3825 210.84 73.2625 207 73.2625 197.88V156.24H62.7025V197.88C62.7025 210.96 70.9825 220.2 82.2625 220.2ZM131.575 219H142.135V176.88H152.815C152.815 168 156.895 164.4 164.815 164.4C172.735 164.4 176.095 167.88 176.095 176.16V219H186.655V176.16C186.655 163.8 178.015 155.04 166.255 155.04C158.095 155.04 151.015 159.72 146.815 168H142.135V156.24H131.575V219ZM223.925 220.08C232.085 220.08 240.365 214.8 244.205 207.12H249.005V219H259.565V132.84H249.005V168H244.205C240.365 160.32 232.085 155.04 223.925 155.04C208.685 155.04 196.925 170.88 197.045 187.56C196.925 204.24 208.685 220.08 223.925 220.08ZM223.805 210.72C213.245 210.72 208.805 205.2 208.805 192.24V182.88C208.805 169.92 213.245 164.4 223.805 164.4C233.165 164.4 237.725 168.72 238.565 176.88H249.005V198.24H238.565C237.725 206.4 233.165 210.72 223.805 210.72ZM291.454 220.2C298.654 220.2 304.654 216.84 308.494 211.08H313.294V219H323.854V178.08C323.854 163.2 314.134 155.04 299.494 155.04C285.814 155.04 275.254 163.44 273.094 177.48H283.894C284.374 166.8 287.854 164.4 299.134 164.4C310.054 164.4 313.294 166.92 313.294 177.48V183.12H295.294C281.014 183.12 271.534 190.68 271.534 201C271.534 211.8 279.694 220.2 291.454 220.2ZM293.254 210.84C285.694 210.84 282.934 208.32 282.934 202.44V199.08C282.934 194.4 285.694 192 292.534 192H313.294V202.2H305.134C304.414 207.84 300.814 210.84 293.254 210.84ZM338.477 219H349.037V175.68H359.717C359.717 167.64 363.317 164.4 370.517 164.4C377.597 164.4 380.597 167.52 380.597 174.96V219H391.157V175.68H400.637C400.637 167.64 404.237 164.4 411.437 164.4C418.517 164.4 421.517 167.52 421.517 174.96V219H432.077V174.96C432.077 163.32 423.917 155.04 412.877 155.04C405.197 155.04 398.597 159.24 394.637 166.8H389.717C386.957 159.6 380.357 155.04 371.957 155.04C364.277 155.04 357.677 159.24 353.717 166.8H349.037V156.24H338.477V219ZM472.382 220.2C484.142 220.2 496.142 211.56 500.342 199.68H488.102C487.142 207.48 482.462 210.84 472.382 210.84C459.662 210.84 454.262 205.8 454.262 193.56V190.8H500.582V186.36C500.582 168.72 488.222 155.04 472.382 155.04C455.342 155.04 442.502 169.92 442.502 188.88C442.502 207.24 455.222 220.2 472.382 220.2ZM454.262 181.92V180.6C454.262 169.32 460.022 164.4 472.502 164.4C484.382 164.4 488.822 169.08 488.822 180.36V181.92H454.262ZM512.036 219H522.596V176.88H533.276C533.276 168 537.356 164.4 545.276 164.4C553.196 164.4 556.556 167.88 556.556 176.16V219H567.116V176.16C567.116 163.8 558.476 155.04 546.716 155.04C538.556 155.04 531.476 159.72 527.276 168H522.596V156.24H512.036V219ZM605.974 219.6H614.374V210.12H604.774C599.974 210.12 597.574 207.72 597.574 202.92V165.12H615.574V156.24H597.574V132.84H587.014V156.24H573.334V165.12H587.014V201.72C587.014 212.4 594.574 219.6 605.974 219.6ZM642.736 220.2C649.936 220.2 655.936 216.84 659.776 211.08H664.576V219H675.136V178.08C675.136 163.2 665.416 155.04 650.776 155.04C637.096 155.04 626.536 163.44 624.376 177.48H635.176C635.656 166.8 639.136 164.4 650.416 164.4C661.336 164.4 664.576 166.92 664.576 177.48V183.12H646.576C632.296 183.12 622.816 190.68 622.816 201C622.816 211.8 630.976 220.2 642.736 220.2ZM644.536 210.84C636.976 210.84 634.216 208.32 634.216 202.44V199.08C634.216 194.4 636.976 192 643.816 192H664.576V202.2H656.416C655.696 207.84 652.096 210.84 644.536 210.84ZM689.758 219H700.318V132.84H689.758V219ZM738.872 220.2C752.912 220.2 763.712 210.84 763.712 200.28C763.712 190.8 756.992 184.32 745.592 183.12L734.072 181.92C727.832 181.32 725.192 179.16 725.192 174.72V172.32C725.192 166.8 729.152 164.4 738.272 164.4C747.992 164.4 751.472 167.04 751.832 174.96H762.992C761.432 162.48 750.752 155.04 738.032 155.04C725.432 155.04 714.512 164.28 714.512 174.6C714.512 184.2 720.752 190.56 732.032 191.76L743.792 192.96C750.392 193.68 753.152 195.6 753.152 200.04V202.68C753.152 208.2 748.712 210.84 738.632 210.84C727.832 210.84 723.992 208.32 723.512 200.28H712.352C713.672 212.04 724.352 220.2 738.872 220.2Z" / > < /svg> < h2 className = { styles . subheading } > < svg className = { styles . asterisk } viewBox = "0 0 256 256" > < line x1 = "128" y1 = "40" x2 = "128" y2 = "216" > < /line> < line x1 = "51.78976" y1 = "84" x2 = "204.21024" y2 = "172" > < /line> < line x1 = "51.78976" y1 = "172" x2 = "204.21024" y2 = "84" > < /line> < /svg> React Three Fiber Version < /h2> < section className = { styles . grid } > < Link href = "/01-fundamentals" > < a className = { styles . card } > < h3 > Fundamentals < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/02-primitives" > < a className = { styles . card } > < h3 > Primitives < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/03-scenegraph" > < a className = { styles . card } > < h3 > Scenegraph < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/04-textures" > < a className = { styles . card } > < h3 > Textures < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/05-lights" > < a className = { styles . card } > < h3 > Lights < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/06-cameras" > < a className = { styles . card } > < h3 > Cameras < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/07-shadows" > < a className = { styles . card } > < h3 > Shadows < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/08-fog" > < a className = { styles . card } > < h3 > Fog < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/09-render-targets" > < a className = { styles . card } > < h3 > Render Targets < /h3> < p > Enter → < /p> < /a> < /Link> < Link href = "/10-custom-geometry" > < a className = { styles . card } > < h3 > Custom Geometry < /h3> < p > Enter → < /p> < /a> < /Link> < /section> < /main> < /div>); }