|
| 1 | +# 3dFolio |
| 2 | + |
| 3 | +3D Developer PortFolio using React Three Fiber |
| 4 | + |
| 5 | +### Things to Provide |
| 6 | + |
| 7 | +* **public** |
| 8 | + - desktop_pc model |
| 9 | + - planet model |
| 10 | + - logo |
| 11 | +* **assets** - contains other icons and images of the application |
| 12 | +* **index.css** - some gradient and loader styles including the links for font family |
| 13 | +* **tailwind.config.cjs** - contains color, screen, boxShadow and backgroundImage configurations |
| 14 | +* **style.js** - contains reusable style object |
| 15 | +* **utils/motion.js** - contains animations variants using Framer Motion |
| 16 | +* **constants** - contains dummy data required for the application |
| 17 | + |
| 18 | + |
| 19 | +### Setup |
| 20 | + |
| 21 | +* Create react project using vite |
| 22 | + ```shell |
| 23 | + npm create vite@latest 3dFolio -- --template react |
| 24 | + ``` |
| 25 | +* Install [tailwind using PostCSS](https://tailwindcss.com/docs/installation/using-postcss) |
| 26 | +* Download below packages for React Three Fiber setup |
| 27 | + ```shell |
| 28 | + npm i three @react-three/fiber @react-three/drei maath |
| 29 | + ``` |
| 30 | + - [three](https://www.npmjs.com/package/three): 3D threejs library |
| 31 | + - [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber): React renderer for threejs library |
| 32 | + - [@react-three/drei](https://www.npmjs.com/package/@react-three/drei): Useful addons for react three fiber. Provides prebuilt components |
| 33 | + - [maath](https://github.com/pmndrs/maath): collection of useful math helpers, random generators, bits and bobs. Mostly meant to be used with three.js. We're using it for random star generation |
| 34 | +* Additional packages |
| 35 | + - [react-tilt](https://www.npmjs.com/package/react-tilt): For the card hover effect. This uses older version of React.js. From here on we'll have to use |
| 36 | + ```shell |
| 37 | + npm i --legacy-peer-deps |
| 38 | + ``` |
| 39 | + This will be the installation command for deployment as well |
| 40 | + - [react-vertical-timeline-component](https://www.npmjs.com/package/react-vertical-timeline-component): For work experience timeline |
| 41 | + - [@emailjs/browser](https://www.npmjs.com/package/@emailjs/browser) - Emailjs SDK |
| 42 | + - Other two are [framer-motion](https://www.npmjs.com/package/framer-motion) & [react-router-dom](https://www.npmjs.com/package/react-router-dom) |
| 43 | + |
| 44 | + |
| 45 | +### Notes |
| 46 | + |
| 47 | +* **desktop_pc model** |
| 48 | + - SketchFab - Download [GLTF file](https://sketchfab.com/3d-models/gaming-desktop-pc-d1d8282c9916438091f11aeb28787b66) |
| 49 | + - In the textures folder, we can replace any images with our own. We changed two images: |
| 50 | + - Material_baseColor.jpeg: We used Fabric Felt Texture from [here](https://www.textures.com/download/PBR0294/134376) |
| 51 | + - Material.074_30_baseColor.png |
| 52 | +* **planet model** |
| 53 | + - SketchFab - Download [GLTF file](https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70) |
| 54 | + - People can change the texture of the model by replacing images in textures folder with their own |
| 55 | +* **hoc/SectionWrapper** |
| 56 | + - A HOC that will handle the layout of each section with animation and padding styles |
| 57 | +* [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) |
| 58 | + - Returns a new MediaQueryList object that can then be used to determine if the document matches the media query string |
| 59 | + - In the hero section, we utilize this to detect the device's screen size and subsequently render the canvas accordingly. |
| 60 | + - Read: [Why window.matchMedia is better than window.resize](https://webdevetc.com/blog/matchmedia-events-for-window-resizes/) |
| 61 | +* Contact Form |
| 62 | + - Create a .env file and add these variables from Emailjs Dashboard |
| 63 | + ```bash |
| 64 | + VITE_APP_EMAILJS_PUBLIC_KEY="" |
| 65 | + VITE_APP_EMAILJS_SERVICE_ID="" |
| 66 | + VITE_APP_EMAILJS_TEMPLATE_ID="" |
| 67 | + ``` |
| 68 | + - Do gitignore the env file |
| 69 | +* Canvas Loader |
| 70 | + - To display a loading animation and the percentage of the progress of loading the 3D model. |
| 71 | + - **useProgress** hook get the progress of loading the 3D model |
| 72 | + - **HTML** component of drei allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically. [Read](https://github.com/pmndrs/drei#html) |
| 73 | +
|
| 74 | +### Canvas |
| 75 | +
|
| 76 | + - **frameloop**: This prop sets the animation loop mode for the scene. The value 'demand' indicates that the loop will only run when necessary, based on changes to the scene. |
| 77 | + - **shadows**: This prop enables shadows in the scene. |
| 78 | + - **dpr**: This prop sets the device pixel ratio for the scene. The value [1, 2] indicates that the scene should be rendered at two different resolutions, depending on the device's pixel ratio. |
| 79 | + - **camera**: This prop sets the position and field of view (FOV) for the camera used to view the scene. |
| 80 | + - **gl**: This prop sets options for the WebGL renderer used to render the scene, including preserveDrawingBuffer, which ensures that the contents of the canvas can be saved as an image. |
| 81 | + - The **Suspense** component is used to handle asynchronous loading of resources, such as 3D models, textures, and shaders |
| 82 | + - The **fallback** prop sets the component to render while the resources are loading. |
| 83 | + - The **OrbitControls** component is a utility component that provides mouse and touch controls for navigating the 3D scene. |
| 84 | + - **Preload** component preloads all resources used in the scene, including 3D models, textures, and shaders. This can help to ensure smooth performance during rendering by avoiding delays due to resource loading. |
| 85 | + - **useGLTF** is a hook to load 3D model from drei library |
| 86 | + - **primitive** renders the 3D model. Its props are: |
| 87 | + - object: model scene |
| 88 | + - scale: size of the model |
| 89 | + - position: determines position of the model |
| 90 | + - rotation: determines rotation of the model |
| 91 | + You can pass all positions as an array of points or by separately: |
| 92 | + ```javascript |
| 93 | + <primitive |
| 94 | + position={[0,1,1]} |
| 95 | + /> |
| 96 | + |
| 97 | + // or |
| 98 | + <primitive |
| 99 | + position-y={1} |
| 100 | + position-z={1} |
| 101 | + /> |
| 102 | + ``` |
| 103 | + By default the position points to the origin i.e., [0,0,0] |
| 104 | + - **mesh**: Represents a 3D geometery. You can use props such as position, rotation, and scale to transform the entire object as needed. |
| 105 | + - There are several [types of lights available in Three.js](https://threejs.org/docs/#api/en/lights/AmbientLight): |
| 106 | + - **AmbientLight**: This type of light is used to create general illumination in a scene. It illuminates all objects in the scene equally and does not cast shadows. |
| 107 | + - **PointLight**: A point light illuminates objects from a single point in all directions. It can cast shadows and can be used to create a sense of volume and depth in a scene. |
| 108 | + - **DirectionalLight**: A directional light illuminates objects from a specific direction. It is similar to sunlight and can be used to create shadows that appear parallel. |
| 109 | + - **SpotLight**: A spot light illuminates objects within a cone-shaped area. It can be used to create a spotlight effect and can cast shadows. |
| 110 | + - **HemisphereLight**: A hemisphere light illuminates objects with different colors from two opposite directions. |
| 111 | + |
| 112 | + |
| 113 | +#### Ball Canvas |
| 114 | + |
| 115 | +Canvas created for tech section |
| 116 | + |
| 117 | +* **Float**: Applies floating animation to the 3D object |
| 118 | +* **castShadow** and **receiveShadow** enable the sphere to both cast and receive shadows |
| 119 | +* **icosahedronGeometry** component is used to define the shape of the sphere. One of the geometry of three.js. Check all possible geometry shapes [here](https://threejs.org/docs/#api/en/geometries/BoxGeometry) |
| 120 | +* **meshStandardMaterial** component is used to apply a standard material to the sphere. A flat shading effect means that the surface of the sphere appears smooth and not curved. |
| 121 | +* **Decal**: A special type of texture that can be applied to a 3D mesh to create the appearance of a sticker or decal on its surface. |
| 122 | +* **useTexture**: A hook that allows you to load one or more textures |
| 123 | + |
| 124 | +#### Stars Canvas |
| 125 | + |
| 126 | +Contact section stars |
| 127 | + |
| 128 | +* state contains a 5000 element Float32Array of random points that lie within a sphere with a radius of 1.2: |
| 129 | + ```javascript |
| 130 | + const [sphere] = useState(() => |
| 131 | + random.inSphere(new Float32Array(5000), { radius: 1.2 }) |
| 132 | + ); |
| 133 | + ``` |
| 134 | +* **useFrame** hook updates the rotation of the ref.current object on every frame |
| 135 | + ```javascript |
| 136 | + useFrame((state, delta) => { |
| 137 | + ref.current.rotation.x -= delta / 10; |
| 138 | + ref.current.rotation.y -= delta / 15; |
| 139 | + }); |
| 140 | + ``` |
| 141 | +* **group**: Allows multiple 3D objects to be grouped together and transformed as a single unit |
| 142 | +* **Points**: Renders a set of points in 3D space |
| 143 | + - **stride**: specifies the number of values in the positions array that make up a single point. For ex., stride(3) means each point is defined by three values (x, y, and z) |
| 144 | + - **frustumCulled**: frustum culling is a technique used to improve rendering performance by not rendering objects that are outside of the camera's view frustum. |
| 145 | +* **PointMaterial**: sets the material properties for each point rendered by the Points component |
| 146 | + - **sizeAttenuation**: Size attenuation causes points that are farther away from the camera to appear smaller. |
| 147 | + - **depthWrite**: Depth writing determines whether or not the rendered points will write to the depth buffer, which affects the rendering order of objects in 3D space. |
| 148 | + |
| 149 | + |
0 commit comments