|
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 | | - |
| 1 | +# Build and Deploy a Fantastic 3D Portfolio Website with Three.js and React.js |
| 2 | + |
| 3 | + |
| 4 | +## Introduction |
| 5 | +The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today! |
| 6 | + |
| 7 | +In this course, you'll learn the following: |
| 8 | +- ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model |
| 9 | +- React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React |
| 10 | +- TailwindCSS - a popular utility-first CSS styling framework |
| 11 | +- Framer Motion - the most popular library used to bring your React website to life with animations |
| 12 | +You'll also learn how to: |
| 13 | +- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space. |
| 14 | +- Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices |
| 15 | +- Implement sending emails through a form on the website |
| 16 | +- Ensure responsiveness across all devices and improve your site's performance using Suspense and Preload. |
| 17 | + |
| 18 | +## Stay up to date with new projects |
| 19 | +New major projects coming soon, subscribe to the mailing list to stay up to date https://jsmasterypro.com/newsletter |
0 commit comments