├── README.md ├── src ├── images │ ├── map.jpg │ ├── blur-layer.webp │ ├── hero-wave.svg │ ├── mountain4.svg │ ├── mountain5.svg │ ├── mountain2.svg │ ├── mountain1.svg │ └── mountain3.svg ├── styles.css ├── index.js ├── components │ ├── AnimatedSphere.js │ ├── Box.js │ ├── TextSection.js │ ├── Background.js │ └── Iphone.js └── App.js ├── public ├── iphone.gltf └── index.html ├── .codesandbox └── workspace.json └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # tekito2 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /src/images/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaaaaaaaaaaai/tekito2/main/src/images/map.jpg -------------------------------------------------------------------------------- /src/images/blur-layer.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaaaaaaaaaaai/tekito2/main/src/images/blur-layer.webp -------------------------------------------------------------------------------- /public/iphone.gltf: -------------------------------------------------------------------------------- 1 | https://uploads.codesandbox.io/uploads/user/007827f0-5496-46fa-9529-5def5fbe281a/oPE_-iphone.gltf -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | 6 | * { 7 | margin: 0; 8 | } 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /src/images/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/AnimatedSphere.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MeshDistortMaterial, Sphere } from "@react-three/drei"; 3 | 4 | export default function AnimatedSphere() { 5 | return ( 6 | 7 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Box.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useLoader } from "@react-three/fiber"; 3 | import { TextureLoader } from "three/src/loaders/TextureLoader"; 4 | 5 | import texture from "../images/map.jpg"; 6 | 7 | export default function Box() { 8 | const colorMap = useLoader(TextureLoader, texture); 9 | 10 | return ( 11 | 12 | 13 | 14 | {/* */} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/images/mountain4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "threejs-final", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@react-three/drei": "7.27.1", 9 | "@react-three/fiber": "7.0.21", 10 | "react": "17.0.2", 11 | "react-dom": "17.0.2", 12 | "react-scripts": "4.0.0", 13 | "styled-components": "5.3.3", 14 | "three": "0.135.0" 15 | }, 16 | "devDependencies": { 17 | "@babel/runtime": "7.13.8", 18 | "typescript": "4.1.3" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } -------------------------------------------------------------------------------- /src/images/mountain5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/TextSection.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export default function TextSection() { 4 | return ( 5 | 6 | Three.js in React 7 | 8 | Bring your website to life with beautiful 3D objects 9 | 10 | 11 | ); 12 | } 13 | 14 | const Wrapper = styled.div` 15 | position: relative; 16 | max-width: 380px; 17 | display: grid; 18 | gap: 20px; 19 | text-align: center; 20 | margin: 0 auto; 21 | padding: 140px 20px 100px; 22 | `; 23 | 24 | const Title = styled.h1` 25 | color: rgba(255, 255, 255, 1); 26 | font-style: normal; 27 | font-weight: bold; 28 | font-size: 40px; 29 | `; 30 | 31 | const Description = styled.p` 32 | max-width: 240px; 33 | color: rgba(255, 255, 255, 0.7); 34 | font-style: normal; 35 | font-weight: normal; 36 | font-size: 17px; 37 | line-height: 130%; 38 | margin: 0 auto; 39 | `; 40 | -------------------------------------------------------------------------------- /src/images/mountain2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/mountain1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/mountain3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Suspense } from "react"; 2 | import "./styles.css"; 3 | import styled from "styled-components"; 4 | 5 | import { Canvas } from "@react-three/fiber"; 6 | import { OrbitControls } from "@react-three/drei"; 7 | 8 | import Background from "./components/Background"; 9 | import TextSection from "./components/TextSection"; 10 | 11 | import Box from "./components/Box"; 12 | import AnimatedSphere from "./components/AnimatedSphere"; 13 | import Iphone from "./components/Iphone"; 14 | 15 | export default function App() { 16 | return ( 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 | const Wrapper = styled.div` 48 | position: relative; 49 | background: #1f1144; 50 | 51 | canvas { 52 | height: 500px; 53 | } 54 | `; 55 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/Background.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | import mountain1 from "../images/mountain1.svg"; 5 | import mountain2 from "../images/mountain2.svg"; 6 | import mountain3 from "../images/mountain3.svg"; 7 | import mountain4 from "../images/mountain4.svg"; 8 | import mountain5 from "../images/mountain5.svg"; 9 | import heroWave from "../images/hero-wave.svg"; 10 | import blurLayer from "../images/blur-layer.webp"; 11 | 12 | export default function HeroBackground() { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | const Wrapper = styled.div` 27 | position: absolute; 28 | width: 100%; 29 | height: 1300px; 30 | background: linear-gradient(180deg, #322d6d 6.33%, #663182 39.13%); 31 | text-align: center; 32 | overflow: hidden; 33 | `; 34 | 35 | const Wave = styled.div` 36 | position: absolute; 37 | width: 100%; 38 | background-position: top center; 39 | background-repeat: no-repeat; 40 | background-size: 100%; 41 | 42 | @media (max-width: 1440px) { 43 | background-size: 1440px; 44 | } 45 | `; 46 | 47 | const Wave1 = styled(Wave)` 48 | top: 190px; 49 | height: 446px; 50 | background-image: url(${mountain1}); 51 | `; 52 | 53 | const Wave2 = styled(Wave)` 54 | top: 160px; 55 | height: 464px; 56 | background-image: url(${mountain2}); 57 | `; 58 | 59 | const Wave3 = styled(Wave)` 60 | top: 347px; 61 | height: 408px; 62 | background-image: url(${mountain3}); 63 | `; 64 | 65 | const Wave4 = styled(Wave)` 66 | top: 466px; 67 | height: 457px; 68 | background-image: url(${mountain4}); 69 | `; 70 | 71 | const Wave5 = styled(Wave)` 72 | top: 450px; 73 | height: 867px; 74 | background-image: url(${mountain5}); 75 | `; 76 | 77 | const Wave6 = styled(Wave)` 78 | top: 700px; 79 | height: 630px; 80 | background-image: url(${heroWave}); 81 | `; 82 | 83 | const BlurLayer = styled(Wave)` 84 | top: 100px; 85 | height: 1503px; 86 | background-image: url(${blurLayer}); 87 | `; 88 | -------------------------------------------------------------------------------- /src/components/Iphone.js: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | author: DatSketch (https://sketchfab.com/DatSketch) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/apple-iphone-13-pro-max-4328dea00e47497dbeac73c556121bc9 6 | title: Apple iPhone 13 Pro Max 7 | */ 8 | 9 | import React, { useRef } from "react"; 10 | import { useGLTF } from "@react-three/drei"; 11 | 12 | export default function Model({ ...props }) { 13 | const group = useRef(); 14 | const { nodes, materials } = useGLTF("/iphone.gltf"); 15 | return ( 16 | 17 | 18 | 19 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 100 | 104 | 108 | 112 | 116 | 120 | 124 | 128 | 132 | 136 | 137 | 138 | 139 | 140 | ); 141 | } 142 | 143 | useGLTF.preload("/iphone.gltf"); 144 | --------------------------------------------------------------------------------