Speaker A
What if I told you that the websites you're building today might become obsolete tomorrow? Sounds scary, right? The future is 3D. With the rapid development of AR and VR headsets like Apple Vision Pro and Meta Quest, you'll get to see
Learn to build and deploy a stunning 3D portfolio using React.js and Three.js with practical demos, deployment tips, and AI coding tools.
Key Takeaways
- 3D web development is becoming essential with the rise of AR/VR technologies.
- Three.js combined with React Three Fiber enables building complex 3D web apps and portfolios.
- Understanding core 3D concepts and practical demos helps solidify learning.
- Deployment and performance optimization are critical for professional portfolios.
- Using advanced tools like WebStorm and Codium can significantly boost development workflow.
What the video covers
- Introduction to the future of 3D websites powered by AR/VR technologies and examples of innovative 3D web experiences.
- Comprehensive beginner-friendly tutorial on Three.js covering theory, demos, and building a modern 3D portfolio.
- Step-by-step guidance on 3D concepts including scenes, geometry, materials, cameras, and lighting.
- Transition from basic HTML, CSS, and JavaScript to building 3D apps using React and React Three Fiber.
- Use of special tools to convert 3D models into JavaScript code for easier integration.
- Detailed walkthrough of portfolio features such as interactive 3D models, project sections, client showcases, and contact forms.
- Focus on responsive design and performance optimization for smooth experience across devices.
- Instructions on deploying the portfolio using Hostinger with a custom domain for instant loading.
- Introduction to WebStorm IDE for enhanced productivity and coding efficiency, sponsored by JetBrains.
- Recommendation of Codium AI tool as a free, powerful alternative to GitHub Copilot for coding assistance.
Chapters
- 00:00Introduction to 3D Web and Future Trends
- 14:39Understanding the Renderer in Three.js
- 30:31Lighting Techniques in Three.js
- 45:14Using Directional Light and Color Properties
- 59:52Adding Orbit Controls and Renderer Settings
- 74:45React Three Fiber and Component Usage
- 88:52Using Themes and Material Icons
- 103:22Project Structure and Constants Setup
- 118:43Loading Textures and Animations
- 135:31Handling User Interaction and Clipboard
Full Transcript — Download SRT & Markdown
Speaker A
more websites like Space, an innovative website that uses 3D aspects to showcase different cursor effects, lightning, and fireworks with the stunning scenes of an astronaut traveling through space, or Juny, a crazy website where this hippol-like animal flies in, breaks the
Speaker A
screen, jumps around, and catches your attention, demonstrating the realistic physics powered by 3js. Or the iconic Apple iPhone website, visited by millions of people, that uses a 3D model by letting users customize their phones. Or even XGS with a cool 3D game they
Speaker A
created for their upcoming conference, where people from anywhere in the world can arrange the 3D blocks across the screen. So why wait? Now is the perfect time to explore the third dimension and develop things that even AI cannot.
Speaker A
Hi there, and welcome to a new video where I'll teach you 3js so that you can build any 3D app you can imagine. You'll also develop and deploy your own modern 3D portfolio to showcase all your future apps and get a job just like this guy
Speaker A
who commented on my last 3D video. The video you're watching right now is even better, making it the ultimate curriculum for learning 3js. First, I'll teach you the theory through interactive graphics and visuals. Second, we'll go through the
Speaker A
demos to ensure that you fully understand what's happening and why. Third, you'll develop your ultimate 3D portfolio to put your skills to the test. And fourth, you'll be able to use these skills to build any 3D app you can
Speaker A
imagine. I'll teach you what 3js is and how it works, and then you'll learn about the 3D world and the concepts it's made of, such as scenes, geometry, materials, cameras, lights, and more. We'll start with the basics: plain HTML, CSS, and JavaScript,
Speaker A
and then we'll transition those skills to building a 3D portfolio in React using React 3 Fiber. I'll even show you a special tool that converts any 3D model into JavaScript code instantly. Just keep watching. Oh, and I'll make
Speaker A
complex concepts super simple to understand by providing you demos you can build and even interactive graphics and visuals. Alongside this video, I've also prepared The Ultimate 3js Guide, which covers a step-by-step roadmap, tips and tricks, and cool project ideas
Speaker A
to take your 3D skills to the next level. The link to this completely free guide is in the description. You'll also have access to an open-source codebase, a custom Figma design, and a Discord server with a dedicated 3D portfolio channel to
Speaker A
help you if you get stuck. All those things are free, so grab them from the links below while I tell you more about the modern 3D portfolio you'll build in this course, featuring a cool hero section with the main 3D desktop model
Speaker A
that shifts direction as you move your cursor, multiple mini 3D models floating around through the section. Next, we have a Bento grid layout, which you can see on many popular websites such as Clerk, Supabase, or OIT, which displays your
Speaker A
info, text stack, time zone, passion, and email. It's amazing how everything fits together. Next, we have an incredible project section, and as you switch between them, each appears within an interactive 3D model. The best part: you can also include a video there. I'll show
Speaker A
you how to do that later. Next, we have a client section and another 3D area highlighting your work experience. As you hover over each experience, the model responds. Pretty cool, right? Finally, we have a contact form with a terminal
Speaker A
design through it. You can receive emails from people who just admire your portfolio or that want to hire you. They'll just type a message, get a success notification, and you can check your email, receive it, and celebrate. You'll also know,
Speaker A
nice, a short and sweet footer section where you can link your socials. Everything is fully responsive and works seamlessly on mobile devices. I've also prioritized performance to ensure your portfolio runs smoothly anywhere. But it isn't really your portfolio without your name, right? That's
Speaker A
why later on, I'll teach you how to use Hostinger to deploy your 3D portfolio on your custom domain and ensure it loads instantly. To make the development of your app even more productive, I'll introduce you to an IDE you didn't
Speaker A
know you needed. WebStorm is a professional JavaScript and TypeScript IDE that will make you so efficient you'll be asking yourself, what was I doing with my life before this? JetBrains reached out to sponsor this video, and it was a no-brainer as I've been
Speaker A
using it within my project anyway. WebStorm has become an essential part of my workflow. I can't wait to share everything it can do. It has a smart terminal with auto suggestions, TypeScript type suggestions, code completions, automatic bug fixes,
Speaker A
one-click refactoring, speed search, and an integrated Git and GitHub system. And here's the best part: clicking the link in the description will give you free 19-day access. But we won't stop there. I'll also teach you how to use a great
Speaker A
AI tool, Codium. It outperforms GitHub Copilot, is completely free for individuals, offers all the features of GitHub Copilot and more. Enterprises like Atlan, CodeSandbox, and even MongoDB use it as their coding AI assistant. Oh, and did I forget to mention that it's
Speaker A
completely free? Click the special link below to get it. So now that you're all powered up and ready to go, let's dive right in. Everything begins with dimensions, which allow us to define the space around us. This concept goes back
Speaker A
to ancient geometry and the work of great mathematicians. But don't worry, I won't turn this into a math lesson. I know you're here for the 3js course. Still, it's important to understand the basics because 3js uses some math and
Speaker A
some physics you maybe didn't like in school and wondered why you needed them. Honestly, you don't need to know much, only some of it. So it's good you're here, as I'll teach you only the most essential things you need to know
Speaker A
without any extra fluff in the simplest possible way so you can build any 3D app you can imagine. So let's dive into dimensions. While Doctor Strange might know many, we mere humans still only recognize four different dimensions. The
Speaker A
zero dimension is a point with no size, like a single dot on a map. The first dimension is a line with no width or height. The second dimension is a shape with length and width but no depth, like
Speaker A
a sheet of paper or those 2D games like Super Mario or Street Fighter we used to play as kids. The third dimension is a space where shapes or objects have length, width, and depth, giving them volume. Humans are 3D shapes; we have
Speaker A
height, width, and depth. Unlike 2D graphics, 3D graphics provide a much more realistic and immersive experience with many more elements. And finally, there's the fourth dimension. Can you guess what it is? It's time. Time is the fourth dimension we use alongside length, width,
Speaker A
and height. Examples are animation and video games where a 3D object changes shape or position over time, or lowkey using the tessera. That's it. There are no more dimensions at this point. Maybe new ones emerge in the future, but for now,
Speaker A
we're good. Talking about 3D graphics, they're fairly new. In the 1980s, CGI or computer-generated graphics was first used for 3D renderings in movies and simulations. A decade later, the graphics industry advanced 3D technology by creating APIs like OpenGL, which offered a
Speaker A
more standardized way for rendering 3D graphics. In the early 2000s, 3D graphics became so popular that there was a strong push to integrate them into web browsers. Then WebGL's revolution in rendering 3D objects on the web began in
Speaker A
the early 2010s. It allows us to render 3D graphics directly into web browsers using JavaScript. WebGL is super impressive, but developing applications requires immense 3D graphics knowledge and many lines of code. You'd need hundreds of lines of code just to create
Speaker A
a simple 3D cube in WebGL. I mean, just look at this. It feels lik
Speaker A
library built on top of webg that simplifies the development of 3D objects I spoke with him at a recent Dev conference where he shared how the 3D development field will advance and its immense role in the future of the web
Speaker A
but more in that later in simple words 3js is an extra layer that spares us from dealing with the complexities of webgl while still achieving the same results it's similar to what Tailwind CSS is to CSS providing utilities that
Speaker A
compile into pure CSS code in the same way in 3js we use a specific syntax that gets converted into webg code this code is then translated into opengl and interacts with the GPU to render scenes on your screen so what exactly is
Speaker A
3js as we said it's a JavaScript library and an API built on top of webgl enabling us to create 3D graphics for the web but what exactly does 3js offer what are its main building blocks and in technical terms what kinds of apis does
Speaker A
it provide how can you use it that's a lot of questions so let's break them down one by one have you seen Doctor Strange a doctor turned sorcerer who manipulates different dimensions while battling enemies in the movie there's a
Speaker A
concept of a mirror Dimension where the hero and enemies battle without the rest of the world being aware 3js works much like that you create an environment and a scene through code shaping it with your own rules it's your virtual world
Speaker A
where everything you want to visualize comes to life but don't mix up the environment and the scene they are similar but not exactly the same the scene refers to the overall container or space where all the action happens for
Speaker A
example our planet is a big scene where we live and do all sorts of things the environment refers to the surrounding atmosphere or backdrop within the scene it's like the sky that surrounds us as Doctor Strange moves between different
Speaker A
dimensions you can create distinct scenes that separate 3D worlds or sections within your application for example you could have one scene for the hero section and another for the footer each scene is like its own Dimension that is is typically rendered separately
Speaker A
we can have multiple changing environments within a single scene for instance you might want to switch from a day to a night or from a sunny to a rainy environment while the scenes remain the same the environment gives it
Speaker A
a different feel this concept can further be extended into AR and VR with ar you can overlay 3D objects onto the real world while VR immerses user into a fully virtual environment using a VR headset like apple vision and Mr Dube
Speaker A
the creator of 3js sees a lot of potential in that technology when it comes to 3D development now that we are in a 3js scene we need to make it our own with the help of objects just like
Speaker A
we do in the real world take a look around yourself what can you see a table a laptop the chair you're sitting on the keyboard you're typing on and even the walls forming the room you're within are a small objects these objects are the
Speaker A
building blocks of our 3D scene we can place cubes and other shapes with different colors and textures or even better leverage Community built models in the scene and play around with them with a scene in place and elements added
Speaker A
the next step is to make it interactive and dynamic and that's where animations come in we can transform an object's position making it animate from one position to another or change its size or angle by rotating it or adding cool
Speaker A
textures to objects through colors or images to make these even more realistic 3js allows us to add lights and shadows you can add them either on the entire 3D scene or individual 3D elements we'll cover lights in detail later on so make
Speaker A
sure to continue watching but none of the scenes objects or lights matter if we cannot see the scene and that's why we have cameras our eyes in the 3D World Without a camera you wouldn't be able to see the scene that you've created the
Speaker A
camera in 3js decides which portions of the 3D scene are visible to the viewer much like a director chooses the angle and perspectives the audience sees in a movie like in the real world in 3js you can choose from multiple cameras that
Speaker A
offer different perspectives on your 3D scene for example in a game you might want to use a f firsters camera for one section and a third person camera for another or you might want to switch between a wide angle View and a close-up
Speaker A
view to show an object within the same scene sometimes you can use the main camera to provide a bird's eye view of the entire scene and another to zoom in and make the object appear larger think of 3js cameras as your eyes they allow
Speaker A
you to see the world around you okay you with me so far but then what do we do with the information that our eyes give us we pass it over to our brain to process it so what would be the brain in
Speaker A
3js it's the renderer in doctor strange after all the special effects and CGI work a renderer brings everything together into the final product you see on the screen similarly in 3js the renderer takes the 3D scene the environment objects lighting everything
Speaker A
with discuss so far and based on the camera's perspective calculates how everything should look like when projected onto your 2D screen it processes every pixel and determines its color lightning shadows and more to produce that final image without the
Speaker A
renderer all the objects lights and cameras wouldn't make a difference they must be translated into the pixels on our screen which is exactly what the rendering engine does so to sum it up we start with a scene to define the space
Speaker A
where everything happens then we use a camera to determine the Viewpoint and the perspective of the scene then we use objects to populate the scene with shapes models and other 3D elements with lightning we illuminate the scene so
Speaker A
objects can be seen and appear as real then we update objects over time for dynamic Behavior or movement finally we render the scene by calculating it from the camera's Viewpoint that can be turned into images to be displayed on
Speaker A
your monitor then we display those images and we continue to update and render the scene to make the animations smooth now that you know the basics of 3js and 3D rendering let's dive deeper into the foundational concept 3D objects
Speaker A
a 3D object is anything you can see or interact with in a 3D space there are many different types of 3D objects in 3js each with its own purpose a mesh is the most common type of 3D object it's
Speaker A
made by combining geometry and a material for example a cube in 3js is created by combining a a box geometry with a material and turning it into a mesh more on this later as it's super important points are another type of 3D
Speaker A
object and they're a collection of small dots in a 3D space often used to create effects like stars or particles a line represents a simple connection between points in a 3D space it's often used to draw shapes grids or wireframes a group
Speaker A
is a collection of multiple objects think of it as a div in HTML which acts as a container to organize different elements it allows us to transform many objects together Sprite a 3D object not a drink is an object that always faces
Speaker A
the camera it means it'll always be visible no matter where we look you can use it for Billboards icons or particles in a scene you might think that lights and cameras are also 3D objects but they're not they are more like separate
Speaker A
entities or tools that influence how 3D objects are seen and you know how everything in JavaScript is an object well that's because everything inherits some basic properties it's the same in 3js all elements I've mentioned like meshes points lines and more start from
Speaker A
the base JavaScript class called object 3D and extend its properties provides a common set of properties and methods for performing Transformations such as changing position rotation and scale for all types of entities in the 3D scene let me show you the most common
Speaker A
properties position refers to where an object is located in the 3D world it's described using three numbers x y and z x axis moves the object left or right y AIS moves the object up or down and z-axis moves the object closer or
Speaker A
farther away from you rotation refers to how an object is turned or spun around in the 3D world you can rotate 3D the objects around the X Y and Z axis like stretching your head xaxis tilts the object forward or backward like nodding
Speaker A
your head y AIS turns the object left or right like shaking your head no and z-axis Spins the objects clockwise or counterclockwise like turning a steering wheel scale refers to how big or small an object is in the 3D World scaling an
Speaker A
object along the X Y and Z axis can make it larger or smaller X controls how wide the object is y controls how tall the object is and Z controls how deep it is you can combine position rotation and
Speaker A
scale to place an object exactly where you want it in the 3D scene Orient it in the desired Direction and size it appropriately now which elements do we want to position rotate and scale to place on the screen
Speaker A
in most cases it'll be the most common type of 3D object a mesh so let's explore it in detail it's a core 3D object when you think of a mesh imagine it as a physical object with a specific
Speaker A
shape and appearance it can be a simple 3D geometric shape that 3js provides or a model created by merging different 3D shapes a mesh is made up of two main parts a geometry and a material so let's let's break them down geometry defines
Speaker A
the shape or structure of a 3D object it can be further explained by its three properties vertices edges and faces vertices are the corner points or positions in 3D space where edges meet each vertex is a point in a space
Speaker A
defined by its coordinates X Y and Z determining where it's located in the 3D World for example a a corner of the cube is one of eight vertices one at Each corner and if I had to put it in simple
Speaker A
words vertices are like the dots or pins you place to Mark the corners of a shape edges on the other hand are the straight lines that connect two vertices they help construct the shape and connect the vertices of a 3D object for example a
Speaker A
cube has 12 lines representing edges that connect different corners or vertices in simple words edges are like the lines you draw between dots to outline the shape of an object and finally we have the faces faces are flat
Speaker A
surfaces that connect vertices to form the geometry of the shape they're made up of multiple vertices and Define the visible surface of the 3D object for example each of the six sides in a cube is a face which is technically a square
Speaker A
formed by connecting four vertices another important Concept in the 3D World regarding geometries is the triangle everything in the 3D world is made up of triangles a cube might seem like it's made of squares but in most 3D
Speaker A
graphic systems including 3js even squares are represented using triangles explaining this further would definitely go beyond the scope of this crash course but I'll make sure to provide a detailed explanation of the importance of triangles in my upcoming 3js course but
Speaker A
if you quickly want to learn a bit more about that triangle thing I'll include a page about it in the free 3js guide linked below and now that you know the foundations of geometry let me show you how you can use them within 3js it
Speaker A
allows you to implement different geometry types straight out of the box if you visit the official 3GS site you'll see 21 types of geometries the most popular are box geometry which creates a rectangle with six faces like a cube but it can have
Speaker A
different dimensions for width height and depth sphere geometry creates a sphere or a globe where we can control the radius in the number of segments that defines the sphere's smoothness and here's a pro tip adding segments increases an object's detail and
Speaker A
flexibility allowing for smoother surfaces and more realistic lightning so why wouldn't we always do it well if you add too many segments they can impact performance so use them wisely cylinder geometry creates a cylinder with a circular base where you can adjust the
Speaker A
height radius and the number of radial segments plane geometry doesn't create a plane that flies but creates a flat 2D plane that extends infinitely into the X and Y directions by specifying its width and height a to forus geometry creates a
Speaker A
donut and then there's a do decahedron geometry what a beautiful name it creates a polyhedron shape with 12 pentagonal faces which is helpful for more complex shapes in 3D modeling and there are many other types of geometries but there's no need to know them just
Speaker A
yet that's because you don't have to be limited by these predefined shapes 3js doesn't stop you you can create custom geometries by defining object's vertices edges and faces directly in the code you can Define them however you want and
Speaker A
create a whole new shape you have full control over every aspect of geometry deciding how it looks deforms and interacts with the rest of the scene creating these custom geometries is different from 3D modeling which refers to creating the objects in a dedicated
Speaker A
3D modeling software like blender or Maya and then importing these models back into 3js more on that in the ultimate 3js course and the guide link below but for now enough with the geometries let's move to the second part of creating a
Speaker A
mesh now that we have a shape we have to wrap it with a nice material a material determines how the surface of the geometry looks it defines the color texture transparency shininess and how light interacts with the mesh it's like
Speaker A
the skin of your 3D objects deciding whether they look metallic glossy matte transparent or textured 3js provides many types of materials we can use depending on the visual effect you want to achieve here are a couple of the most
Speaker A
common ones the simplest material as its name suggests is the mesh basic material it is so basic that it only applies a flat color to an object but it does not interact with light this means that no matter how much light is in the scene
Speaker A
the object will always appear the same mesh Fong material adds shininess and Reflections it simulates glossy surfaces with special highlights making objects look more polished and reflective mesh standard material is a physically based rendering material which means that it more accurately
Speaker A
simulates real world lightning and Reflections it has become a standard in many 3D applications such as Unity or unreal it offers both metallic and roughness controls giving you the ability to create realistic materials like Metals plastic and stone mesh
Speaker A
physical material is an extension of mesh standard material with additional features like clear coats for shiny finishes like on cars Sheen for fabrics and transparency effects it's used when you need to do some more advanced surface effects mesh tune material giv
Speaker A
gives an object a cartoon-like appearance with flat shading and solid colors instead of a smooth gradient of color and light it creates bands of colors giving it that comic book look think of characters in animated films or video games who have solid shading and
Speaker A
don't look photo realistic I mean they don't have to it's just a specific look you can go for and there are many others like mesh normal material metap and depth material and many more but on top of these materials to which you can
Speaker A
apply Color and lights you can also apply Textures in 3js a texture is an image like a JPEG PNG or GIF and yeah it's GIF not a gif or pattern applied to the surface of a 3D object such as a
Speaker A
mesh to give it more visual detail and realism the texture is like a wrapping paper that covers the geometry of a mesh to make it look more interesting or lifelike there are different types of textures such as the fuse normal map
Speaker A
spectral map bump displacement map and so many more of course covering all of these will go beyond what a crash course is supposed to be but of course we'll cover them in the ultimate 3js course so that's it now you know the two main
Speaker A
parts of a mesh when we create a mesh we can combine a specific geometry with a material to create a final appearance but how can we see the objects we've created if they're in the dark so let there be light in 3js light
Speaker A
illuminates the 3D scene making it more realistic and clearer without lights your 3D objects would be completely dark think about it even in real life you don't really see anything around you you see the light that bounces off of the
Speaker A
objects and then back into your eyes giving your brain the information to process their size shape and color different types of Lights provide different effects for example some light shines everywhere like a light bulb While others focus on one spot like a
Speaker A
stage Spotlight or shine in a specific Direction like the Sun so let's learn about different types of Lights first there's the ambient light which provides uniform lightning to all objects in the scene without casting Shadows we played around with some ambient lights on a
Speaker A
mesh material a few minutes ago a real life example of an ambient light would be a cloudy day on such days sunlight is scattered by the clouds so everything around us is lit evenly with no strong Shadows it's soft point light emits
Speaker A
light from a single point in all directions it can create bright spots and shadows around the source think of a light bulb in the middle of the room the light spreads out evenly in all directions making things close to the
Speaker A
bulb appear brighter and things farther away way dimmer Direction light simulates parallel light rays coming from a specific Direction like sunlight it's used to create the effect of a distant light source it's like the sun on a clear day the sunlight comes from
Speaker A
One Direction and objects cast sharp Shadows because the sun is so far away and the light rays are parallel Spotlight emits light in a cone shape similar to a flashlight it's useful for focused lightning effects or creating dramatic Illumination in real life it's
Speaker A
similar to a spotlight on a stage during a performance it shines in a cone shape focusing on one actor or object to create a dramatic effect with clear Shadows hemisphere light provides lightning from above and below the scene
Speaker A
simulating light from the sky I hope that makes sense if not no worries it'll make much more sense when we dive into the code we'll do that soon after we discuss the last missing piece of the puzzle the camera everything everything
Speaker A
we see on the screen in the 3D world comes from the camera's perspective it determines the view of the 3D scene without a camera you wouldn't be able to see any objects in the scene because there would be no Viewpoint from which
Speaker A
to observe them it's pointless like having a stage without an audience there are two main types of cameras in 3js a perspective camera mimics how human eyes see the World objects closer to the camera appear larger and objects further
Speaker A
away appears smaller this is called a perspective projection and it is the most commonly used camera for 3D games simulations and realistic visualizations an orthographic camera removes the perspective effect which means that objects appear the same size no matter
Speaker A
how far from the camera they are this is called an orographic projection and it's useful for certain visualization Styles such as 2D games or architectural blueprints there's also a stereo camera which creates two views of the scene one
Speaker A
for the left eye and one for the right eye to simulate 3D depth this is often used in 3D movies 3D games and VR applications there are also other types of cameras such as cube array cameras and others you can explore all of these
Speaker A
on the 3js docs but in most cases you'll use the main ones but to truly understand how a camera Works in 3js you must know its main properties the first one is the field of view often shortened to fov it refers to the extent of the
Speaker A
observable World visible through the camera at any moment the angle of the camera's Vision measured in degrees determines how wide or narrow the view is imagine holding a camera in your hands if you zoom in your field of view
Speaker A
becomes narrower showing a smaller part of the screen but if you zoom out the the fov becomes wider showing more of the scene field of view is about how much of the scene the camera can see at once how wide your view is a point of
Speaker A
view POV refers to the specific position and angle from which the camera looks at the scene it's like where the eyes of the camera are located and what direction they're facing imagine a firstperson shooter an FPS game there
Speaker A
the point of view equals the Char Char's vision and depends on the direction they're facing in a third person shooter the camera is behind the character's back in simple words point of view is about the camera's position and
Speaker A
Direction Where Are You Looking from the aspect ratio is the ratio between the width and the height of the camera's view it ensures that the objects in the scene aren't stretched or squashed when displayed on the screen when you watch a
Speaker A
movie on a widescreen TV versus a square TV the aspect ratio changes affecting how the content is displayed in 3D this property ensures that objects look natural regardless of screen size and there's also the near and far clipping
Speaker A
planes which Define the boundaries of the camera's view determining how close or far objects can be for the camera to see and render them it improves the performance and controls what part of the scene is shown it's a camera's
Speaker A
viewing range the near clipping plane is the closest distance from the camera at which objects are visible any object closer to the camera than this distance will not be rendered the far clipping plane on the other side is the farthest
Speaker A
distance from the camera at which objects are visible any object Beyond this distance will not be rendered think of it like a tree on a hill in a game that's far away as you get further away it becomes invisible these were the most
Speaker A
important camera properties but while learning the foundations of 3js we learned that the camera and other 3D elements also extend the object 3D class which lets us position rotate and scale it but sometimes that's not enough and that's where camera controls come in
Speaker A
instead of manually setting the camera's position and rotation controls allow us to rotate zoom and Pan the camera dynamically often using mouse or touch inputs these controls are commonly used in interactive 3D scenes such as games simulations and VR experiences 3js
Speaker A
offers a few built-in controls each designed for different types of interactions let's dive into the main ones orbit controls are the most commonly used camera control they allow us to rotate around a Target Point zoom in and out and Pan the view which means
Speaker A
move side to side Orbit Control is great for exploring a 3D scene from different angles while keeping the camera's focus on a central point an example of that is the Apple's website where when you look at the 3D model of an iPhone or a
Speaker A
Macbook you can spin it around to see it from every angle Zoom it in to check out the details and move it slightly to examine it more closely this control lets you interact with the product as if you were holding it in your hands it's
Speaker A
fixed and you're orbiting around it like the Earth orbits around the Sun there are also track B controls which allow for more flexible and free form movement than orbit controls we can rotate around the camera freely zoom in and pan for
Speaker A
example in bior render a platform used by scientist when working with 3D models of cells or molecules you can rotate around them freely zoom in or out and shift around them without being fixed to one point it's like floating around a
Speaker A
model in space to look at it from all sides fly controls simulate movement like that in firstperson Exploration games where the camera moves forward backward and side toide and rotates as if the user is flying through the 3D
Speaker A
World We mainly use fly controls in Exploration games VR environments or simulations where users can fly through the scene for example in Google Earth VR we can soar over cities mountains and oceans this control lets us move as if
Speaker A
we're flying like a bird smoothly gliding through different locations and zooming in to explore areas up close there's also pointer lock control which locks the cursor on the screen and allows the user to look around as if they were in the scene themselves it's
Speaker A
often paired with keyboard controls to move the camera forward backward or side to side in games like Call of Duty the mouse controls where we're looking as we move the mouse our characters view shifts left right up or down just like
Speaker A
turning our heads in real life we use this to aim explore or react quickly in the game and there's also the first person controls which offer a more traditional first-person view where the camera moves in the direction the user
Speaker A
faces it mimics the controls in firstperson video games where we use the keyboard to move and the mouse to look around the pointer lock controls which we explored before are focused primarily on the rotation of the camera using the
Speaker A
mouse but additional code is required to make it work with the keyboard as well but that's not the case with firstperson controls which combine camera rotation and movement in one package it doesn't require locking the mouse pointer offering more flexibility in controlling
Speaker A
the camera in many Real Estate websites you can now virtually walk through a house or a building it's as if we're moving through the rooms ourselves turning our heads stepping forward and exploring the space from the first person perspective you can also check
Speaker A
out 3js docs for more camera controls but I think this is more than enough now that we've covered the essentials of 3js let's put it into practice by creating a simple project using HTML CSS and JavaScript and Infuse it with 3D if you
Speaker A
check out 3js dorg go to documentation and installation you'll notice that there's a couple of different ways to create a 3Gs project the first one is to install it with mpm and a build tool and the second one is to import it from a
Speaker A
CDN we'll start with that one first so you can quickly put 3js to use but then soon enough we'll transition over to the better approach which is to install it with mpm but for the time being let's open up a new project in our code editor
Speaker A
in this case I'm actually using an IDE called webstorm and I've just created a new empty folder within that folder create a new folder and let's call it basic as this is the most basic version of our 3js project within it let's
Speaker A
create a new HTML file I'll call it index.html within there you can simply copy and paste the index HTML from the installation structure as you can see we're importing a main.js file right here so let's create a new file called
Speaker A
main.js which is going to be a Javascript file and we don't need a separate stylesheet rather what we can do is just reset the margin to zero set the padding to zero as well and also set the Box sizing to be equal to border box
Speaker A
and we can set that on all the elements in our code also remove this forward slash so it points to the right main.js file now to infuse our application with 3js functionalities we have to add it via a CDN so simply copy this script and
Speaker A
this will add the code needed to run 3js so let's add it just before the closing body tag and save now let's head over to our main let me show you how to use 3js first let's import everything as three
Speaker A
from three this is the 3js package next I'll add a list of steps we have to perform to show something on the screen and you already know these because we explored them in detail not that long ago but now we're exploring them in code
Speaker A
so how do we create a scene well you say const scene is equal to new 3. scene and you call it as a function next let's also modify the background of a scene by saying scene. background is equal to new 3. color and that's going
Speaker A
to be a hash of F0 F0 F0 just a random heximal color now you can see some warnings right here such as module is not installed the scene doesn't exist and the color doesn't exist either well it's completely normal that our IDE
Speaker A
doesn't know that these actually exist because we're not using a regular package we're just using a CDN so for the time being I will just remove those warnings later on in a react applications everything will work perfectly and you'll know exactly which
Speaker A
properties 3js exposes for us now with that in mind we cannot quite yet see the background color of this scene not until we add the renderer so let's continue with the next few steps the second step is to add a camera and we can do that by
Speaker A
saying con camera is equal to New 3. Perspective camera as you know there's many different types of camera in this case we'll be using a perspective one and this is the first time that you can see that we can pass
Speaker A
some props into the camera so this is what differentiates Theory from actual implementation in Hands-On learning the first property that the camera expects is an fov and now we know what that means a field of view so for now
Speaker A
I'll set it to 75 next we need to provide the aspect ratio and here I'll set it to window. Inner width divided by window. Inner height this will make the aspect ratio be exactly the same as our window and the next two properties are
Speaker A
near and far planes for near we can set it to 0.1 and for far we can set it to 1,000 we can also modify the camera position by doing something like camera.
Speaker A
position. zaxis is equal to five so just Z right here once we have a camera let's also create something to show an object so first we need to define a geometry for that object by saying cons geometry is equal to new 3. box geometry
Speaker A
of course you could have used any other predefined geometry provided to you by 3js and next we can use a material in this case I'll use a new 3. mesh Lambert material and to it you can provide a color let's do something like
Speaker A
hash 468 585 I think that's going to look good and we can give it a property of emissive which we're going to set to be the same color that we added 468 585 by default emissive is set to Black and if
Speaker A
we don't add it then the color of our material won't react with light as we want it to next let's use the geometry and the material to create a cube con cube is equal to new 3. mesh remember
Speaker A
what you learned about mesh is simply consisted of two things a geometry and a material which we can pass as first and second property to this function next let's add this Cube to the scene by saying scene. add cube of course we
Speaker A
wouldn't be able to see anything quite yet so we also need to add the lightning to the scene we can do that by saying con light is equal to new three Dot and now we can choose the type of lighting
Speaker A
you want to use there are many different types in this case I'll go with directional light the directional light accepts two properties the first one is the color and in 3js you can pass a heximal color by saying 0x and then
Speaker A
provide it let's use 9 CD ba6 I found this one to work very well and we can also provide the intensity as the second parameter so let's set that to 10 finally let's position the light by saying light. position. set and we can
Speaker A
set it to 1 one one do you know what these three ones mean it's the X Y and Z axis finally let's add it to the scene by saying scene. add light great we have our scene we have the camera we have our
Speaker A
object and now we have the lighting so let's just add the renderer we can do that by saying con renderer is equal to new 3.
Speaker A
webgl renderer make sure that both G and L and R are uppercased and you call it as a function next we can set the size of the renderer so knows what it has to render by saying renderer do set size to
Speaker A
window. Inner width and window. inner height so it'll render the full height and width of the window finally let's call the document.body do append child and let's add the renderer dod element to our Dom tree now this should be enough to see
Speaker A
what we created in the browser so you can go to your file tree and then right click index HT ML and then open it up in your browser web storm makes it even simpler I can just open the file and
Speaker A
then immediately preview it but before we open it up we must switch the order of the scripts first we have to load the 3js CDN and then after that script we can add the script pointing to our main.js and one thing we must not forget
Speaker A
is to add the version of 3js that we want to use so back in the browser here they tell us don't forget to add the version and we can check the versions from the mpm version list the most most
Speaker A
recent version with a lot of downloads is 0.167 point1 so let's copy it and let's add it right here 3js at 0.167 do1 and we can do the same thing right here great and just quickly going back to the main DJs make sure that
Speaker A
everything coming after three starts with a capital letter because we're working with Constructors such as mesh box geometry perspective camera color oh and even this scene right right here and finally to see the scene we have to render it we have just set up the
Speaker A
renderer but now we need to call renderer do render pass it the scene and pass the camera from which we want to render that scene once you do that we can go to our index.html and you can open it up in the
Speaker A
browser I have my preview right here on the right side and within our scene we have a camera looking directly at a teal box now now this isn't as interesting on its own but once we add the animations
Speaker A
it'll be so much better so let's animate that scene by creating a new function called animate within it we can request animation frame to which we can then pass animate so this will request for the animation and next we have to Define
Speaker A
what will the animation do and here we can just rotate the cube by saying cube.
Speaker A
rotation. X X Plus equal to 0.01 and we can do the same thing for the Y AIS as well finally we can move the renderer do render within the animate indented properly and call the animate function at the bottom which
Speaker A
will then call the renderer do render as soon as you save this the cube should start rotating right in your browser and I mean look at this you have a 3D element seemingly flowing in this empty scene which has different lights
Speaker A
pointing to it this is great but of course this is just the start the goal of this demo was to give you step-by-step instructions for creating a scene adding a camera using geometric materials and lights and then rendering
Speaker A
them with animation the key to mastering 3js is handson exploration so please take the time to explore different geometries materials lights and more in other words have fun playing with the code open up the docs and try switching
Speaker A
a property that we animate try using a different light or a different geometry it's completely up to you only by practicing will you be able to better comprehend what the changes that you make to your code change in the 3D
Speaker A
environment we explored creating a simple 3js scene using HTML CSS and JavaScript through a CDN link now let's explore an alternative approach using the 3js package directly this time we'll build something more exciting by incorporating additional geometries materials and lights so let's get
Speaker A
started similar as doing the previous demo we have to somehow get access to the 3js library instead of using a CDN which is a bit of an outdated approach we'll now install 3js as an mpm package alongside 700,000 other people that
Speaker A
installed it just this week to do that we'll set up a project using vit so head over to vit dodev click get started scroll down to scaffolding your first V project and copy the command next back in our IDE I will create a new folder
Speaker A
and I'll call it V I'll open up the terminal and I will CD into vit and now we can paste the command that we just copied mpm create V add latest first it's going to ask us to install the
Speaker A
create Ved CLI so let's press y to do it and it's going to ask us for the project name in this case I'll just say do slash to create it in the current directory next we need to choose the flavor of our
Speaker A
V I'll just use vanilla so we're still on basic HTML CSS and JavaScript we'll do react soon but for now let's just stay on vanilla let's choose JavaScript and run mpm install to install all the necessary dependencies and as soon as it
Speaker A
is done we can install the 3js package by copying the installation command it's pretty simple it is just mpmi 3 it's a pretty lightweight package so it gets installed instantly and we can run mpm runev to run it in our browser it's
Speaker A
running on Local Host 5173 so let's open it and there we go hello V now we need to clean it up a bit so let's delete this counter file and let's clean up the main.js the only thing we want to do in there is
Speaker A
import everything as three from three I'll Zoom it in so you can see it a bit better and then we can create a new canvas by saying cons canvas and getting it by targeting our Dom so document. get element by ID and we'll
Speaker A
Target the one with the element ID of canvas after that we have to do all the other things to make her scene work like we did in the first demo and it never hurts to repeat the most important stuff
Speaker A
so let's do it once again together first we need to create the scene so number one scene we can do that by saying const scene is equal to new 3. Scene by the way notice how webstorm autocompletes this immediately well for me and now if
Speaker A
you highlight it we have information on what this three actually is and what the scene is it is a Constructor which we can visit and see exactly how it works also you can see that the webstorm adds this inline hint that lets us know that
Speaker A
this scene is of a type scene which results in something like this if you start typing it and press dot it will automatically know what kind of properties does it have specifically we'll use the background here let's set
Speaker A
it to be equal to a new 3.ol and let's use some kind of a grayish color like hash F0 F0 F0 what is the the Second Step it is to add the camera so let's say const camera is
Speaker A
equal to New 3. Perspective camera and maybe you know what kind of properties does it accept first it accepts the fov and I love how webstorm automatically lets me know the name of this property next it's the aspect so we can give it
Speaker A
the window do inner width divided by window do inner height to make sure that it takes over the full width and height of the screen next it takes the near number meaning how near does the object have to be to still be visible I'm going
Speaker A
to put 0.1 and then for far I'm going to put 1,000 and this is our camera of course we have to position the camera somewhere in the space so we can say camera. position doz and set it to
Speaker A
something like five what is the third step well it is to add some kind of an object in the space so what do we need need for an object well we need a geometry and a material so let's define
Speaker A
a geometry which is equal to new 3 Dot and now you can choose whatever geometry you need it can be a capsule a cone a circle cylinder in this case let's be crazy and let's use a do decahedron geometry we
Speaker A
can also choose its material by saying const material is equal to new 3. mesh Lambert material and to it we can pass color of hash 468 585 and emissive 468 585 that's a nice teal color and now that we have the geometry
Speaker A
in the material we can create what a mesh so we can say const do DEA hedron is equal to new 3. mesh and we need to pass the geometry as well as the material oh I misspelled three right
Speaker A
here so let's fix this very quickly and we have a type warning here saying that Lambert material is not assignable to basic material so let's quickly make this a basic material as well great now for this demo I want us to create two
Speaker A
objects so we have a doah hedrin and just below I want to create another one I'll call it box geometry equal to new 3js box geometry and we can also pass some props into it such as the width the
Speaker A
height and the depth I did two 0.1 and two for the values we also need to define the material so let's duplicate the material from above and just rename it to box material and let's just change the colors to something like hash B4 B4
Speaker A
B3 with the basic material I believe we don't even have the access to the property emissive so we can just remove it and keep the color just to keep things very simple finally we can create that box by saying const box is equal to
Speaker A
new 3. mesh to which we pass the Box geometry and the material let's position this box in a space something like box.
Speaker A
position doy is equal to - 1.5 and now we can add both of these objects to a scene by saying scene. add do decahedron and let's also do scene. add box we know that we cannot yet see those elements
Speaker A
without lights so step four is to add lights we can do that by saying con light is equal to new 3 do in this case let's use a spotlight we can pass it the color of 0x 00 6
Speaker A
769 I found this color to look good and an intensity of 100 I'll use the light. position. set to set it at 111 coordinates and I will add it to the scene by saying scene. add finally as the step five we have to set
Speaker A
up the renderer so let's say const renderer is equal to new 3. webgl renderer and to it we'll pass the canvas that we previously created it is this one right here the HTML element why are we adding the canvas well so we can add
Speaker A
some controls so we can interact with the scene but for now we just want to see it so let's simply say renderer dot set size we'll set it to window.in width and window.in height and finally renderer do render where we have a scene
Speaker A
and we're looking at that scene from the camera's View point now we have to head over to our HTML file which is right here and we have to add that canvas we can add it right here instead of this
Speaker A
div by renaming the element to Canvas and giving it an ID of canvas as well and we can say V app with 3js let's also quickly modify the CSS by going over to style.css and we'll say all elements
Speaker A
will have a box sizing of Border box a margin of zero and a padding of zero as well just to reset things and make it easier for us to interact with the 3D World from scratch now if you check out
Speaker A
the browser again you should be able to see something that looks like this doesn't look like much right it's just a doic aedon which looks like some kind of a polygon and then a box right below it but what do you say that we make this
Speaker A
canvas interactable we can do that by using something known as orbit controls so that's going to be step six add orbit controls and right here at step five for the renderer we can also set the pixel ratio so we can say renderer do set
Speaker A
pixel ratio and we can set it equal to window. device pixel ratio this is very useful for mobile devices so the controls work on there as well so now let's add those controls we can do that by saying cons controls is equal to new
Speaker A
orbit controls which you have to import at the top we need to pass it a couple of props the first prop is the camera which thankfully we have already defined and the second one is the Dom element of
Speaker A
the renderer once we have that we can modify our controls just a bit by saying controls. enable damping and we can set that to true this will make our controls smoother we can also play with controls.
Speaker A
damping factor and we can set that to 0.05 we can also modify the controls.
Speaker A
enable Zoom which we're going to set to true so we can zoom in and out and finally we're going to play with the controls dot enable pan so we can also Pan the screen before we check out those
Speaker A
controls in the browser let's just make sure that our import is good it looks like for me it it auto imported it from three add-ons actually it should be coming from three add-ons controls orbit controls. JS now before we put it to use
Speaker A
let's scroll down I noticed I have an unused box material here so let's actually put that to use we'll use it within the Box mesh and finally we can add the animations so let's say seven add animations and we can do that by adding
Speaker A
the function animate which we can immediately call right here below this function will request animation frame to which we can pass animate and here we can play with the rotation so let's say do decahedron rotation dox plus equal to
Speaker A
0.01 and we can also change the Y rotation in the same way and let's do the same thing for the Box by saying box.
Speaker A
rotation doy plus equal to let's do something less drastic stick 0.005 we also need to update our controls so that the dampening takes effect so controls.
Speaker A
update and finally in here now we can call the renderer do render scene so let's use it right here a bit below great now if you go back you can see that the rotation is being applied on its own but now we also have the power
Speaker A
of orbit controls which means that we can orbit this scene and view it from all the different angles from bottom from top left right front and center but since we're using a basic material right here the scene doesn't look that good so
Speaker A
as I told you before play with it a bit and see how you can change the colors the lighting and more if we replace this basic material with the Lambert material and if we gave it that emissive property
Speaker A
like like we did before even though I'm getting a type warning right here you can see that this now looks much more realistic the light is actually bouncing off of it and if we orbit we can even get to the exact spot where the light is
Speaker A
coming from you can see it's kind of hitting it at this corner similar thing for the Box let's try to change it to something like mesh standard material and we can also give it that emissive property by saying missive is equal to
Speaker A
this color there we go now you can see something beautiful and that is that the teal color of this doah hedron object actually reflects into the box and of course deeper in the course we explain every little detail such as why this
Speaker A
mesh is complaining about this being a standard material and not a basic one but for now we're good finally let me give you a pro tip we also want the this animation as well as the orbit controls work if we resize the window size so to
Speaker A
make that work we can do a step eight of handle window resizing where we can say window that add event listener of resize and when we resize we want to call a callback function where we can reset the camera aspect to be the new
Speaker A
window. inner width over the window height we can update the camera projection Matrix uh it sounds tough I know but it basically just resets the camera position and finally we can reset the renderer size by setting it to window
Speaker A
inner width window inner height of course let's spell it properly and we also need to initially set the size which I believe we are already doing that's great so now if you resize this window you can see that everything still
Speaker A
works perfectly and this wasn't a lot of code right just enough to add two different objects but even with just two there was a lot of duplicated code so you can imagine how things can quickly get Messy as we add more objects without
Speaker A
knowing the best practices or JavaScript patterns for reusability you could quickly find yourself in a 3D nightmare so be mindful when you're working with 3js on a vanilla JavaScript project there's also something else I wanted to show you first was the way that I fixed
Speaker A
this import at the top how can you know that these orbit controls are coming exactly from this place well it all comes down to reading the docs alongside playing with the code that you have here in the last demo I told you that the
Speaker A
best way to learn about 3js is to play with the code and see what happens well the second best way is to read through the docs and explore some examples you can see exactly how can use each one of
Speaker A
these properties not only that you can see every single property that it accepts as well as every event that it fires and the best way for learning 3js or any other coding concept for that matter is to combine the theory and
Speaker A
reading the docs with modifying the code and seeing what happens so if you haven't already downloaded codium at the start you can do so now by clicking the link in the description and getting it for your own IDE in webstorm you can
Speaker A
press command shift B and then search for plugins and right here we can search for codium let's install it and restart my IDE and create an account I'll just log in with Google and then you can select a
Speaker A
block of code or the entire thing that you want explained and just click ask chat or press command shift L and just look at that this code sets up a 3D scene using the 3js library rendering a rotating do decahedron and
Speaker A
the box with a spotlight the scene is interactive allowing the user to orbit zoom and pan using the mouse the scene also responds to window resizing well this is exactly what it is and of course you can continue ask and get questions
Speaker A
about the code such as we're using a perspective camera what other camera types there are and it's going to read both the code and the docs combine the two and say hey perspective camera is used in your code
Speaker A
it simulates the way the human eye sees the world the autographic camera does this Cube camera that and so much more it's a super useful tool for explanations so that's it for this demo and the pro tips that came along with it
Speaker A
so far we have reviewed many 3js foundations and tested most of them in code while writing that 3js code you may have felt like wao this is so much better better than writing webgl code for a cube but as you start to add more
Speaker A
features to your 3D app you'll notice that the amount of 3GS code grows and becomes harder and harder to manage and maintain do you know why when working with 3js you typically write a lot of imperative code meaning you're telling
Speaker A
the computer what to do step by step you're in control of everything from initializing and positioning objects handling rendering glops updating the C camera and managing interactions while having a lot of control is great it also means you have to be very mindful of
Speaker A
every detail this can make your code messy and complicated as your project gets bigger that's the challenge of scaling with 3js which coincidentally is the name of one of the important lectures of our upcoming ultimate 3js course one small mistake and things can
Speaker A
go wrong and this is where react 3 fiber or r3f for short comes in it takes a whole different approach by using the power of react GS instead of writing imperative code you write declarative code this means you have to describe
Speaker A
what you want your scene to look like and the react 3 fiber handles the details of making it happen with r3f you don't need to worry about the step-by-step process of updating the scene you simply declare how you want
Speaker A
things to be and the react does the heavy lifting instance if you want a cube to rotate when the user clicks a button you can just update the state in react and the react 3 fiber will automatically update the 3D scene for
Speaker A
you since r3f is built on react you can use react's features such as components Hooks and State Management to break down your 3D scene into reusable components along with r3f there's also react 3 Dre which is a collection of useful helpers
Speaker A
components and abstractions built on top of react 3 fiber it provides readymade tools like cameras controls and environment setups which can significantly speed up your development by handling common tasks and simplifying complex setups in short Dre acts like a
Speaker A
toolbox that extends r3f so you don't have to reinvent the wheel for common 3D features think of it as shaten we use ready-made 3D features to build applications faster we've been experim exp menting with vanilla JavaScript demos up to now so let's try using 3js
Speaker A
in react with the react 3 fiber and see how it compares to the imperative approach we've used once again we'll create another folder and I'll call it v- react I'll CD into V react and run mpm create V add latest once again we'll
Speaker A
do the dot slash for the project name and this time we'll use react as the framework let's use just react with regular JavaScript and once again we'll have to install the 3js package but this time we'll also use a react 3js Library
Speaker A
called add react -3 SL fber so we'll be installing that as well and you can see how my terminal smartly Auto suggests to install react 3 Dre too so let's add react D3 SLR which is a utility library to make three BJs
Speaker A
work with react even better so let's press enter and let's run mpm run Dev on Local Host 5173 we have another V starter running but this time with react now let's clean it up a bit to give us a
Speaker A
clean slate for turning this into a 3D powered react application we can start by going into the source and then app.jsx we can clean up everything that is in there and just say const app is equal to a functional component where we
Speaker A
can simply return a div that says hello 3js and of course we can do an export default app going back to the browser we can see hello 3js now I'll show you how to use 3js within react it all starts by
Speaker A
utilizing some of the things that react 3 fiber provides us such as a canvas so let's turn this div into a canvas and let's import it from react 3 fiber to it we can provide some inline styles by saying style is equal to and we can
Speaker A
give it a height such as 100 VH we can also give it a width of 100 VW for the width a display of flex justify content is equal to Center and the line items is equal to Center as
Speaker A
well just to make sure that everything is nice nicely centered the reason we're adding a canvas is to turn everything within it into a 3D rendering context that's what the canvas does it's a Dom canvas which accepts 3js elements as
Speaker A
children so whatever you want to add to the scene you can simply add it here maybe you want to add orbit controls from react 3 Dr it's super simple you just add it here and you provide different functionalities such as enable
Speaker A
Zoom to True right here as a prop we can also enable pan and finally we can enable rotate if you simply want to set it to true then you can leave it as it is you don't even have to explicitly say
Speaker A
true just to make it like this next how do we add a light well you can simply say directional light and you can pass it a position intensity of 10 and then a color as well maybe something like 0x
Speaker A
and and let's do 9 CD ba6 that's a nice looking color and if you want to color the canvas you can also just say color make it a self-closing tag and say attach is equal to background and args will be equal to an
Speaker A
array where we only have one color F0 F0 F0 so I think now you can see the difference between declaring literally everything and then then just using it within the code where you're referencing components and variables from react 3
Speaker A
fiber and react 3 Dre of course now we want to show a specific element right here maybe a rotating Cube so let's just call a component rotating Cube which is going to be a self-closing component so let's declare it right
Speaker A
above const rotating cube is equal to a component where we'll return a mesh this mesh has to have a reference so that we know what we're interacting with so we can say const mesh ref is equal to use
Speaker A
ref which is a hook coming from react now we can say mesh has a ref equal to mesh ref this is some react specific functionality and why are we using it well we're using it because then we can
Speaker A
leverage a use frame hook coming directly from react 3 fiber the use frame hook executes a callback before render in a shared frame Loop so it'll Loop and it'll do something to our object so let's declare a callback
Speaker A
function and here if we have a mesh ref. current meaning if we can access this Cube then what we can do is whatever you want to do something like mesh ref current. rotation doy plus equal to 0.01 and you can do the same thing for
Speaker A
the X AIS as well so now that we're applying some kind of a frame let's actually render this mesh you know how before we had to declare everything like a geometry and then a material well here it makes so much more sense you have a
Speaker A
mesh and within the mesh you can use any kind of geometry in this case let's use a cylinder geometry and you can provide some arguments to it this is going to be the size so let's say 1 one one and
Speaker A
specifically these point to the X Y and Z axis next we can provide a material in this case I'll use a mesh Lambert material and then you can provide a prop with the color let's say color is something like hash 468 585 and we can
Speaker A
also apply the emissive property equal to the same color but you might wonder like where are these properties coming from the mesh the cylinder geometry the mesh Lambert material we're not really importing them from the top the only
Speaker A
thing we are importing is this canvas right here well since we're within the canvas it allows you to call all of these components let me show you I'll go to react 3 fibers documentation and you can see an example for the first scene we
Speaker A
have a canvas and then here it says how you can add a mesh to actually see something in our scene We'll add a lowercase mesh native element which is a direct equivalent to the new three. mesh remember that and here's an important
Speaker A
note pointing to exactly what I was telling you about we don't need to import anything all 3js object will be treated as native jsx elements just just like you can write div or Span in regular react Dom the general rule is
Speaker A
that fiber components are available under the camel case version of their name in 3js a mesh is a basic scene object in 3js used to hold geometry and the material so we can create a new mesh using the geometry and the material
Speaker A
which automatically attach to their parent so this is exactly what we have done so if you wanted to pause for a moment to know exactly what is happening here this code right here is equivalent to this part in Native 3js which is what
Speaker A
I taught you how to do in the first two demos so now we can truly grasp the benefits of using react 3 fiber another question you might have is what kind of things are we passing to it well if a
Speaker A
native 3js element like box geometry is accepting three props you can pass those props in the same order through a prop named Arc you can add the lights in the same way that you add all the other elements and when it comes to props if a
Speaker A
native 3js element has some props like light has the intensity here you can add it as a prop how convenient is that and that's it we're at the end of this documentation page so you can see that react 3 fiber docks are pretty short
Speaker A
there isn't a lot of stuff here and these are old tutorials and that's because they're not really changing too much from B 3js they're just making it easier for us to work with 3js within react so if you're wondering about which
Speaker A
geometries exist or which materials or what you need to do to form a mesh you would still go here to the original 3js documentation search for a different component or a property and see exactly which properties does it accept and then
Speaker A
you know that you can pass them as args to our react 3 fiber alternative great now if we check out our Local Host you can see a spinning cylinder and you can also use your mouse to move across it
Speaker A
this is great you can see how simple it was to add orbit controls using react 3 Dre but let me show you one more cool thing like react 3 Dre and react 3 fiber are all about making your life working
Speaker A
with 3js within react and xjs applications easier so let's say you wanted to add some sparkles here you can just say Sparkles imported from react 3 Dre and then give it a couple of properties such as a count is equal to
Speaker A
100 scale is equal to 1 size is equal to 6 Speed let's make them very slow 0.2 noise can be 0.2 and color can be orange if you save that and go back now this object is actually sparkling and
Speaker A
you can zoom in and see the Sparkles that you added in just a single line of code imagine if this was some kind of a fire where you can easily add sparkling fire elements to it the possibilities are endless and this code super simple
Speaker A
to understand we can use codium once again to explain this app and you can see that it is a 3D scene using 3js where the scene is rendered within the canvas element and then we add orbit controls to enable user interaction
Speaker A
directional light to add lighting and then we set the color and add a rotating Cube so whenever you're unsure about something it's always nice to use the explain functionality here and there's also this dock string thing which if you
Speaker A
click it it'll start generating docs in form of comment right above this code so you can see it is super simple you can accept it or change it or reject it where it says that this is a cannabis
Speaker A
component that renders a rotating cube in the center of the screen with interactive camera controls and it returns a jsx element representing the canvas super useful so isn't this easy it's just like writing regular react GS code the logic is more or less the same
Speaker A
as in regular 3js but react 3 fiber and react 3 Dre simplify the process they help us write more maintainable and manageable code through components and they offer built-in functions right out of the box now a developer portfolio is
Speaker A
not like any other project it is a career asset designed to Showcase everything you're capable of making you an attractive candidate for any job and that's why I'll teach you how to go a step further see hosting your portfolio
Speaker A
on a personalized domain makes you more professional memorable and improves your credibility and search engine visibility so so before we dive into coding let's get that domain name I highly recommend hostinger for hosting your modern portfolio and right now they're offering
Speaker A
a great deal which you don't want to miss when it comes to hosting This Modern portfolio I personally go for the Premium plan and here's why it's perfect for this and many other projects you can host a 100 websites with the same
Speaker A
account you get a free domain name which gives you a professional touch you get a free SSL for HT PS security which creates trust with anyone visiting your portfolio this deal won't last forever and because I've partnered with
Speaker A
hostinger you get an even bigger discount once you click the link in the description click claim deal and add to card here we'll have to choose the period of our hosting with a crazy discount going on right now I'll
Speaker A
definitely choose 48 months to save the most money down below you can choose your payment method and enter your JavaScript master coupon code which will give you an even bigger discount on your hosting package and once you buy it we
Speaker A
are ready to set everything up and get started with building out our portfolio we are building a new website so we can choose create and we're building a completely custom website so we can choose skip at the bottom next we need
Speaker A
to choose our domain as you can see I use hostinger for my Js mastery. proo platform so here you can type out your domain name I would recommend something like your first name and last name.com something like John doe.com and if you
Speaker A
purchase the hosting for more than one year you'll get the domain completely for free choose it and click next the domain is registering and while that is happening I quickly want to point your attention to our improved Discord server
Speaker A
where now we have dedicated forums for each video so if you're building this portfolio and you get stuck you just go to the Forum and ask a question this is the best way to get help now already we
Speaker A
are the next step we where you can choose where your audience is located at and you can see there's a lot of options click next and the setup will initialize with that in mind we are redirected to the dashboard of our hosting project so
Speaker A
finally let's code it out and we'll deploy it at the end of the course before we begin developing your app I want to show you how you can set up a new IDE that I tried and loved so much
Speaker A
that I decided to use it to replace my vs code I know making a switch is not easy but just try it and you won't be disappointed Jed instance tools are trusted by Google Tesla Visa Shopify City Bank and even NASA so they'll suit
Speaker A
us just fine the link in the description will give you a free 90day webstorm license so you have nothing to lose open it fill in your information click redeem and follow the instructions in the email once you click the link you got in your
Speaker A
email you'll be redirected to your account dashboard and just click download then select your operating system and click download keep in mind this is a full IDE and not just a code editor so it's going to take some time
Speaker A
to download let's leave it be and I'll be right back and if you're not ready to choose webstorm yet that's totally okay you can still follow along with the entire video without any problems I just want to say that I've been trying it on
Speaker A
our internal projects for the last couple of months and found it to be the perfect IDE for web and mobile applications I'm still discovering new features as I go but I'm already so impressed that I won't be going back to
Speaker A
to VSS code anytime soon once you install it it's going to ask you whether you want to import your settings from vs code so you can do that or start completely from scratch in this case I will import the settings you can choose
Speaker A
the theme the keymaps plugins and even the recent projects this was super quick and now we can create a new project instead of just creating a new empty project webstorm allows us to start from a specific framework or Library so if
Speaker A
you want to you can continue with nextjs or choose react but I like this note right here saying that create react app is not the advised method for creating react apps so instead you can switch over either to next GS or vit which I'll
Speaker A
be using for this video and if we using some other code editor the only thing you have to do is run MPX create V and then choose react in your console once it asks you I'll show you how that looks
Speaker A
like later on and I can rename this project to something like 3js portfolio great let's create it okay that was super simple webstorm created the entire project for me and it even asked me whether I want to install all the
Speaker A
specified packages this was super quick and if you're still using something like vs code no worries you can still follow along just fine by running this command in your terminal mpm create V latest. SL then it'll ask you a couple of questions
Speaker A
you can choose react and it'll spin up your project in the current directory once that is done let's run our project to see what we have here mpm run Dev it spun it up on Local Host 5173 so if you open it up it'll look
Speaker A
something like this just a base boiler plate for V and react so what do you say that we clean it up a bit but before we do that you might want to clean up your IDE to make it look a bit more like mine
Speaker A
you can press command shift B and then choose theme as you can see I'm using a cat pin mocha theme which you can quickly install from a plug-in library and another package that I'm using are material icons so you can install it as
Speaker A
well so yours look like mine as well with that said let's clean up our file tree first we have the main where everything starts we don't have to touch that the index CSS has a lot of the styles that we won't necessarily need
Speaker A
but what we will need instead is Tailwind CSS so let's go ahead and remove this and add the Imports for Tailwind CSS right here you can get them by clicking the link down in the description scrolling down to the read
Speaker A
me and then searching for Snippets code to copy and here you can see an index.css file that you can copy and paste right here your code you'll notice that this contains just some repetitive code for rotations the Imports for tal
Speaker A
and CSS which we need changes the body background color and then it has some utility classes for navigation or for sidebar and buttons that we can reuse within our code but more in that later next let's actually install tailin CSS
Speaker A
with the library that you chose to build this project with it can be next GS or in this case vit just Google this and you'll stumble upon this documentation page so let's simply copy this mpm install command and paste it in our
Speaker A
second terminal so I'm going to open open up a new one first we're installing some Dev dependencies denoted by the dashd flag and then we can initialize a new tailin CSS setup within our project so let's paste it right
Speaker A
here and you'll be able to see a new Tailwind config.js file appear right now it is completely empty so the next step is to actually modify it and do the Imports of tailin CSS directives this one we have already done and now now we
Speaker A
have to update the template paths you can find that under Snippets in this readme as well under Tailwind doc config.js just copy it and override whatever you have in here you'll notice that this is a pretty short file where
Speaker A
we simply modify some font families and create shortcuts for using a couple of different variations of black great with that in mind we can go to our app.jsx and we can remove everything to start with a clean slate I'll press press
Speaker A
command shift p and open up plugins that allow me to switch over to the marketplace and search for react Snippets and I'll install this modern react Snippets plugin that'll allow me to quickly spin up react components so let's click
Speaker A
okay and I'll start typing rafc that is a react Arrow function component with an export how simple was that next I'll turn this div into a main section and and within it I'll create an H1 with a class
Speaker A
name text- toxel text- white and underline I'll also give our main a class name equal to Max dw- 7xl which will give it a maximum width and margin X of Auto finally I'll make the H1 say hello 3js back in the browser we can see big
Speaker A
underlined hell below 3js text if this didn't work for you you might need to reload your terminal for the tailing changes to take effect but after that it should be there now let's put our browser and IDE side by side so that we
Speaker A
can see the changes that we make live on the other side there we go and since I know that many of you will be wondering which browser it is it's the arc browser and I would highly recommend it with
Speaker A
that said let's start focusing on the Navar I'll delete our existing assets as we won't be needing it as well as the app.css all the Styles we need are going to be within the index CSS and then within the
Speaker A
class names that we add to our elements in the source I'll create a new folder called sections and within sections I'll create a new file called navb bar.
Speaker A
jsx there we can run ource and we can import this navbar right here instead of our H1 so that's going to be just a self-closing knvb bar component automatically imported from the top and of course if you want to
Speaker A
actually see it for now we can give this div a class name of text- white there we go now we can see navbar at the top right so let's clean this up and let's go ahead and code this nav bar
Speaker A
together to get started we can turn this div into an HTML 5 semantic header tag and give it a class name of fixed since it'll be fixed at the top so it makes sense to say top zero we're going to
Speaker A
also say left Z and right zero as it'll take the full width of the screen and we can give it a z index of 50 so it appears over other elements we can also give it a background of black over 90
Speaker A
which is just a variant of the black color and it looks like webstorm automatically recognizes the exact background color being applied within it will create a div just to create some spacing that'll have a class name equal to Max dw- 7xl which is a width of about
Speaker A
80 Ram or 1,280 pixels so you'll see me use this quite often and typically you always want to have consistent spacing on the left and right side so no matter what the section will always be using this measure to put the content within
Speaker A
and we can also give it a margin X off auto next we'll have one more div right within it and that div will have a class name of flex justify Dash between to Center the elements horizontally and then items Das Center to Center them
Speaker A
vertically I'll also give it a padding y of five to apply a bit of padding on top and bottom margin X of Auto and C- space whenever you notice that a specific class is not being recognized once you hover over it that
Speaker A
means that most likely it is a class that we have defined within our classes and if we quickly search for it within the index CSS you can see that indeed this is the first utility class we have defined and this one simply on smaller
Speaker A
devices applies a padding X of 10 and usually a padding X of five so whenever you notice we're using a nonnative Tailwind CSS class name you can quickly go to the index CSS and see see exactly what that class name does for example
Speaker A
the navul does everything from centering elements providing a gap and then making sure that it is all responsive great so now let's add an anchor tag right here within it and let's make it have an hre pointing to forward slash meaning
Speaker A
homepage I'll give it a class name of text- neutral -400 font D bold text- Excel hover of text white and transition Das colors so that means that it will nicely transition from neutral to White Once We hover over it and there you can put your
Speaker A
name I'll say Adrian and now you can see a nice hoverable Adrian name if you want to you can also create some kind of an icon with the first letter of your name and then put it right here next to your
Speaker A
name acting like a logo right below this anchor tag I'll place a button this button will render an image and that image will have a source and it'll render a menu icon you know those three lines often called a
Speaker A
hamburger icon as well well where are we going to get that icon from of course you could use some kind of an icon Library like font awesome to search for different icons but sometimes it'll be hard to find the exact icons we're
Speaker A
looking for for example these technology icons or this Earth or these dots right here here there's many different kinds of icons that we want to have on our design and we want to stay consistent with using them so that's the exact
Speaker A
reason why I'm providing you with this complete figma design so if you want to you can go here and then immediately download each one of these specific icons but I went even one step further and in the same GitHub breed me that I
Speaker A
showed you before I've also added the assets right here so you can click here which will lead you to a Google Drive Link and you can just press download at the top right sometimes it says that there might be some viruses but don't worry
Speaker A
it's just the assets and once you unzip it it'll look something like this it'll be a public folder containing the assets models textures and everything else you might need so simply go here remove the existing public folder and then drag and drop the new
Speaker A
one in there we go here it is now that we have all of those assets you can simply say assets SL menu. SVG and of course that has to be within a string if you save it and go
Speaker A
back the error will be gone but let's also give it an ALT tag of toggle and a class name of w-6 for the width and h-6 for the height and there we go you can see the menu icon appear on the top right now let's
Speaker A
change that icon depending on the state of the menu of course this is her mobile devices and yeah I'm on a mobile view right now since I've collapsed my browser to see the code so right at the top I will create a new use State I'll
Speaker A
call it is open and set is open at the start equal to false and the very cool thing that webstorm does is it shows me here that is open is of a type Boolean for now I will disable those type
Speaker A
annotations but I like these ones even more the these are super useful whenever you call a specific function it automatically populates the type of the property that you're typing in sometimes you might not know what is the first
Speaker A
field that you pass into the use State and here as soon as you open it it tells you this is the initial state of that field super useful so now that we have this is open State let's actually modify the source
Speaker A
depending on it so if is open is currently turned on then we'll show the asset for the close so assets SL close.
Speaker A
SVG and else will show the menu that'll look something like this if I turn it to True right here you can see that now it becomes an X so to make this happen on the button click I will give this button an onclick
Speaker A
property equal to toggle menu and now this is a question for you how can we toggle a menu well let's declare that function right above by saying cons toggle menu is equal to a callback function where we will simply set is
Speaker A
open to be equal to not is open this is a simple way to do it but sometimes it leads to issues so you can see even though it works right now I can click it the preferred way is to open up
Speaker A
a callback function where you get a previous state or in this case we can call it prev is open and then you say not prev is open because sometimes when we changing the state using the value of the previous
Speaker A
state things can go wrong so this is the preferred way to do it great let's also give this button a class name equal to text- neutral d400 on Hover text- white Focus outline - none on small devices hidden typically
Speaker A
flex and we'll give it an area label equal to toggle menu so people with screen readers can still know to open up that menu there we go now right below that button we can say nav with a class
Speaker A
name equal to on small devices show it else make it hidden and here we can create a new component right at the top which I'll call Nav items that's going to be just a regular return that'll return some nav item you can see how
Speaker A
smart our system is it automatically recommends things to add but for now I'll just make it a div and I'll make sure to render the nav items as a self-closing component right here now what was the reason that I want to add
Speaker A
nav items as a separate component well it's because will reuse the same nav items both in our desktop navigation bar and our mobile navigation bar so let's turn this into a UL or an unorganized list and give it a class name equal to
Speaker A
nav Das right within it you can show many different list items like this but nobody wants to see something like this too much duplicated code so instead we can create a new object object and then create an array within it with different
Speaker A
elements that we can then map over and simply create an Li for there we go and this was too fast I know but I just wanted to go a step further to show you how this looks like because we'll
Speaker A
optimize it even further instead of declaring all of our logic here such as home projects about and more what we'll do is create a new file where we'll keep track of all of this data we can do that
Speaker A
by going to project and creating a new directory within the source and I'll call it constants within the constants folder I'll create a new file called index.ts and if you head back over to a GitHub readme you can find a constants
Speaker A
index GS file right here copy it and paste it right here you'll notice that there's a lot of stuff right here but none of it is code and logic what this contains is simply some content that you might want to change within your
Speaker A
portfolio so here we have a list of predefined links for our navigation bar if you scroll down you can see some client reviews for example Emily gave me a review and Mark but for you these are going to be some other people working at
Speaker A
different positions telling different stuff about you so it's always nice to extract the content from the logic and how do we use it within the jsx it is super simple you just say nav links imported from constants and map over
Speaker A
them where we get each individual item and for each item we automatically return An Li by automatically return I mean put a parentheses right here and not a curly brace that means instant return give it a key since we're mapping
Speaker A
over it of something like item. ID or instead of saying item every time we can automatically destructure the ID the HF and the name and simply say ID right here why can we destructure these things well because if you check the nav items
Speaker A
each one has an ID name and an atref Our Li will also have a class name equal to nav DLI so let's go back to our app and let's make sure that we can properly import it it looks like V is having some
Speaker A
issues recognizing the nav links even though they're properly linked right here so let me try reloading my terminal for a second and see whether that will fix it no it still doesn't oh would you look at that I typed DS right here looks
Speaker A
like I've been working with too much typescript I'll go ahead and rename this tojs we're working with JavaScript this time and immediately this just works great now within each one of these Lis we're going to add an anchor tag with an
Speaker A
hre and a class name of nav d liore a and we'll also add an onclick property on it which for now we can let to be an empty callback function if you save this you cannot see anything on this screen
Speaker A
size but if we go outside of the mobile view you can start seeing different elements such as home about work and contact so now we have created a desktop navigation bar right here but creating a mobile one will be super simple we just
Speaker A
have to go a bit below a few divs below actually below the nav and Below two more divs and create another div for the mobile nav we'll give it a class name equal to and actually it'll be a dynamic
Speaker A
template string first we'll say nav sidebar to give it some class names and then say if is open give it a Max dh- screen else give it a Max Das height Z Z so this will ensure that this mobile nav
Speaker A
is seen only on mobile devices and it takes the full height of the screen within it we can render the nav HTML 5 element with a class name of p-5 for padding and within it we can render nav
Speaker A
items just like so so now if you open it you can see how nicely they appear from the top and then they go away perfect for mobile devices and it works on very small screens too but if we go larger we
Speaker A
can see our regular knobb bar great so with that in mind our simple yet quite effective navbar is now done which means that we can move to the second section of our app and that is the hero section
Speaker A
so let's create a new file in the sections folder and let's call it hero.
Speaker A
jsx run rafc and then imported right here below our navbar super simple right you get the idea we have a main page that'll ensure that all the below sections follow the same width structure and then we can just put them below by creating a new
Speaker A
section moving to it and adding its code of course the hero section is the most exciting of them all here we'll dive head first into creating one large 3D model right here in the center and then even adding some smaller floating 3D
Speaker A
objects to the sides I hope you're ready so let's get started first things first I'll turn this div into a section with a class name equal to Min dh- screen which will make sure to take the full height
Speaker A
of the currently visible screen so if I go back and give it a border off two and Border blue 500 you can see that it's wrapping exactly what we can currently see minus the nav bar so next to the H screen I'm going to
Speaker A
give it a w Off full Flex flex-all so the elements appear one below another and a position of relative within it I'll render a div with a class name of w- fool margin X of Auto Flex flex-all call
Speaker A
and on small devices margin top of 36 typically margin top of 20 this is to counteract the height of the nav bar C Das space and a gap of three within it I will render a P tag that will say
Speaker A
something like hi I am Adrien and you can also render a span inside of which you can render an emoji of something like Wave by the way I just used a raycast Mac OS extension to produce that emoji
Speaker A
but you can just copy from Google or use your own keyboard and we can give it a class name of waving Das hand coming from CSS so this will make the hand slowly wave and once again if you're
Speaker A
interested in how this class name works just go for it in the class names and you can see that we're applying a wave animation with some specific presets like 2.5 seconds and what exactly does it do let's style this P tag by giving
Speaker A
it a class last name of on small devices text- 3XL typically text- excl let's give it a font D medium text- White text- Center and a font dgen Sans there we go that's better I think we can maybe do a 2XL just so it appears
Speaker A
a bit larger below that P tag I'll render another P tag that'll say building products and and Brands here you can say whatever resonates with you I'll give it a class name equal to heroor tag and text- gror
Speaker A
gradient there we go so now we have this primary text and then the secondary headline right below it is where the magic happens I'll create a new div that'll have a class name equal to w-o and h-o for full width and height
Speaker A
position of absolute and an inset of zero this will make sure that it takes the rest of the screen here and for the first time we are ready to use 3js so the first thing we have to do is
Speaker A
actually install it so let's head over to our second terminal and let's run mpm install 3 which is the primary 3js library at react D3 SL fiber and add react d 3 SL Dre the helper libraries we can also install a package called
Speaker A
wrap everything in a canvas component and that canvas has to come from react 3 fiber we can give it a class name equal to w- full and h- full so it takes the full height and width of the screen
Speaker A
within the canvas we have to have some kind of a camera so let's add a perspective camera the camera like the human eyes remember and I'll say make default which will make this a default camera and give it a position equal to
Speaker A
an array of 0 0 and then 30 still there's nothing on the screen yet so let's change that by adding our first model I'll create a new component in the components folder so let's first create that and then I'll create a component
Speaker A
called hacker room. jsx we can run RFC right inside of there and we can import right here below the perspective camera hacker room of course this hacker room is referring to this 3D model right here with a retro looking TV some hard drives
Speaker A
right here and an old school computer so let me teach you how to get to this model and use it right within our code I personally use sketch Fab to find all my 3D models they have different characters
Speaker A
and creatures cars and vehicles 3D scans weapons and even electronics and gadgets let's use the search at the top feel free to search for whatever you'd like to feature at the top of your portfolio in this case I search for hacker room
Speaker A
and we'll actually use this model right here stylized hacker room 1,500 downloads and it's completely free you can move it across right here see what it is made of beautiful old school textures so let's go ahead and download it which will bring us to the
Speaker A
authentication so let's create an account once you sign up go back to this model and download it you want to download it in a gltf format so press download then you can unzip it and see that you have a couple of different file
Speaker A
extensions in there alongside all the textures that this table uses what you want to do next is something super interesting we want to turn this over into a react 3 fiber component and to do that we'll use this gltf converter that
Speaker A
converts any gltf file into a react 3 fiber component the link to this website will be in one of the first pages of the 3js guide linked down below so just get it and then drag and drop your scene.
Speaker A
bin scene. gltf and textures right here it'll take some time to load but once it's there it'll look amazing you can zoom it in you can change the perspective and you can see all the code that we need right here provided to us
Speaker A
this is super impressive you can also play with some stuff like the Shadows which you can turn on or off but be careful as your browser can freeze for a second while that is happening I'll turn them back
Speaker A
on and you can also play with all the other things as well to see what changes does it make here if you select keep names it's also going to keep track of all of the names so you know what's a
Speaker A
computer mat what's a server mat what is a cable and a table and then you can continue modifying and changing these elements in this case I will just remove the verbos and remove the keep names with that in mind the only thing we need
Speaker A
to do is export it by copying it to clipboard oh wait wait Adrian from the future here actually don't copy that one copy the one that you can find in the read me of this video just go here and
Speaker A
head over to Snippets code to copy and here just at the bottom you'll be able to find a modified hacker room model I got my friend that works in blender to lower the size of that model by 10-fold
Speaker A
while still keeping the textures of the same quality so to follow along copy it from here go back to the code and override our current hacker room with the one that we just copied now of course this won't work right off the bat
Speaker A
there's still changes that we have to make to make it work first things first let's turn this into a default export so we can say const hacker room is equal to we get props right here and then we open
Speaker A
up a function block then at the end we can properly close it and then say export default hacker room this way we can properly import it in our other component and I'll put this use gltf preload right here at the top of it and
Speaker A
we have to point this path to the actual scene. gltf file if you check out your public folder you can see that I already provided some models here for you so the hacker room glb file is already here I
Speaker A
got it from sketchfab so you can simply change this to say SL models slacker D room. glb now if you reload this time you get a dark screen not a one but there's still things that we have to do
Speaker A
to make it work first things first let's wrap everything within the canvas with something known as a suspense and this suspense has to have a fallback which will be equal to some kind of a loader so let's create a new component in the
Speaker A
components folder and let's call it canvas loader. jsx we can run rafc inside of there and here's the cool part whenever you you are creating some components within the canvas you have to keep in mind that you're not writing
Speaker A
actual jsx you are within a 3D environment so if you still want to show some HTML within the canvas you have to Define it as an HTML tag and this tag is coming from react 3 Dre so we can say
Speaker A
import HTML from react at react D3 sltr there's also another cool thing that Dre provides us with and it's a hook called use progress and it does exactly what you think it might do you say cons progress is equal
Speaker A
to use progress and this gives you a number from 0 to 100 to indicate whether the model has loaded or not so let's give this HTML a few more properties I'll say as div so we want it to appear
Speaker A
as a div Center and I'll give it some styles such as a display of flex justify content of Center align items of Center as well and a flex direction of column right within it I will render a span element that
Speaker A
will have a class name equal to Canvas D loader and it can simply be a self-closing span below it I'll render a P tag that'll have have a style equal to font size of 14 color of hash F1 F1
Speaker A
F1 font weight of 800 and a margin top of 40 and within this P tag we can say if progress is not equal to zero then we want to render a dynamic template string of progress Dot two fixed two so we want to fix it to two
Speaker A
digits percent so from 1 to 100% else we'll simply say loading dot dot dot now if we save this go back to our hero section and add this canvas loader within the fullback part of the suspense and wrap our entire canvas with it so
Speaker A
that the perspective camera and the hacker room are now within it you can see just for a brief second that the loading appears in the middle but some other error in the hacker room actually breaks it so once we fix that other
Speaker A
error in the hacker room you'll be able to see this great loading that we just created and just looking at my IDE right here it seems like we have two many errors to fix but actually it's pretty simple you can notice that all of these
Speaker A
meshes are using specific nodes and materials but these nodes and materials are coming from used gtf seeing that gtf which is a generic scene path which we don't actually have so right here we have to refer to the same path that we
Speaker A
used right below models hacker room glb so let's copy it and let's paste it right here once you do that and reload you'll actually start seeing loading and then it'll disappear but at least now we are back on our working homepage so this is
Speaker A
good now the next question we can ask ourselves is why can't we see the model it could be for many reasons and the first one that comes to mind is its scale position and rotation as you learned in the theory part of this video
Speaker A
so let's pass those as props I'll pass scale equal to 0.05 I'll also pass the position equal to 0 0 0 and finally I'll pass the rotation equal to an array of zero minus math. pi over two and then zero again we
Speaker A
use the minus math that pi/ 2 to rotate our model clockwise by 90° and now if it loads you can barely see something appear on the screen and that's because we don't yet have lights so let there be
Speaker A
light I'll add an ambient light with an intensity of one as soon as I save leave it oh it is just a bit more visible so let me also add a directional light with a position equal to an array of 10 10 10 and an intensity
Speaker A
of something like 0.5 okay there we go that's better what if we tried removing this rotation and just at Zero well now we're looking at it from the back and I can maybe scale it a bit more so we can
Speaker A
better see it oh there we go there it is let's do 0.07 we'll play much more with the rotation later on but you can see how if you change it by a specific number of degrees it'll change sides so if we try
Speaker A
doing something like 280 you can see it is facing our Direction now before we continue positioning it further and allowing you to pan it with your mouse I want to get rid of these ugly warnings when I hover over intensity or position
Speaker A
or any other 3GS property esin says it doesn't doesn't exist but what it doesn't know is that whatever property is wrapped in a canvas inherits all the native 3js properties so our hacker room right now is a complete mess because it
Speaker A
thinks that none of these exist but they actually do so to make it understand that I found this great article by Chris that talks about adding react 3 fiber rules to es lint if you scroll down you can see that he mentions installing a
Speaker A
react 3 eslin plug-in so let's type it out together it's mpm install a react D3 sl- plugin --save ddev once you install it you have to update your eslint file so head over to es. config it is located
Speaker A
right here at the bottom and you'll have to add another plug-in by saying add react D3 and then here we have to specify react 3 fiber but where is this react 3 fiber coming from it's not really being mentioned in this article
Speaker A
but if you scroll down you can see that he actually refers to a complete iPhone 15 Pro landing page and here we can see that it's being imported from react 3 fiber so we can quickly get it imported
Speaker A
by saying import react 3 fiber coming from at react3 SL fiber but it is so crazy seeing this out in the wild created by anak 3 weeks ago because iPhone 15 Pro Landing is another one of her Great 3js Courses so seeing that
Speaker A
people create them and help each other by modifying eslin configs regarding 3js based on the project that I've created is pretty crazy to be honest I'm looking forward to creating so many more of these projects for you and I'm glad
Speaker A
you're watching this video so let's go ahead and give it a shot I will not now save this and go back to the hacker room unfortunately the warning is still there but now at least we're getting additional information about these
Speaker A
properties so to fix up the warnings I can just add an additional rule of react slash no- unknown daspry and I'll set it to off there we go if I save this you can see that the warnings are now gone same thing here so
Speaker A
now let's position our model so we can see it better and we can rotate it around and I'll show you a super cool way of doing that it consists of using a package called Leva we can just import
Speaker A
it at the top coming from this Lea package and we need to pass it some controls so let's say at the top const controls is equal to use controls that's also coming from Leva and the first thing you need to pass is the schema or
Speaker A
folder name in this case hacker room will be our schema name and then you need to pass the settings for that schema or the settings for the controls for the schema so you can have things like rotation X and then that can be
Speaker A
maybe a default value of 2.5 with a Min slider of 10 and a Max slider of 10 as well and then we can attach those controls directly to the model so this hacker room that currently has a scale
Speaker A
position and rotation instead of that I will now put this in multiple lines so we can better see it and for the time being I will comment out this scale and add a new scale that'll have an array of
Speaker A
controls. position X controls. position Y and controls. position Z and maybe instead of controls for now we can simply say something like X to be a bit shorter so we can better see what's happening let's rename these controls to
Speaker A
X and here now we can provide different positions and rotations and everything else so let's say position X is equal 2.5 with different values and we can duplicate this over for the three for two remaining positions such as y and
Speaker A
z now if we save this you can see that everything breaks and if you go to in element you'll see that there's an error that you'll often see when working in react with 3js it says error r3f input
Speaker A
is not a part of the three namespace so what really happened is that Leva controls try to render an HTML input element within the canvas so whenever you say something is not a part of the three name space that usually means that
Speaker A
you need to bring HTML elements elements or components that create HTML elements outside of the canvas so let's move this Lev right here outside of the canvas and save it once you do that you'll see this beautiful control window that'll allow
Speaker A
you to change the position X Y and Z of the hacker room as a matter of fact I will extend it to the full size and now check this out you can change its position and play around with it but
Speaker A
obviously it is too big so let's add some more controls I will duplicate and comment out the position and rotation as well and I will rename them to x.
Speaker A
position specifically position X and now we can change it to position Y and position z i noticed that I wrongly named these things before this was supposed to be x. scale X scale Y and scale Z but for the scale we can just
Speaker A
use one value to expand it on all sides since we have a predefined 3D model so I will just say scale for all three of them and for the rotation we can rename it to rotation X rotation Y and rotation
Speaker A
Z great so now we need to add these over to our Leva controls we already have position X Y and Z and now we can add rotation x with the same values that was a smart autofill right here and we can
Speaker A
also add a scale property with similar values min max and the existing one as soon as you save this and reload the page you'll notice that the controls change as well and now you can position the element a bit more
Speaker A
down you can lower the scale of the element as it is too big so we can see that 0.1 actually here works very well and you can start changing the rotation to see which rotation would fit Us best
Speaker A
this is such a powerful tool when working with 3D models and when trying to position them better on your screen perfect so let's say that we want to have the position to something like this x can be in the middle something like
Speaker A
two y can be right here and Z can be something like two as well rotation is fine at about 08 rotation Y is fine like minus three and you can play with it until tomorrow if you want to so now what we want to do
Speaker A
is get these properties get these values and then set our object to be at these predefined values so let's kind of replicate them right here the position X is 2 position Y is minus 8 I'm just reading them from the right side if you
Speaker A
can see that and position Z is two rotation X is about 8.5 rotation Y is like minus 3 and rotation Z is about 0.8 scale is just set to 0.1 for all three so we can duplicate it and we can change
Speaker A
it right here as well and that leaves us with a hacker room that hopefully will fit nicely on the screen okay this was a comedic element looks like I didn't properly copy all of the properties because it is definitely
Speaker A
sideways but that's not a problem instead let me show you how we can use some actual math to rotate our model maybe a bit more precisely than what we have here first of all let's set the x and the z-axis to zero and then we can
Speaker A
rotate vertically by minus math. Pi so this is by- 90° and this will position it perfectly great also there's a shorthand for the scale property if you remove the array and just set it to one single propert property it'll act as a shorthand for
Speaker A
all of the values but now what happens if we collapse this to a mobile size well believe it or not it's still kind of looking good it is going outside of the screen a bit but it's not that
Speaker A
big of a deal still we want to make sure that it is perfect so how would you change the position the rotation the scale depending on the device size well you can do that by using the package that we install not that long ago its
Speaker A
name is use media query so you can say const is mobile and then say is equal to use media query and provide the max width that you're trying to calculate for let's say 768 is the max size for what is
Speaker A
considered to be a mobile and then if you for example want to change the scale depending on if this is viewed on mobile devices you can make set it to 0.07 else 0.1 so a bit smaller on mobile
Speaker A
devices so if you reload you can see how now it nicely fits on the screen of course you could also add additional media queries for tablet devices and more and how do you get to perfect values for each device size well you can
Speaker A
use Leva you can play with different positions rotations and scales for different screen sizes note them down and then change them depending on the screen size of course to be able to modify the model with Leva you have to
Speaker A
use this property right here called controls and as we did it before you have to say controls Dot and then scale for example if you want to modify the scale perfect alongside making this responsive for mobile devices we can
Speaker A
also make it responsive for tablet so we can say const is tablet is equal to use media query where will provide a minwidth of 678 and a Max width of 124 which I would consider to be a laptop device and then
Speaker A
finally we can add the last one which is going to be called const is small so this is something that is very very small device and it'll have a Max width of something like 440 pixels we cannot really fit a lot of stuff there but
Speaker A
we'll try okay now that we have these three properties I will call a special function from our constants called calculate sizes so we can say con sizes is equal to calculate sizes and to it I will provide the is
Speaker A
small is mobile and is tablet so how does exactly this calculate sizes function work well let's check it out you can see a lot of numbers right here but bear with me it is pretty simple so using Lea I took
Speaker A
some of my time to figure out what is the best Desk position desk scale and then later on figuring out what's best for the cubes and other logos floating around the desk then depending on media queries I did that three or four times
Speaker A
to figure out which values are the best for each screen size and then I use a double tary operator to check if it's small use this if it's Mobile use this and then else use this this simply returns an object that contains
Speaker A
different positions scales and rotations if need be so what we can do now is simply pass a scale of sizes dot desk scale much simpler than declaring it right here and we can do the same thing for position as well by saying sizes Dot
Speaker A
Desk position for the time being we can let the rotation be as it is and I will comment out Lea for now since we don't need it at the moment and I will also remove these controls at the top okay
Speaker A
let's remove this unused Lea import at the top and let's change the perspective camera Z axis to 20 to make it appear a bit larger there we go so now this is looking great on mobile devices and as we expand it you can see that it
Speaker A
is still actually looking great it might seem a bit on the smaller side but that's because we are yet to add additional floating elements around it so trust the process to add the floating elements let's head below our hacker
Speaker A
room and let's create a new group element within this group we can render a new component so let's go ahead and create it I'll go to the components folder and create a new file called target. jsx I'll run
Speaker A
RFC and I'll create a new Target self-closing component looking good to it I can also pass a position equal to sizes. Target position this is coming from our calculation for different screen sizes now we can go into this Target and if we
Speaker A
just render it like this it'll of course break that's because we cannot render divs within the canvas so let's go into this target so where are we going to get this target 3D model from I already showed you one cool website to get 3D
Speaker A
models it's sketchfab but check this out too this is the official react 3 fiber documentation examples and under showcase they have so many cool models and applications and crazy stuff to be honest and if you click it it leads you
Speaker A
straight to the code pen link so in this case I use a stencil mask this one right here it led me to a codepen link and take a look at this cool Target so we can just try to accommodate it and make
Speaker A
it work with our code so let me teach you how to do that first we have to get this gltf file that they specify here so if you're following along with me you can copy it from here else I will link
Speaker A
it in the read me down below so you can also copy this target gltf link from there next back in the code we can repeat everything we've done with a hero so you can learn one more time how to
Speaker A
render a 3D model within the scene but this time from scratch we're not using that glb2 react 3 fiber component thingy we will create a mesh from scratch so let's start by specifying a scene by saying con scene within curly braces is
Speaker A
equal to use gltf and then you can pass a path to that gltf model a pretty cool thing here is that you can pass a link pointing to it so we can pass the link that we just copied and we can import use gltf from
Speaker A
react 3 Dre so let's say import use gtf from at re-3 slre great so now we have a scene we also need to create a ref in case we want to play with that scene so we can say con Target ref is equal to use ref
Speaker A
coming from react now instead of rendering a div we can render a mesh this mesh will contain A Primitive within it remember before we learned that a mesh has to contain a geometry a material but in this case we can also
Speaker A
pass a primitive which will act as both so we can say primitive with the object equal to the scene we are importing to this mesh we can then spr spread out all the props that we will pass into the target
Speaker A
component so let's get them here as well we can specify the ref equal to Target ref and let's save it now back in the hero we have to import this target component so let's do just that Target coming from components target. jsx and
Speaker A
you can see it at the bottom left it doesn't look that exciting right now it's just kind of sitting there so let's style it a bit or should I say let's animate it and for that we'll use GP I've also done a crash course on Gap
Speaker A
so I'll link it somewhere below so you can check it out but let me tell you the gist of it when you pair 3js and 3D development with gap which is an animation Library you become so powerful because you can animate 3D objects in
Speaker A
space and time so let's install Gap app react using the terminal by running mpm install add Gap SL react and add the core gsap Library as well just Gap and run enter next we can import Gap from Gap as well as import use Gap coming
Speaker A
from Gap react next we can call that hook use Gap and provide a callback function that'll determine what we want to do with a specific object so we want to animate it to a position so we're going to say gap. 2 which element we
Speaker A
want to Target well it's the target ref. current. position and as the second parameter you can provide variables so y AIS will be Target ref do current.
Speaker A
positiony plus 0.5 we're going to move it 0.5 above we want to animate it in a duration of 1.5 seconds and we want it to repeat minus one and we can set a yo-yo effect to true so it's going to go up and down and
Speaker A
if we now save this you can see that it's kind of jumping up and down kind of like it's floating in space let's also rotate it a bit by giving it a rotation equal to Z Mass Pi / 5 and zero for the z-axis as well
Speaker A
there we go so now it's kind of looking toward the center of the screen great this target was pretty simple the second one we want to add is a react logo so let's go back to the hero and right
Speaker A
below the target we want to render a react logo component so before I declare it let's actually create it as a component react logo. jsx we can run rafc and I will import it right here react logo as a self-closing component
Speaker A
and to it I'll also pass a position equal to sizes. react logo position of course this by itself will break the application because one more time y can tell well we cannot use HTML elements within the canvas because we're in the
Speaker A
3D territory so we have to turn this into an actual 3D element we can do that by downloading another 3D model from sketchfab in this case you can search for react logo you'll quickly come across it there's also one in a circle
Speaker A
and then you can download this 3D model as a glb file once you download it you can go to this website and upload it right here this one doesn't need any additional meshes or scenes or anything like that it is pretty straightforward
Speaker A
so let's go ahead and copy this component and paste it right here of course we can say export default react logo and we can also declare react logo right here at the top con react logo is equal to a functional component
Speaker A
that accepts the props and then returns a function block now if we save this and go back it won't work just yet and that's because we have to update our path our path will actually be coming from slm Models SL react
Speaker A
dgb and as you might know we need to add it right here at the bottom as well so that's going to be forward slash models SL react.
Speaker A
glb as soon as you do that you'll start seeing a nice logo here on the top right now to make it float in space I will rename this group to a float element coming from react 3 Dre and I will move
Speaker A
the props from the float to this inner group right here that'll make it automatically float in Space by using this great float property coming from react 3 Dre I'll remove this common just to make it clearer the unnecessary
Speaker A
Imports and we're left with a very simple use of a 3D model let's also modify its position a bit by saying position is equal to an array of 8 80 and instead of this pose right here under float we can say float intensity
Speaker A
is equal to one and this pose property of null will be added to this group now we can further position it to look better on the screen I will increase the scale of a group right here to 0.3 but I will then modify the scale
Speaker A
under this specific mesh to something like 0.39 0.39 and 0.5 we can also change the position to 0.079 and here we can set it to 0 181 now you'll see a small floating react logo similar to the Target at the
Speaker A
bottom left also it doesn't need the cast Shadow and receive shadows as there's no Shadows on this specific mesh great now if we go back to the hero we can add the remaining two floating thingies on the top left and bottom
Speaker A
right since these two will be almost exactly the same as the Target and react I'll provide their code for you so just create a new component one will be called cube.
Speaker A
jsx and if you go to the GitHub repo under components Cube you can just copy it and paste it right here you can notice that it is a 50 file long 3D model which has the same properties that
Speaker A
the react logo has it has a floating group and on top of it we're applying some Gap animations similar to what we have done with the target so if we go back right here below the react logo we
Speaker A
can now render the cube and pass it a position equal to sizes. cube position so if we go back to repo check this out it looks great and it even rotates from time to time finally the last one we'll
Speaker A
add is going to be a new file called rings. jsx so you can copy it from here paste it into ranks and you can notice that here instead of downloading a 3D model we're using a Taurus geometry and a specific material so we're really
Speaker A
trying to recreate a new model out of scratch and then we are animating it I found this one online and when you start creating different 3js websites online you'll notice that you can often start from great already existing examples so
Speaker A
let's add the Rings right here and let's give them a position equal to sizes. ring position now if we go back you can see that we have floating elements on all four sides of our screen so let's actually enlarge it a bit so we
Speaker A
can better see it and would you look at that it feels much more immersive later on we can play with the camera positioning a bit more and make the central model move when we move our Mouse to make it feel even better but
Speaker A
before that I want to teach you how to change a texture on our main 3D model right here I'll teach you how to change what is being shown on the Central and the left screen right here so you can
Speaker A
completely personalize it back in the hacker room we can load up some of the textures so let me say const monitor texture is equal to use texture coming from react 3 Dre and as with the scenes and gltf models you have to pass a path
Speaker A
of this texture in this case it's going to be textures slesk slm monitor. PNG so textures are nothing more than images and we can actually go ahead and check it out if I search for desk slm monitor you can see
Speaker A
that this is the texture that we want to show on the monitor it is just some kind of a reflection next we can also create another texture and call it screen texture which is equal to use texture and this will be equal to textures desk
Speaker A
screen.png great so now if we check out that one screen.png you can see that it's actually a logo and then a code editor in the middle you can use this image or in case you want to change something
Speaker A
like use your own icon right here or logo you can do that as well by modifying this image and then placing your own image on top of it so how do we actually use these textures well let's scroll down to our first mesh this is a
Speaker A
computer mat so here we can render a mesh mat cap material and to it we have to pass a map a texture map equal to monitor texture and if we save it and I have a small typo here textures actually go
Speaker A
within the meshes before we self-close this mesh we're going to put this mesh matte cap material within it that's going to look something like this and now we can see a bit of a glare happening on the screen making it look
Speaker A
better next let's app our screen texture by going all the way down and you want to go where it says materials. screens I will expand this mesh and within it I will also render a mesh Matt cap material and I'll pass a map equal to
Speaker A
screen texture and save it and you can see this immediately rendered our code in the middle and the logo at the left side great so now you know how to add custom textures to your 3D models you just import them and then you use
Speaker A
them as a material within the mesh with that in mind let's go back to our hero section and let's add the last part needed to make this section even more realistic and that is the ability to pan this element with your mouse so that the
Speaker A
model moves As you move your mouse to do that I'll create a new component in the components folder called a hero camera.
Speaker A
jsx I'll run rafc and instead of a div I'll render a group since we're working within 3js next I will get children right here as a prop to this hero camera and I will wrap children within this group so whatever
Speaker A
we pass within it will still be showing so now we can wrap our hacker room with a hero camera just like this we're going to put it right within it if we reload the screen nothing will really happen
Speaker A
happen same thing but now this allows us to further control how we look at this model so what we can do is first create a ref const group ref is equal to use ref coming from react next we can use
Speaker A
frame this is coming from react 3 fiber it accepts a callback function of a state and a Delta which is a change and here we can declare what we want to change so we can slowly ease the camera
Speaker A
position and for that we'll need a new package called math it is super useful for all different types of math functions so I'll say mpm install ma a thh math once you install it you can say eing do damp 3 this is going to apply a
Speaker A
dampening effect and of course we need to import this easing coming from math you can call it as a function and pass the state. camera. position this is the current position and then you need to pass the target position I'll set that
Speaker A
to be equal to 0 0 and then 20 as the third parameter you can pass the smoothness time which I'm going to set to 0.25 and the third one is the Delta the change that will happen finally we can add a ref to this
Speaker A
group equal to group ref now you can notice that nothing is changing but what happens if I change this target over to something like 30 you can see that everything got smaller and if I change it to something like 15
Speaker A
it animates to being larger so let's keep it at 20 for now and to this hero camera we can pass a prop of is mobile equal to is mobile since mobile devices are small we can cannot really do any animations on
Speaker A
there at least not for this big model so we can make use of it and only animate if not is mobile so if not is mobile I will duplicate this easing and dampening so let's create it right here easing
Speaker A
dampening and I will move it into this if and we still need access to the state and the Delta so we're going to wrap it with a Ed frame all of it will be in there one will be executed for desktop
Speaker A
devices and the other for mobile so what do we want to change if we're on desktop well instead of easing damp 3 we can use easing damp e and change the rotation so we can say group.
Speaker A
current. rotation we can set the target to be equal to state. pointer doy ided by 3 and minus state. pointer dox / by five and then the last one will be set to zero smooth time and Delta can be the
Speaker A
same and this group is actually referring to the group ref which contains our model so if we now fix this typo to rotation and we save it you can see that now as you move your mouse the model will actually change the
Speaker A
perspective this is looking good now we can add a contact button right here at the bottom so once we click contact we scroll to another section but I don't like that once we move our Mouse down we can see the bottom of the table I would
Speaker A
want it to be the opposite so it actually moves up and shows more of the table like we want to do something on the computer so to achieve that you simply need to add a minus right here on the Y
Speaker A
AIS which will make sure that it goes in the other direction so now if I go to our contact button it kind of opens up and invites you to explore more of your portfolio Okay before we go ahead and
Speaker A
add the button let's see if there's something else we can do to make this even better first of all I can notice that the react logo and the target are a bit smaller than the other floating elements so let me head over to the
Speaker A
Target component and I'll just add a scale of 1.5 to make it a bit larger there we go that's good and for the react logo we can do something similar by making the scale maybe 1.4 there there we go that's more like
Speaker A
it and if you want to enlarge the actual hacker room without modifying everything else on the screen you can go into the hero camera and attach a scale to a group because it'll apply the scale to all of its elements so maybe something
Speaker A
like 1.3 there we go so now it's much larger I think 1.2 will do and let's see how this looks like on different device sizes if I Collapse it you'll notice that we're a bit too big right here so
Speaker A
if we change the scale to 1.1 or 1 yeah it does look a bit better on mobile devices so we can use the same is mobile flag right here to determine whether it's 1.1 or just one so we can say if is
Speaker A
mobile then one else 1.3 there we go looks good on mobile and also I'm disabling the easing or the rotation on mobile that's because sometimes it's weird as you scroll that the model Scrolls too if you want to reenable it on mobile you
Speaker A
just have to remove this if check and then as you can see it moves as well but since there's not too much space I would prefer to remove it great with that in mind let's go back to the hero section
Speaker A
and let's quickly add the button that will lead us to the next section that's going to happen right here below the canvas and Below one more div we can create a div with a class name equal to absolute that's because we want to show
Speaker A
it on top of the canvas bottom 7even left zero right 0 w- full zindex of 10 and c-pace to create some spacing within it we can render an anchor tag with an href pointing to Hash contact which will be another section of our
Speaker A
page would a class name of w- fit within it we can render a button and this button will be a custom component which we can create so we can reuse it in different places so for now let me
Speaker A
comment it out and create a new component called button do jsx run rafc and now we can import this button right here by saying button it'll be a self-closing button component but let's make sure to properly imported first so it's going to come from
Speaker A
components button. jsx and we can give it a prop of name which can be something like let's work together the is beam property which I'll show you what it does very soon we have to implement it and then a container
Speaker A
class equal to on small devices W fit usually W full and on small devices m-w of 96 pixels so now we can accept those props within our button component by destructuring them and getting the name the is beam which by default will be set
Speaker A
to false and the container class next we can return a regular button component that will have a class name equal to a dynamic template string of BTN and then it'll render the additional container classes that we want to pass within it
Speaker A
we can can simply render the name we're passing into that button so if we save it now we can see the let's work together button but what about this is beam thing well let me show you if is
Speaker A
beam is turned on then we can render a span element this span will have a class name equal to relative Flex H3 and W3 so it's only taking about 12 pixels on each side within it we can render one more span
Speaker A
that's going to be self-closing and it'll have a class name equal to BTN dping and we can duplicate it and render BTN dping dot just beneath it so now if we save this you can see this pinging Green Dot which kind of invites the user
Speaker A
to click it beautiful with that in mind our hero section is complete complely done it was the toughest section of our portfolio and one of the most interesting ones but don't worry as we'll have many more interesting sections to come the next one is this
Speaker A
amazing Bento grid where you can display all the information about yourself and provide a quick way for people to contact you after that we have a beautiful work section where we'll show this amazing 3D model and within it you
Speaker A
can display your Project's demos and you can switch between them by pressing this button moving below we have our typical testimonials and then an amazing work experience section where will animate a model whenever a user clicks any of your
Speaker A
work experience sections and finally there's a contact Section so with that in mind the next section we'll be working on is the about me Bento grid section but before we focus on that I want to take a second and make sure that
Speaker A
you really understood everything that is happening in our hero section starting off at the top we're using a used media query hook coming from react responsive library that allows us to create a couple of these checks that make it
Speaker A
easier for us to make our 3D models responsive on all screen sizes we do that through a smartly created but a bit manually calculated function that returns an object where we're changing the scales and the positions and rotations of different elements
Speaker A
depending on those media queries next we have some regular HTML but here is where the magic happens we create our first canvas a canvas is a space for our 3D scene within that scene we position a camera and then we render
Speaker A
our hacker room alongside it we also render a group with four different floating elements to the top left right and bottom left left and right positions we add the lights and make it happen but of course the hacker room is the star of
Speaker A
the show here we first learned how you can import 3D models from different places such as sketch Fab and once you download them we learned how to use a gltf to react 3 fiber component website that quickly turn this model into a nice
Speaker A
component and we simply had to point to the glb model then you also learned that you can use different images as textures which you can then add as materials to meshes in some of these floating elements we also learned that you can
Speaker A
use gap which is an animation Library separate from 3js but combining it together makes you a very powerful 3js and animations developer so if you want to check it out further there's going to be a course about it linked below here
Speaker A
we also learned that you can use an online hosted path to some of these models you don't necessarily have to have them stored in your system finally we played a bit with position scale and rotation making you move from Theory
Speaker A
where we were learning about X Y and Z positions to practice where you can actually use them within your code hopefully this makes sense if not no worries as we start developing additional sections we'll revisit this entire process many times so you can
Speaker A
truly become an independent and confident 3D developer so with that in mind let's move to our next section of the day which will be an about section so let's create a new section and let's call it about. jsx run
Speaker A
rafc and then import it within the app once you do that you can navigate over to it we can collapse our editor so we can see both things at the same time and we can get started developing it so
Speaker A
let's start by turning this div into a section with a class name of C- space to give it some space and a margin y of 20 next we can wrap it in a div that will have a class name of grid yep we'll
Speaker A
actually be using grid here I typically prefer flex but in this case we really will have a gridlike structure so let's utilize it on extra large devices the grid will have three columns so we can say XL grid calls three on extra large
Speaker A
devices the grid will have six rows so we can say grid row six on medium devices we'll have a grid of two columns and typically we'll have a grid of one column with a gap of five in between the
Speaker A
elements and a full height within it we can finally start creating one of those columns so let's let's create a div with a class name equal to call- span-1 on extra large devices row dpan-3 and within it we can have a div
Speaker A
with a class name equal to grid Das container within this div we can have an image that'll have a source equal to for SL assets slgd 1.png with an ALT tag equal to grid -1 and a class name of
Speaker A
w-o on small devices h- in square brackets 276 pixels with an H fit and an object Das contain if you save this and scroll down you should be able to see a beautiful image presenting our first grid cell below that image we'll render
Speaker A
another div inside of which we'll have a p that's going to say hi I am Adrien of course you would put your own name here and we're going to give it a class name equal to grid Das head text there we go
Speaker A
that's better below this P tag let's render a second P tag that will have a class name equal to grid Das subtext and here we can say something like with 12 years of experience or in your case you
Speaker A
can put 1 two three however many you have I have home own my skills in front-end and backend development with a focus on animated 3D websites there we go this is looking good now we can properly indent all of these divs and P
Speaker A
tags that's going to look something like this and we can go below one two three more divs there we can create our second span so right now we are closing the first initial span span this one right here
Speaker A
and now we're opening up a second one this span will have a class name equal to call- span-1 and an extra large devices row- span D3 within it we can create another div with a class name equal to grid Das container and within
Speaker A
it we can render another image with a source equal to assets slash Grid 2 PNG we can also start with a forward slash so it finds this image and we can give it an ALT tag of grid-2 and a class name equal to
Speaker A
w-o on small devices w276 pixels that's going to be still within the class name so we can fix it h- fit and ob- contain if we save it you can see this beautiful illustration where we have jav JavaScript master in the middle
Speaker A
and you have some other logos on the side this is framer motion Tailwind CSS nextjs react 3js and typescript if you want to exchange this image it's pretty simple you would just head over to the public folder and put your own image
Speaker A
within the assets and then refer to it right here instead of assets Grid 2 now below this image not below the div just the image we can create a new div and within it we can create a P tag with a
Speaker A
class name equal to grid Das head text and there we can say Tech stack there we go right below it we can duplicate it and create a grid with a subtext class name that will say something like I specialize in
Speaker A
JavaScript SL typescript with a focus on react and nextjs ecosystem and if we save it that's looking good of course you can write this on your own to make it more personal to you now let's go one two three divs down and let's
Speaker A
create another span element again it'll be very similar it'll start with a class name equal to call- span-1 on extra large devices it'll be row- sp-4 within it we want to have another div with a class name equal
Speaker A
to grid Das container and within it we can render a div with a class name equal to rounded -3 XL w- full on small devices h- 326 pixels I found that value to work well h- fit Flex justify Dash Center and
Speaker A
items Dash Center to center it both horizontally and vertically so since we're on a mobile view right now we can see all of these elements appearing one below another but very soon you'll be able to see them in a
Speaker A
grid that looks something like this so looking at the deployed application the next element we want to add is this globe right here and adding it will be super simple that's because somebody actually created an mpm package which
Speaker A
simply exposes this 3js element so we saw a couple of different ways to Infuse your apps with 3js one is to create it from scratch by creating a mesh with a geometry and a material the second one is to find it online or download it from
Speaker A
sketchfab or refer to a specific link where you can then add it to your code and the Third Way is to Simply install a package that uses 3js behind the scenes and in this course I wanted to cover all
Speaker A
the ways so let's install that package by running mpm install react Das globe. once it gets installed right here you can simply say globe and we can import it from that package that we just installed react globe. if we save it on
Speaker A
its own and go back to application you can already see some kind of a dark sphere right here but by passing additional properties we'll make it look better let's modify the height to 326 as well as the width to 326 to make sure
Speaker A
that it is of a proper circular shape or maybe height should be about 10 if the Earth is flat that's going to look something like this well it's too dark to see anyway so next let's remove this Background by saying background color is
Speaker A
equal to rgba will do 0 0 0 and then zero for opacity as well which will completely hide it next we can change the background image opacity and I'll set that to 0.5 we can also show The Atmosphere by
Speaker A
simply setting this to true and we can show gratical finally you know how we can apply textures to different 3D models well they allowed us to do that as well by simply saying Globe image URL and then here we can pass the URL to a
Speaker A
specific image that we want to show I already found some links right here where they have a basic and different Source codes so if we refer to Globe image URL you can see that by default it's not set to
Speaker A
anything but if we look at the default basic Earth we should be able to find an example there we go something like this would work but this one has some specific data points as well which is pretty cool if you think about it so
Speaker A
what I'll do in this case is I'll provide you with these links in the readme down below so you can simply copy the globe image URL as well as the bomb image URL and they're going to add the
Speaker A
necessary texture in this case since we have a dark mode website I wanted to show the Earth at night but if we just switch this over to day you can see it in the day as well it is completely up
Speaker A
to you the next thing you can do is add a labels data which is an array of objects that you want to show on the map you can choose a specific latitude like 40 or longitude of minus one let's say
Speaker A
and then you can add a text such as I'm here you can also add a color of white and then you can add a size of something like 20 if you save that and if you put correct coordinates if you zoom in just
Speaker A
enough you can see the I'm here tag feel free to add this in case you want to share your location with other people else it's still good to include the map because it points that you work worldwide remotely so in this case I
Speaker A
will actually remove this labels data great let's go one div down and then here we can add a div that will contain our head text and subtext so let's add a P tag and within it we can say something
Speaker A
like I work remotely across most time zones and we can give that a class name equal to grid Das head text and we can create one more P below with a class name equal to grid - subtext and say
Speaker A
something like I'm based in Catia or you can put your country here but say with remote work available there we go this makes sense and below that P tag we can create a button or just reuse our existing button component imported from
Speaker A
components button and we can give it a name of contact me is beam turned on and a container class of w- full and margin top of 10 there we go so now they can also contact you right from here now
Speaker A
let's go three divs down one more time and let's create another element of our table let me show you how it looks like right now if I go here there we go it's going to look something like this so let's collapse it
Speaker A
and let's give this next one a class name equal to call daspan Das -2 on extra large devices so we have to specify that and on extr large devices row- sp-3 right within it we can have a div with a class name equal to grid Das
Speaker A
container and within it we can render an image that'll have a source of SL assets slgd 3.png that'll render this image right here a very cool modern illustration and it can have an Al tag of grids D3 and a
Speaker A
class name equal to w-o on small devices h- 266 pixels h- fit and object Das contain right below it we can explain what this illustration means so below the image let's create a new div and within that div we'll have a P tag with a class name
Speaker A
of grid Das head text that'll say something like my passion for coding we can duplicate that P tag right below change it to grid Das subtext and we can say something like I love solving problems and Building Things through code coding
Speaker A
isn't just my profession it is my passion if we save it that's looking good we can one more time go three divs down and create yet another table cell by creating a div with a class name equal to on extra large devices call-
Speaker A
span-1 and an extra large devices row- span D2 within it we'll have another div with a class name equal to grid Dash container and within that div we'll have an image you know the drill by now they'll have a source of
Speaker A
assets grid 4.png with an Al tag of grid 4 and a class name of w-o on medium devices h-16 pixels on small devices h- 276 pixels age- fit object D cover and on small devices object dashtop which will change its position there we go so
Speaker A
this is looking pretty good we have some kind of numbers they look like the old school phone dialing system but in a bit more Modern Way letting people know that they can reach out to us so let's go
Speaker A
below that image create a new div with a class name equal to space- y-2 and within it we can create a P tag that's going to say contact me that'll have a class name equal to grid Das subtext and text- Center next
Speaker A
below that P tag we'll render a div that will have a class name of copy Das container and on click we'll be able to copy oura email so here I can call a function called handle copy which we can
Speaker A
declare right here above by saying con handle copy is equal to an arrow function and in this function we simply want to copy to clipboard or email so we can say navigator do clipboard. write text it is that simple
Speaker A
and then here you write what you want them to copy in my case I'll use Adrian at Js mastery. proo you can use your own email once we copy it we want to somehow save it to the state so we can indicate
Speaker A
that indeed it has been copied so let's create a new state use State we'll call it has copied set has copied at the start equal to false and then here once we copy it we can set has copied to true
Speaker A
and then we can set timeout which will make sure to after some amount of time like 2,000 milliseconds which is 2,000 seconds reset the set has copied back to false so we can recopy it if we want to
Speaker A
so now moving down right here we're calling that handle copy and within it we can render an image this image will have a source if has copied is already true then we'll render the assets SL tick. SVG so that's
Speaker A
a check mark else will render the assets copy. SVG with an Al tag of copy that's going to look something like this and you can actually click it and it'll reset back to nothing below that image we can render a P tag that'll say What
Speaker A
They're copying so here you can type your email one more time and I'll also style it a bit by giving it a class name equal to on large devices text -2X on medium devices text- excl font medium text- gror gradient and text-
Speaker A
white so we can actually see it perfect so now when they click this whole thing they have just copied your email and if they go to paste it somewhere you can see that it'll indeed be copied beautiful and believe it or not
Speaker A
that led us to the end of this about section let's check it out in its full Glory of course just like this everything still nicely appears in one line no matter how small we go you can see it works beautifully on mobile
Speaker A
devices and you can also move this Earth around but if we expand it to full screen well this is where the magic happens because we get this beautiful modern developer Bento grid where people can learn a bit more about you about the
Speaker A
text tag that you use that you work remotely that you have a passion for coding as well as they can copy your email or just press contact me to be navigated directly to the bottom of the page beautiful but let's just fix some
Speaker A
little inconsistencies for example with this contact me button it's not taking the full width of the card so if we find this contact me button it is right here we need to make sure that we have a double fo applied right here which we do
Speaker A
so let's check if it's properly being used within our button oh and looks like we have an extra dollar sign right here this was just supposed to be rendering the container class and if we fix it you can see that
Speaker A
the contact me button now takes the full width and this is looking even better great so now our hero section is done and we have a beautiful Beno grid About Us section the next section we can focus on is the selected work section Yep this
Speaker A
is an exciting one where you can move around this 3D monitor that showcases a video of a demo of your specific project in this case we're looking at a podcaster AI platform another one of our YouTube videos but if you click here it
Speaker A
actually changes the data to another project the model then rotates and then as you can see another demo fires up so this is a very cool functionality I think it's quite practical and effective as well so let me teach you how to do it
Speaker A
I collapsed my browser I will close the about section and I will create a new section I'll call it projects. jsx run rafc open up those projects right here as a self-closing component we can dive right into it and start implementing it
Speaker A
first things first let's turn this div into a section it'll have a class name of c-space and a margin y of 20 right within it we can have a P tag with a class name of head Das text and it can
Speaker A
say my work there we go so we can proudly showcase it right beneath it we can have a div that'll create another grid so we can create a div with a class name of grid on large devices grid
Speaker A
ds-2 typically grid - calls -1 margin top of 12 gap of five between the elements and a w of FO next we can have an inner div with a class name of flex flex-all gap of five relative on small
Speaker A
devices padding of 10 typically padding y of 10 padding X of five Shadow das2 XL and Shadow dl-200 and let's fix this class name spelling we cannot see it yet as it's quite dark but we can add another div
Speaker A
right within it with a class name of absolute top- 0 and wr-0 and within it we want to show our project image so let's say IMG with a source equal to my projects this is coming from constants z.
Speaker A
Spotlight we can give it an ALT tag of Spotlight and a class name of w-o h-96 object D cover and rounded D Exel if we save this you can see a spotlight which is a beam of light in a
Speaker A
specific shade just to make this project special so each project can have its own Spotlight if you go to my project you'll see that we have a few different projects and each one will have a different Spotlight value of course
Speaker A
these are the projects that I created and I want to invite you to completely modify this information here from podcaster to maybe something that you created give each project a title this description an H to a deployed site
Speaker A
class name texture logo logo style and so much more or you can simply follow along with my projects and then actually build and deploy them by following my YouTube tutorials so if we go back we can go below this div that's
Speaker A
wrapping this image after we indent it properly below it we'll have another div that'll have a class name equal to p -3 backdrop D filter backdrop D blur D3 xcl wfit and rounded - LG we can also give it a style of my project
Speaker A
z. logo style so this will just give it some kind of a special color backdrop within which we can display our project logo So within it let's render an image with a Source equal to my project z. logo we can give it an Al tag of logo
Speaker A
and a class name equal to W10 h10 and Shadow DSM there we go so now you can see a logo of our first project now instead of simply saying my project zero every time let's rather create a current project so
Speaker A
for now we can say const current project is equal to my project zero later on we will switch this zero number or the index depending on which one are we currently checking out but for now we can simply say current project instead
Speaker A
of my project zero and everything will still work perfectly now we can go below this div that encloses the logo and we can create another div which will be a container for our text so let's give it a class name equal to flex
Speaker A
flex-all gap of five text- white 600 and margin y of five within it we can render a ptag that'll render the current project.
Speaker A
tile and we can give it a class name equal to text- White text- 2XL font D semi bold and animated text so now this is much more pronounced we can create an additional P tag below with a class name
Speaker A
equal to animated text that's going to render the current project. description or DC for short we can duplicate it and render another one which would be sub DEC sub description so if we save it you can see how everything nicely appears
Speaker A
right here next we want to render technologies that we used to create this project so let's go below this div containing the sub description and let's create another div with a class name equal to flex items Das Center
Speaker A
justify Dash between flex-wrap and a gap of five within it we can render a div with a class name equal to flex items Dash Center and a gap of three in between the elements and there we can map over current
Speaker A
project. tags. map and for each tag we also want to get its index and we want to immediately return a div this div will have a key equal to index and a class name equal to te- logo within which we want to render an
Speaker A
IMG tag with a source equal to tag. paath and then I'll tag equal to tag.
Speaker A
name and if we save this you can see react tailwind typescript and frame or motion appear right here one after another right below this map and Below another div we'll put something to the right side of these icons and that's
Speaker A
going to be just the basic anchor tag that'll render a pag tag that's going to say check live site and it'll also render an image with a source equal to/ assets SL arrow-up PNG with a class name equal to W3 and
Speaker A
h-3 for the size and let's also give it an ALT tag equal to arrow and we can style this anchor tag by giving it a class name of flex items-- Center gap of two cursor Das pointer to make it appear clickable and
Speaker A
a text- white- 600 beautiful let's also give it an hre pointing to current project.
Speaker A
href and a Target uncore blank to make sure that it opens up in a new page and doesn't close our currently open portfolio when you provide a Target of underscore blank you also have to give it a real equal to no
Speaker A
refer great so now we have this check live site link and we have our technology icons which means that the left side of our project details is now done but now the interesting part happens right below these icons and the
Speaker A
live side link We'll add arrows from going to left and right project to be able to learn more about other on so let's Implement that next I'll go below this anchor tag and below the div and create another div which will act as the
Speaker A
container for the arrows it'll have a class name equal to flex justify Dash between items Das Center and the margin top of seven within it we can render a button just a regular underscore button no need to use our button and we'll give
Speaker A
it a class name equal equal to arrow button or BTN we can also give it an onclick which is going to call a callback function handle navigation and we'll pass a direction of previous so this is a function that we
Speaker A
have to declare so let's do that right above I'll go to the top of our functional component and say const handle navigation which takes in a direction in which the person wants to go left or right and then then based on that it'll
Speaker A
modify the index so let's Implement that logic right away for this to work we have to have the index of the selected project so let's create a new use State let's call it selected project index set select the project index at the start
Speaker A
set to zero next within handle navigation we can set selected project index by calling a callback function within the setter state remember what this does it gives you access to the previous state so I can call it prev
Speaker A
index and then we can check for the direction if the direction is equal to previous then we can return and check if prev index is triple equal to zero then we have to go to the last one but for
Speaker A
that we have to figure out how many projects do we actually have so right above our component we can say const project count is equal to my projects that length so if prev index is equal to zero then we're going to go to the last
Speaker A
one by saying project count minus one because indices start from zero else we simply want to say prev index minus one to go to the previous one else we want to check if prev index is equal to project
Speaker A
count minus one so that means that we want to go next but we are at the end in in that case we'll simply reset to zero else we'll move it ahead by one I hope this makes sense now that we have this
Speaker A
logic and the handle navigation function we can scroll down and we're handling direction to go to the previous project within this button let's render an image with a source of SL assets SL wr- arrow.png with an Al tag of WR arrow and
Speaker A
a class name of of W-4 h-4 and now we can duplicate this button just below and change everything to the right button so on click it'll go to the next project it'll be assets right arrow and the top one will actually be the
Speaker A
left one and here it'll say left Arrow if we save this you can see two new buttons appear that point to left and right so now we can actually use the currently selected project index to change the current project it no longer
Speaker A
has to be my project zero actually it'll be my projects and then selected project index so if I save this check this out you can actually move between different projects isn't this amazing but this is only the first part of our amazing my
Speaker A
work section because now we'll actually develop a computer screen where it's going to rotate once you change the project and we'll be showing that project's demo right within this 3D computer so let's do that next by going to the bottom of the jsx and we'll go
Speaker A
below this button and Below two more divs right here there we can create a div which will act as the container for our canvas so let's give it a class name of border border dl-300 background of black 200 rounded dlg
Speaker A
h-96 on medium devices h- full if we save this you can see a nice space within which we can display our 3D model so let's do that right now that's what you came for in the first place right so
Speaker A
let's render a canvas this canvas will of course come from react 3 fiber which is our connection between the 3js library and react Library within the canvas let's just render some lights I'll render an ambient light right here
Speaker A
with an intensity equal to one after that I'll also add a directional light and I'll give it a position equal to 10 10 5 so it shoots from a bit of a different angle after that we'll render something known as Center and this is
Speaker A
coming from react 3 R it is a super useful utility that will simply Center the 3D model on the screen as the name suggests within it we can render that suspense remember suspense is used to show something while we're currently
Speaker A
loading so we can show Thea back of a component called canvas loader which we have created before finally within it we can render a group of elements and then we can scale position and rotate that group so let's set the scale to
Speaker A
something like two a position of something like an array of 0 minus 3 and zero I found those values to work well and then a rotation of something like 0 minus 0.1 and then zero finally within it we want
Speaker A
to render a computer showcasing our project demo so let's create a new component in the components folder and let's call it demo computer djsx here we can run rafc and instead of rendering a div we cannot do that because we're within a
Speaker A
canvas we can render something like a group for now and we can import that demo computer right here as a self-closing component so let's get into it and let me show you how to add a 3D computer model just like this one by now
Speaker A
you should already know the drill but repeating it doesn't hurt so let's do it together how would you approach finding this model and then adding it right here since we have already done this a couple of times you might want to pause this
Speaker A
video and give it a shot by yourself try to find it online downloaded converted using the gltf to react 3 fiber component converter and then add it right here let me know how it goes or just continue watching this video and
Speaker A
I'll show you how to do that right away first things first head over to sketch faab and search for something like 3D computer you'll see a couple of good ones and I think this is the one we want
Speaker A
to use there we go looking beautiful even has some animations so click download 3D model go for glb and you can see that this one also provides you different resolutions now this is a choice that you have to make wisely if
Speaker A
you wanted to have more quality and texture then you would go for the 4K one but if you wanted to load faster then you can go for 1K in this case I'll proceed with the 1K version because this
Speaker A
is not our main primary hero model so we don't necessarily want it to be of an amazing resolution but we want it to load quickly this time instead of Simply downloading one of the provided gltf or glb files I've actually had to go ahead
Speaker A
and do some blender work yep I know that sounds scary blender is a 3D rendering and 3D modeling solution and of course that goes beyond just 3D development but sometimes you'll have to work with modelers or you might need to
Speaker A
learn a bit of blender yourself so you can customize and modify the 3D models that you download for example in this case a friend of mine that does blender helped me change this computer screen so I can insert my own website demo instead
Speaker A
of this spinning globe we'll dive deeper into some minor blender config configurations of 3D models in the ultimate 3js course but for now what you can do is go to the public folder open up models and then find a computer. glb
Speaker A
model this is a model that has been modified so we can include which is going to be our project demo so open it up in finder or file explorer and then simply drag and drop it right here in
Speaker A
our gltf to react 3 fiber component Creator it'll quickly show you how it looks like and you can press play go to exports and then copy to clipboard once you do that you can override the existing demo computer and you can say
Speaker A
export default demo computer make sure that this is pointing to slm modelscomputer dgb and right at the top we have to repeat that by changing the model name to const demo computer which is equal equal to a functional component and then we
Speaker A
have to also change the path to a model by saying SL models SL computer.
Speaker A
glb if you do that and save it and go back you should be able to see this beautiful model right here as a matter of fact let's immediately add orbit controls so we can also orbit around it using our Mouse we can do that just at
Speaker A
the bottom of the project section where we have this Center you want to go below the center and you want to add orbit controls coming from react 3 fiber right here with a Max polar angle equal to math. pi/ 2 so that means that you'll be
Speaker A
able to look up and left and right but you won't be able to go below the table so we want to change this polar angle and we'll also disable the zoom so we can say enable Zoom is set to false if
Speaker A
you do that you can start moving it around this is pretty cool you can also make the light a bit stronger in this case instead of one for the intensity of the ambient light I'll use math. Pi that's about 3.14 so if you save it you
Speaker A
can see that it has a bit more color and light great so let's go back into the demo computer and let's figure out how we can apply our demo texture of a specific project we're currently viewing to this screen well we won't need this
Speaker A
use animations so we can delete that part but what we will need is a video texture so we can say cons txt short for texture is equal to use video texture that of course is coming from react 3 Dre and we can say
Speaker A
slash textures SL project slpr 1. MP4 and now we can use that texture with the screen by checking the first mesh with the name of monitor screen we can expand it as you might know already and by expanding the mesh you can pass a
Speaker A
mesh material called mesh basic material right within it with a map equal to txt as in texture if you do that you can start seeing the video play immediately now what if you want to change this video well it is under textt
Speaker A
project project 1 MP4 so let's try to find it it is right here in public textures project 1 MP4 so in case you want to switch this to your own demo you can screen record and update this file
Speaker A
to your own screen recording and then it'll just import it nicely now the second question that you might have is how can we change this project demo once we switch to a different project as a matter of fact let me try
Speaker A
to expand this a bit more so we can see both the project name and the demo at the same side you can see we're switching between the projects but they're not changing the only thing you have to do is pass a prop into this
Speaker A
project and that's going to be texture is equal to current project. texture because based on the indices of when we switch different projects we can now pass a different texture and those textures are a attached directly within the constants right here it simply
Speaker A
contains a path to a video file which acts as a texture so now that we're passing it we can accept it as a prop right here within the demo computer model so we can say use video texture and then we can say if problems. texture
Speaker A
exists then we can say problems. texture else we can simply use the predefined number one texture let's save it and now now if I switched to a second project you can see that it actually switched this is amazing great this works too next I
Speaker A
don't really see the change that well if the demos are all dark as you can see in this case well here it's light so it's a bit better but still it's hard to notice that something changed on this screen
Speaker A
because there's too many moving screens anyway so to make that change a bit more apparent we can use Gap to add a bit of an animation so so let's say use gap which we have to import from Gap react
Speaker A
that's going to take in a callback function and in there we can call Gap from the main gsap library so that's import Gap from Gap Dot from so we want to animate from group. current.
Speaker A
rotation to a new rotation of Y is equal to math. Pi divided by two so that's going to be half a circle it's going to do it in a duration of 1 second with an ease of power 3. out I found this
Speaker A
animation to work the best and when is this animation going to run well once the dependency of the used G subhub changes and that is whenever a texture changes so we have to call this after defining the texture right here now if I
Speaker A
save this you can see that it rotated and once I click it rotates and makes a full circle to show that the demo has actually changed this is great now I can notice that this texture is upside down
Speaker A
so let's actually flip it I'll use a basic use effect to which I can pass a callback function and I can say if a texture exists so if texture then I can call a txt flipy is set to false so I don't want to flip
Speaker A
it vertically and we can make this happen whenever a texture changes so if I save this you can see that now it is looking good perfect we're not using these animations coming from used gltf so we can remove that part that was for the
Speaker A
globe that was previously on the screen but now we have our own textures that we're showing as demos beautiful so let's expand our browser to admire this in its full glory and I mean just take a look at this take it in in its full
Speaker A
Glory starting with a hero section that we can move around and it really feels like all the elements are flying we go down the screen moves up and we are ready to enter the world I actually want to change the link of this button that
Speaker A
says let's work together to kind of point us to the second section not the contact because once I scroll down it's so nicely invites you into your portfolio so let's go to this hero section and let's find the button at the
Speaker A
bottom and I will actually pointed to a second section which is about so if we head over to the about section and I can give it an ID right here at the top equal to about now if we go back and click let's
Speaker A
work together it actually navigates to the about section but that wasn't smooth at at all and didn't look like our website our website is nicely animated and has some 3D elements so to fix it we can quickly head over to our index.css we can Target
Speaker A
all elements and set the scroll Behavior to smooth once you do that go back to your website and click let's work together there we go that's much more like it so as I was saying we have a beautiful hero section a great above a
Speaker A
section and then such a geniusly designed project section where we have all the project information and Technologies on the left side you can also check out the live side link and you can move between different projects while at the same time the 3D model that
Speaker A
showcases the demo rotates and shows you a new demo beautiful but is it responsive well let's give it a shot I'll turn on the mobile responsive View and check this out you can see all all the project information and then you can
Speaker A
scroll down to see additional model to see the model demo if you want to go next you just click it and you can read through it great so with that in mind let's head over to the next section that
Speaker A
is a must have on every portfolio and that is a pretty simple testimonial section people wanting to hire you want to see other people say good things about you so let's close all of the currently open files besides the app and
Speaker A
let's create create a new section just below the project section and call it clients. jsx run rafc and then import it as a self-closing component right here that's going to be clients we can dive right into it and
Speaker A
start implementing it this section will be super simple to create trust me so let's just turn this into a section with a class name equal to C- space and a margin y of 20 within it we can just
Speaker A
render an H3 that will have a class name equal to head- text and in there we can say something along the lines off here from my clients if we save that and go down you can see the headline right here so how
Speaker A
are we going to actually display those cards well first we need to create a container for them with a class name equal to client Das container then we need to have a collection of reviews which want to show thankfully I already
Speaker A
created mine within the client reviews coming from constants each review has an ID a name a position image and a review so let's map over them by saying map where you get each individual item or a View and for each one you can
Speaker A
immediately return a div each div has a key equal to item. ID and instead of saying item. ID item. name and so on we can just destructure the ID the name the review the image and the position so now instead of saying item
Speaker A
id we can just say key is equal to ID and we can give it a class name equal to client d review if I save this you should be able to see four different rectangles right here well barely
Speaker A
because they're not that noticeable but within each one we can create a div and then within that div we can create a P tag with a class name of text- white font dasl and there we can render the
Speaker A
actual review so now we have four different pieces of text telling something nice about you below this P tag we can render another div that will have a class name equal to client Das content and the cool thing about this
Speaker A
component we're creating right now is that it's just one component but we're mapping over it so technically it appears like a reusable component within this client content div I can show another div with a class name of flex
Speaker A
and a gap -3 let's fix this spelling under class name and within it let's render an image with a source equal to IMG an L tag equal to the name of the person that reviewed and a class name of
Speaker A
w-12 h-12 and a round the- fo we typically round the Avatar images so now we can see the images of four different people that provided you with the review of course if you want to switch this you would upload new images under assets and
Speaker A
then change the path right below the image we can render another div with a class name equal to flex and flex-all and then within that div we can render a P tag that will have a class name equal to font D semibold text-
Speaker A
white- 800 and it'll render the name we can do something similar right below by rendering another P tag with a class name equal to text- white- 500 and on medium devices text- Bas usually text- smm and fond Das light in there we
Speaker A
can render their position so if I save this this is looking good maybe we don't have to make it light because it's too hard to see so this is actually good we can go two divs down and then create
Speaker A
another another div where we're going to show the number of stars that they gave you so we can give that a class name equal to flex self end since we want to put it at the end of this card and it'll
Speaker A
have items Das Center and a gap of two between each star there we can say array. from and we want to pass a length of the array of five because all of them want to of course give you five Stars
Speaker A
once you create an array of five elements we can say do map where we don't really care about the info that is in there so a good practice is to put an underscore there and then we actually care about the index so we can simply
Speaker A
show an image for each one of these indices with a key equal to index and a source equal to SL assets slashstar do PNG if you save it you can see five huge stars for each review let's also give it
Speaker A
an alac of star and a class name equal to W5 and an H of five to make it just a tiny bit smaller and that leaves you with a finished client section that has four different reviews of course you can add
Speaker A
as many more as you want and this section is completely mobile responsive so you can see see it like this or on desktop it looks great and it very nicely complements the previous section kind of where you're showing your
Speaker A
projects and then you hear about the great things people say about you which leads us to our next section my work experience new employers typically want to know where you worked before so they can see what kind of skills do you have
Speaker A
and what kind of environments can you find your way around so this is going to be quite an interesting section so interesting in fact that I want to keep it for the end so before we focus on this one we can focus on the contact me
Speaker A
section so that future employers can reach out to you via email and give you a job so to implement it we can go back to our app and create a new section in the sections folder and call it
Speaker A
contact. jsx run rafc and then render it right here near the end contact there we go we can go into it turn it into a section with a class name of c-space and margin y20 and then do what
Speaker A
we always do which is to render an H3 with a class name equal to head- text that'll say something like contact me and now we're ready to create yet another great section section of your new 3D portfolio first things first I'll
Speaker A
wrap this H3 within a div that div will have a class name equal to relative Min dh- screen Flex items Das Center justify Das Center and flex-all so the elements appear one below another next right within it I'll render a
Speaker A
self-closing image with a source equal to SL assets SL terminal. PNG it'll have an Al tag of terminal background and you'll see very soon why that is and it'll have a class name of absolute as it'll be absolutely positioned with an
Speaker A
inset of zero and Min dh- screen so if I save it check this out it's like a terminal window from within which people can contact you so let's go right below this image still bit in the same div and
Speaker A
create another div with a class name equal to contact D container within it we can put this H3 and maybe change it to something more casual like let's talk then right below it we can have a P tag
Speaker A
and that P tag will have a class name equal to text- LG text- white- 600 and the margin top of three here we can say something along the lines of whether you're looking to build a new website improve your
Speaker A
existing platform or bring a new project to life I'm here to help or feel free to write something that resonates with you next right here we can create a form later on we'll interact with that form so we have to create a ref pointing to
Speaker A
it as well as a state and a Handler so right at the top we can say const for ref is equal to use ref of course coming from react next as I said we need to have a state for that form so we can say
Speaker A
use State call it form and set form at the start equal to an empty object with a name property equal to an empty string an email property equal to an empty string as well and a message equal to an
Speaker A
empty string at the start we can also create a handle change function which we can call once we type something in so whenever the input changes and of course we'll need a handle submit functionality as well both of which I'll leave pretty
Speaker A
empty for now we'll add some logic later on and let's not forget once we submit we'll actually have to turn on the loading so let's create a new state of loading set loading at the start set to false and and let's go back to the jsx
Speaker A
now to this form we can provide a ref equal to form ref and then onsubmit Handler equal to handle submit we can also give it a class name equal to margin top of 12 Flex flex-all space- y-7 to create some
Speaker A
space right within it we can render a label for our first input this label will have a class name equal to space that Y-3 to create some space and it'll contain a span element that'll have a class name equal to field Das label and
Speaker A
it'll say full name just like this right below it we can render a self-closing input tag that'll have a type is equal to text a name equal to name a value equal to form do name an on change equal
Speaker A
to handle change a required field a class name equal to field Das input and a placeholder equal to John Doe if we save this you can see a beautiful full name field well it's not really that beautiful it is just simple and
Speaker A
effective so now we can duplicate this two more times duplicate the entire label containing the span and the input one and two more times there we go now we can further modify them the second one instead of full name can just say
Speaker A
email the type will be an email field the name will be email the field in the form will point to the email field I think you see where this is going and the placeholder can be John do atgmailcom
Speaker A
great finally let's focus on the last one which will contain the actual message so the pan will say your message like this and instead of an input let's use a text area that'll have a name equal to message a value equal to form. message
Speaker A
on onchange equal to handle change required with five rows a class name of field input and a placeholder of hi I'm interested in dot do dot somebody might want to start typing something like that to you or if you want to be funny
Speaker A
something like hi I want to give you a job dot dot dot that's most likely why they're reaching out right so they can explain their reasoning right here great this terminal image is a bit skewed right here on mobile
Speaker A
devices so if you want to you can disable it on mobile you can do that by disabling this image right here and and it still works very well but I'm going to keep it because on desktop devices this is quite an interesting way to show
Speaker A
a contact form especially for a developer portfolio so with that in mind let's add a button that they can use to send you a message we'll add it below the last label still within the form by adding a
Speaker A
button with a class name equal to field dbn a type equal to submit and it's going to be disabled while it is loading now the text of the button if it's loading will be sending da dot else it'll be send message and we can also
Speaker A
render a self-closing image with a source equal to SL assets SL arrow-up PNG with an ALT tag of arrow-up and a class name equal to field Das BTN uncore arrow and that's going to look something like this pretty clean of
Speaker A
course if you click it you won't be able to submit because the full name field is required so now let's implement the actual sending functionality by scrolling to the top of the component and first keeping track of what our
Speaker A
users are typing in in the handle change we can destructure the event to get the target out of it and then we can destructure the name and the value of of what we're typing in once we get that
Speaker A
you can call the set form you can destructure the previous values of the form by saying do do do form and then dynamically you can change the field of this specific name with this specific value so this is a very clean way of
Speaker A
creating a reusable handle change component that you can use on any field how does it work is it takes the name of the input and the value of the input and then update it accordingly based on the name and the
Speaker A
value great now to implement the actual email sending logic we'll use a very simple free tool that allows you to do just that it's called email JS you can get to it by typing email j.com and click create a free account it's so
Speaker A
simple they don't even offer oath you'll have to type in your email and name manually once you sign in you'll be greeted with a dash board that looks something like this specifying that you have 200 free requests and inviting you
Speaker A
to create a new service so let's add a new Gmail service give it a name copy the service ID and for now paste it as a comment right here and then click connect account once you grant your email permissions it's going to say
Speaker A
connected then create a service and if it has been connected successfully you should also be getting an email from email Js indicating that it works so how do we actually integrate it well let's go into the handle submit let's get an event
Speaker A
right here that's going to be a click submit event and whenever you submit a form in the browser it reloads the browser but since we're working on a single page application we don't want that to happen so we can say e. prevent
Speaker A
default next we can set the loading to true because we're starting to send our email then we'll have to use an email JS Library so let's go to our terminal and run mpm install at emjs SL browser once it installs you'll
Speaker A
be able to use email JS which you can import right here at the top by saying import email Js from @js browser on this email JS variable you have a send method which accepts a service ID so this is the ID that we just copied from
Speaker A
email JS and you can add it as a string right here it also accepts a second thing which is a template ID so head over to the second link on the left side bar here and check out your default
Speaker A
template it simply says email to this address from name and then reply to you got a new message from name to message this is looking good to me so let's let's go to settings right here and copy this template ID I'll pass that as the
Speaker A
second parameter to this function I'll actually put all of these in new lines so it's easier to see what is happening and the third parameter is the actual form data so here you can send the from undor name equal to form. name
Speaker A
okay this is from this is form how do you know that you have to pass the from name well because that is a meta variable right here in the template so whatever you pass here from name it'll appear right here in the template it'll
Speaker A
appear right when you get the email so it's going to say new message from from name okay that's good next we also want to give it a to name it's coming to you so put your name there from email will
Speaker A
be equal to form. email and then to email will be your email so I'll put Adrian jm.pro and finally the most important part you want to send is the message which is equal to form. message great and now we can use async await to
Speaker A
figure out what happens when we send the message so I'll make this function async and I'll wrap this in a try and catch block so that's going to look something like this we have a try and then we have
Speaker A
a catch if an error happens I'll put this email js. send in a try and add an await in front of it if everything goes successfully then we can set loading to false and we can show some kind of an
Speaker A
alert so let's actually type alert and say your message has been sent in the catch we're going to still set the loading to false but we will console.log the error and we will set alert to something went wrong which
Speaker A
hopefully will never happen and if you want to you can further style this alert by actually showing it on the screen once the email gets sent this will just do a native browser alert so going back to my portfolio I'll enter my name and
Speaker A
I'll enter an email let's do contact JS mastery. proo and I'll enter my message something like your 3js skills are through the roof and I'll click send message oh we get a something went wrong okay that's good let's see
Speaker A
why if I go to console it says the public key is required oh yeah I missed the fourth parameter to the send method it is the email JS public key which you need to get from their platform to get
Speaker A
to the public key just go here and then click this icon right here admin account and there you can find your public key so you can just add it as a string right here perfect now if we go back it says
Speaker A
sending and it says your message has been sent perfect back in my email provider I can see a message from me new message from Adrien hello Adrien you got a message from Adrien you're hired your 3js skills are
Speaker A
through the roof perfect I cleaned the message and withed my inbox so it gave me this nice image and that means that we have successfully implemented the contact me section which of course looks even better on desktop one Improvement
Speaker A
we can make is also clean the form once we submit it so once the message has been sent we can say set form to be equal to an empty object and we can reset all the values such as name email
Speaker A
and message back to an empty string if you save that and send a message it'll get sent and then it'll clear the form so the sender knows that they don't have to resend it because it went through great next let's create a
Speaker A
super simple footer by creating creting a new section called footer. jsx running rafc and then importing it right here below the contact that's going to be footer and when I said very simple I really do mean it as soon as we do this
Speaker A
we'll be able to move to the last component of the day so let's head over into the footer and let's start implementing it it'll be a section of its own with a class name equal to C- space some padding on the top like seven
Speaker A
and padding of the bottom like three border DT border dl-300 if we save this we can start seeing a line that appears right here Flex justify Dash between and items Dash Center we can also give it a flex wrap
Speaker A
so it wraps in smaller devices and a gap of five within this section we can render a div that'll have a class name equal to text- white- 500 flex and a gap of two in between the elements so we can
Speaker A
render a P tag that's going to say something like terms and conditions of checking out this portfolio next below it we can render another P tag that's just going to render a vertical line and below that we can render a privacy policy might be a
Speaker A
bit of an Overkill for this kind of application but doesn't hurt to add it we can go below this div and create a new div that will act as the second container with a class name equal to flex and a gap of three within it we can
Speaker A
render a new div with a class name equal to social- Icon and right within it we can render an image with a source equal to/ assets SLG G because you want to point to your GitHub account so we can give it an Al
Speaker A
tag of GitHub as well and we can give it a class name equal to W1 over2 that's going to be about 50% and h-1 over2 as well once you add it you're going to get this great looking GitHub logo right
Speaker A
below and of course if you want to you can turn it into an anchor tag and point to a GitHub profile I'll duplicate this div two more times below and for the second one I'll render a Twitter icon
Speaker A
with an ALT tag of Twitter and for the third one I'll render something like Instagram but you can also do LinkedIn if you want to and if I save this we get three great looking icons at the bottom and of
Speaker A
course what would a portfolio be without one last P tag with a class name of text d-500 where we can render a cop copyright sign and say something like 2024 Adrien All rights reserved if we save it yep that's
Speaker A
looking good looks good on mobile and looks good on desktop as well which means that we are ready to add the last missing section of our portfolio in between the testimonials and the contact we want to show our visitors how does
Speaker A
our past work experience look like so let's collapse it let's close the app and let's create the last section of the day inside of sections I can create a new file called experience. jsx run rce and I can call it right here
Speaker A
experience self-closing tag the last one for today so I can actually close this app with starting to implement The Experience section our experience section is going to be quite exciting I'm going to show you two different websites one will allow you to create
Speaker A
your own custom avatar you can customize everything and then the second one will allow you to animate its limbs to perform specific actions that sounds pretty exciting so let's get started first I'll turn this into a section that
Speaker A
will have a class name equal to c-space and margin y of 20 next within it I'll render a div with a class name equal to w-o and a text white of 600 within it I can show an H3 that'll
Speaker A
have a class name equal to head- text and it'll say my work experience there we go right beneath it we can have another div that'll act as a container so we can give it a class name of work
Speaker A
dash container and within it we'll render our canvas so let's create a div wrapping your canvas by giving it a class name equal to work Das canvas and this is where our react 3 fiber canvas will go it'll look something like this
Speaker A
but for now I won't put anything within it and I'll leave it as it is that's because first I want to focus on the right side the actual content of our work experience and then later on I'll show you how to add a custom model right
Speaker A
here so let's go below this canvas and Below its container div and let's create another div with a class name equal to work- content within it we can create another div that will have a class name to create some spacing such as on small
Speaker A
devices padding y of 10 typically padding y of five on small devices padding X of five and otherwise padding X of 2.5 there we go now we have some spacing within it we can map over our work experience by opening a new Dynamic
Speaker A
block of code and saying work experiences coming from constants do map where we get each individual it item of a work experience and its belonging index and then we can use an immediate return by using parentheses to render a
Speaker A
div for each one of these work experiences let's command click work experiences to see what we have in there so you can modify it we have an ID a name of the company position or short for POS duration when you work there a
Speaker A
title of your job icon and an animation that we want to display on our 3D model more in that later so feel free to modify this to reflect your work experiences with that said we can destructure those values right here so I
Speaker A
will destructure the name the position the duration the title and the animation if there's something else we can get it later on but for now I think that should be it and since we have an ID we don't
Speaker A
even need to get an index right here so we can just get an ID as well great so let's give this div a key equal to ID and a class name equal to work- contentor container and give it another
Speaker A
class name of group within it we can render an inner div that'll have a class name equal to flex Flex Das column so the elements appear one below another h- full justify Das start items Das Center and padding y of two within it we can render
Speaker A
another div that'll wrap an image so let's give it a class name equal to work- content uncore logo and within it we can render an IMG that will have a source equal to Icon I don't think I have D structur
Speaker A
that so let me D structure icon right here with an ALT tag equal to logo and a class name equal to w- full and h- full so now we can see three beautiful icons appear right here on the left we can go
Speaker A
below this div that is wrapping your icon and we can render a self-closing div with a class name equal to work- content and this will just create a bar in between them barely noticeable but it is there now we can go one more div
Speaker A
outside and create a new div within which we can display some more information so it can have a class name of on small devices padding of five to create some spacing typically padding X of 2.5 and a padding y of five so let's
Speaker A
start displaying that great information we can create a P tag with a class name of font Das bold and text- white- 800 and we can render the name of the company right within it there we go that's looking good now right below that
Speaker A
P tag we can render another P tag with a class name equal to text- smm and margin bottom of five there we can render the POS or the position and then say Dash Dash and then render the duration that's
Speaker A
going to look something like this finally below that P tag I can render another pag tag that'll have a class name of group- hover so once we hover on that we want to change the text over to White and provide a transition for which
Speaker A
we can do that of ease in out and a duration of 500 milliseconds so now if you render a title right here which is more or less the description this will show up the text Will initially be gray
Speaker A
but you don't even have to hover over the text if you just hover on the card the text will turn white so you can read it with more contrast this is looking amazing and it's looking even better on
Speaker A
desktop but the question is what will we put right here on the left side check this out we'll put your own custom created Avatar this is the one that I created and right now it's kind of just standing there in an idle position but
Speaker A
check this out as you hover your cursor from a position to a position it changes animations so in 2019 we were at notion and it is alluding then in figma it is clapping to itself I guess and then in
Speaker A
framer it is jumping out of success so this is a pretty fun addition to a 3js portfolio so let's go ahead and implement it together it'll be a multi-part implementation first I'll teach you how to create your own 3D
Speaker A
avatar then I'll teach you how to add animations to it and then I'll teach you how to add it within your code so let's do that together as I've given you the link to that amazing website that transforms glb models into react 3 fiber
Speaker A
components on the second page of the same guide that is linked below for free you can find detailed instructions on using this Avatar Creator website to well create your own avatar so download it by clicking the link down in the
Speaker A
descript description and I'll see you on the dashboard once you create your account you should be redirected to a dashboard that looks something like this the first step is to choose web as your platform you can also choose react and
Speaker A
then click this link which will open up your avatar creator you can start from many of these predefined templates I'll try to pick a character that looks most like a developer let's go with this one right here okay I feel a a bit like
Speaker A
playing Sims you can dress up your character by choosing different clothes change the pants too the gender and all of the facial features this is pretty crazy there's a whole hair section right here I mean this is a fullblown video
Speaker A
game Avatar Creator oh yeah I'm definitely going to rock these glasses feel free to take your time to modify it a bit further I think my character is good so I'll press next it's going to ask you to create create a Ready Player
Speaker A
me account but you can click continue without sign up and check this out you get a link with your GB model how cool is that make sure to copy it to download this file just paste it again in the
Speaker A
browser it'll automatically be downloaded next we'll use adobe's mixo which is going to allow you to mix some animations into your model again the link to this website and the guide of how to use it is within the first pages
Speaker A
of the 3 GS guide linked below once you're here make sure to sign up then on top right click upload character and then simply drag and drop your file it's going to process it and it says unable to map it that's because mixo expects an
Speaker A
fbx file extension so just open up the converter which is linked in the 3js guide and then drag and drop your file here once you do that you can click convert and in a matter of seconds you'll be able to download your your fbx
Speaker A
file now you can go back here and upload your character it's uploading and processing next we have to rig our character so drag and drop the markers in the same way that's explained on the image on the right so I'll copy the chin
Speaker A
and I will put it right here at the chin wrists can go right here where our wrists are and then we can use the elbows as well they're going to be somewhere around here I guess I canot see because the shirt is too fat then we
Speaker A
have the knees I'll place them somewhere around here and then the groin is around here perfect so let's click next it is rigging it and this process can take up to 2 minutes so let's give it some time and I'll be right back and
Speaker A
check this out the character is looking good it is turning around and you can also enable the skeleton view which just makes this happen I guess so let's disable that skeleton View and let's click next now it's going to load right
Speaker A
here and you can choose different animations that you want your character to do such as hip-hop dancing there we go this is so cool keep in mind this was a character that you created and completely optimized and now it is
Speaker A
dancing I mean pretty crazy stuff keep in mind that right here we're working with an fbx X extension which is typically used for animation we'll get your model's textures from the GB file that you downloaded so we'll mix and
Speaker A
match both now you can find any animations you want but I'll show you some that I'll be using we definitely need an idle animation this animation will just make your character wait for further input there's also different kinds of idle like this one here or
Speaker A
maybe this one breathing you can choose your own let me see what I like we have a sad Idol happy Idol it's so interesting that these are all four different games let's see how happy idle looks like yeah I think this is good so
Speaker A
let's go ahead and download this fbx binary and I'll click download once again great now let's use it within our code back within our code we can start diving into the canvas by creating an ambient light and give it an
Speaker A
intensity of about seven we can also give it a spotlight for a dramatic effect with a position equal to I found 10 10 and 10 to work the best an angle of about 0.15 de and a pbra equal to 1 these are some
Speaker A
properties that I would love to dive deeper into but they're just outside of the scope of this video so we'll dive into these much deeper within our ultimate 3js course finally below the spotlight I'll render a directional light so in this case we
Speaker A
have three different lights lighting our model it'll have a position equal to 10 10 10 same as before within an array and an intensity equal to one finally we can render orbit controls so we can actually move our model with an enable
Speaker A
Zoom equal to false and a Max polar angle equal to math. Pi / 2 we have done this before already this prevents you from looking beneath the model but you can look in front and on the sides finally we're going to
Speaker A
render a suspense right here in case loading takes a bit longer where we can add a fallback and use our canvas loader component right here and finally Within we can render our model so let's create a new component that's going to be
Speaker A
called developer that's us a developer model. jsx within here run rafc and exchange developer to group because we are within a 3js environment and simply call it right here developer as a self-closing component to it we can pass a position y = to minus 3 and a
Speaker A
scale equal to 3 of course everything breaks right now but that's because we haven't actually put a real model right here so let's do that next and you already know how to do that just upload your glb right into this website
Speaker A
remember to upload the first model that you downloaded from that Avatar Creator not the fbx files it's going to look something like this pretty crazy click play click exports and copy to clipboard and then override this thing right here
Speaker A
make sure to say export default developer and at the top you can also set up this model and rename it to developer so const developer is equal to a functional component that accepts props now a very important thing right
Speaker A
here is to specify the right path so we actually have to add our glb model into our public folder so go to public models human and then right here you need to add a developer. glb file in my case
Speaker A
that'll be this one Ready Player model. glb I'll simply drag and drop it here remove the existing one and rename it to developer you can do the same with yours next you can point to it right here by pointing to slm models
Speaker A
slum slevel per.lb and remember you have to do this in one more place right here at the bottom slm models slum Ford developer. glb now let's open up the console and see what kind of errors do we have it looks like I misspelled
Speaker A
directional light so let's go into the experience and fix the spelling directional light there we go was that it or was there more issues oh the light in Spotlight needs to be uppercased same as in ambient and directional so let's fix
Speaker A
that and now our website loads so let's scroll down and check this out our is here I will expand it just so you can see how it looks like on full screen there we go it is actually looking pretty good you
Speaker A
can play with the lights to make it appear more realistic change the position from the lights and orbital controls allow us to move around this model and already this is so cool but how do we animate it well let me show
Speaker A
you first things first we want to destructure the actions by calling the use animations coming from react 3 Dre to that you can pass an array of different animations such as the idle animation but how do we import that
Speaker A
animation into our scene and into our file well let me show you you can say const animations and then rename it to idle animation is equal to use fbx this is coming from react 3 Dre and then you have to pass the path to your fbx
Speaker A
animation ours is in the models slum slash idol. fbx if you haven't added it already go there delete the existing one if it's there and then add the one that you downloaded from mix am all I'll rename it to just lowercase Idol make sure to
Speaker A
leave the extension in there and then drag and drop it into your human folder you'll notice that it has this icon which means that it is a valid animation an fbx file so now we're properly pointing to it and we're calling it an
Speaker A
idle animation so we can extract its name by saying idle animation z. name and we can set it to a string of idle and when we set animations within this us use animations as I said it accepts an array
Speaker A
and we can pass the idle animation zero so to put this animation to use we have to create a new ref called group is equal to use ref from react and then we have to attach it to this group by
Speaker A
saying ref is equal to group now that we know that we can refer to our Human by using the group ref we can add it as the second parameter to the use animation after the array so simply say group
Speaker A
right here which will attach the animations to this model next you can create a use effect that accepts a callback function it's going to change whenever the animation name changes and this is something that we can pass so
Speaker A
let's destructure the props by getting the animation name which we can default to idle and then we can also destructure all of the other props right here or should I say restructure because we are just spreading them out
Speaker A
now that we have that whenever the animation name changes we can call actions pass the animation name that we want to access and then reset it and we can also fade it in with a duration of 0.5 seconds and then play that new
Speaker A
animation we also need to clean this up by adding a return to our use effect where we can see actions animation name and then we can fade out that animation by 0.5 seconds great make sure that in in fade
Speaker A
in is spelled uppercased that's going to make the application work again which means that we can scroll down and see our model but it is still standing still for some reason this new idle animation that I downloaded and put right here
Speaker A
within my human folder isn't working it might be working for you I'm not sure but if I switch it over to some other animation that I added before such as this salute one right here and save it you can see that it is actually saluting
Speaker A
so for some people some animations might work some others might not so there's one thing I'll do to make sure that everything works 100% for you and that is that in the read me of this video I'll leave a zipped animations folder so
Speaker A
you can simply download it and put it right next to your human folder where you have your developer. GB that way you have four animations which I personally picked which work the best for this portfolio that will definitely work for
Speaker A
you so after you add them you can switch this back over to idle here too and make sure that it is coming from Models animations idle right here at the top as well and if you save that and scroll down
Speaker A
you can see that the idle animation is now being applied this is looking great so now let's add the other animations as well I will duplicate this four more times I'll rename the second one to salute animation the third one to clapping
Speaker A
animation and the fourth one to Victory animation and of course we have to make sure to change the names pointing to those fbx files so I'll add salute clapping and victory we also have to change their names right here below by
Speaker A
saying salute animation the name will be salute clapping animation the name will be clapping and finally we have Victory animation the name will be Victory now after you reload the page we can still see the idol animation right
Speaker A
here so how can we actually switch between them well let's head over to the experience section and let's add a new state by using the Ed State call It Animation name set animation name at the start set to idle and then here's the
Speaker A
cool part where we're mapping over our work experiences section we can give this div an onclick property it'll be a callback function that'll call set animation name and we can pass the animation dot to lower case so each one of these work experiences
Speaker A
has a specific animation name attached to it so once we're there we're going to Simply let it play also I'll add an on pointer over this is similar to onclick but it will show once we add our pointer
Speaker A
over a specific element and there we also want to do the same thing so set animation name to be equal to animation do to lower case and the last one is on pointer out so once we extract our pointer we want to set a callback
Speaker A
function and set the animation name to be equal to back to idle Let's test it out of course make sure that you're passing the animation that we have selected back to our developer model that is right here developer you can say animation
Speaker A
name is equal to animation name make sure to name it properly save it go to the developer file and then we have to make use of these four animations by extracting their actions So currently we are adding our current animation the
Speaker A
idle one but now we need to add four more so we can say the second one is salute animation zero we can also do a clapping animation zero and finally a victory animation zero if we save this and scroll
Speaker A
down you can see that the model is currently idle but if I hover over specific elements it starts saluting clapping and celebrating so this is actually amazing this has been the most fun section of a website I have built in
Speaker A
a long time and I hope you enjoyed building it with me I also can't wait to see your model on your website doing some of these crazy animations so the next big thing is of course to deploy this website so we can all see each
Speaker A
other's avatars and to deploy our great 3js portfolio we'll be using hostinger fast servers so just head over to your dashboard find the website under the domain name that you chose at the beginning and go to the file manager
Speaker A
next go into the public HTML and delete the existing default.php next go back to your IDE open up the terminal and run mpm run build this will create an optimized production build of your react application there we go if
Speaker A
you go to the project you'll see a new disc folder appear here right click it and click opening finder or file explorer if you're in Windows once you're there select them and then drag and drop them within the H panel it will
Speaker A
take some time to upload as there are a few 3D models and a lot of assets and there we go our files are here now let's go back to the H panel and click on your domain name check this out we have our
Speaker A
great loading the model is loading up for the first time and here it is your own 3D 3js developer portfolio there are some minor tweaks that you still might need to make such as changing the favicon and the title in the index HTML
Speaker A
file or actually pointing these nav links to the sections of your screen but these are the types of changes that I want you to make to perfect your portfolio actually I want to see you change these 3D models play with it and
Speaker A
make it your own then share it across socials and show me the work that you've done in a couple of months there's going to be a lot of examples of this exact portfolio but you here to make it your
Speaker A
own to make it stand out so phenomenal job on coming to the end of this video in building this portfolio with me you've not only Built your 3js portfolio but you've learned how 3js Works behind the scenes and this was just the start
Speaker A
of the journey for the past year I've been working on the best 3GS course on the internet I know it's a big thing to say but trust me it'll be phenomenal it is coming soon and it'll be available on
Speaker A
JS mastery. proo so it's possible that by the time you're watching this video it is already there if you liked what you've learned here you will love what we'll cover there so thank you so much for coming to the end of this video and
Speaker A
building this amazing portfolio and I'll see you in the next one have a wonderful day by
Topics:Three.jsReact.js3D portfolioReact Three FiberWebGL3D web developmentAR VR webWebStormCodium AIJavaScript tutorial
![[YTP] Jordan Peterson: Rat King — Transcript](https://i.ytimg.com/vi/0qUoznGIe1M/maxresdefault.jpg)
![Nick & Charlie ‣ their story [+heartstopper forever] — Transcript](https://i.ytimg.com/vi/p4TiW1TZM3w/maxresdefault.jpg)
