Want to land your dream programming job in 3 - 6 months? ⭐ JSM Masterclass Experience - jsmastery.pro/masterclass Become a Software Engineer. Guaranteed.
Hie i am having a problem deploying site, when i run ...》》》 npm run build, i get (!) Some chunks are lager than 500 kbs after minification The folder it shows is the dist/assets/three-891170d2.js 624.09 kB | gzip: 161.01 kB Is they a way i can deploy?? Thanks
👇 Time Stamps Below! : 00:17:55 Layout 00:21:07 Navigation bar 00:40:57 Hero Section 01:07:41 About Section 01:17:09 Higher Order Component 01:23:28 Experience Section 01:34:23 Tech Section 01:44:33 Projects Section 02:01:01 Testimonials 02:13:15 Contact 02:32:09 3D Stars 02:49:09 Deployment Thanks for the Amazing Video Adrian! I am currently going along with it and then I'll be making my changes to it.
Hey everyone, just to leave a heads up that we can use react-parallax-tilt instead of react-tilt so that we don't have to face library peer dependency issues while deploying the project. Edit: At 12:00, use react-parallax-tilt instead of react-tilt and remove --legacy-peer-deps from the command. Also wherever you are using: import Tilt from "react-tilt", replace it with your new library like this: import Tilt from "react-parallax-tilt". And some of you might be facing an error: Could not resolve three (something like this), the fix is to add "three" along with other libraries while npm installation.
@@deepaktripathi3777 I don't why but i can't add my mail here. So just view my yt profile and there is some contact info about me on the About page. Contact me there.
@@EmmanuelArowoselu Just simply uninstall the library by running the command "npm uninstall react-tilt --legacy-peer-deps" and then installing react-parallax-tilt by the command "npm install react-parallax-tilt".
I just completed it and I'm in love with it. I am overwhelmed by your tutorial, and I extend my heartfelt gratitude for the effort and time you put in and also for making this available free of cost. Because of people like you, we have hope in our journey. I thank you from the core of my heart.
Hey there I did not get error in the navbar but the prelisted items in order like at timeframe 26:00 we can see that the sections are hero, about, experience so on but in the timeframe 30:35 how they dissappeared? please let me know the solution.
Also, at 1:08:22 the second line in About has to be changed to import { Tilt } from 'react-tilt' or else it will throw an error (at least it did for me)
I'm finishing my Computer Science Degree, and I'm doing a portfolio with some projects and this content is a HUGE HELP, thank you so much love all your videos!
This is the first time you're making a not so beginner-friendly app, but it's still superb. Thank you so much always coming through with the best tutorials.
@@michaelpacto364 increase the hemisphere intensity To 8 or more it worked for me And spotlight intensity to 1 Play with them until you get your correct lighting
I had just been thinking about learning 3D web development for the front end and you already have a free course on it! I am blown away by your consistency! Thank you so much, Adrian, thank you!
For those who are just starting or are in the navBar section: At the 39:31 mark the code looks one way, but at the 39:32 the mark, the code goes back to where it was at the 39:00 mark .. still LOVE the video! It’s just the things I changed 😂 until I figured it out was going on drove me bananas
"if we save that.... everything breaks" was my favorite part of the tutorial. thank you for posting this, it truly was very informative and extremely useful. hoping good things come your way.
Hello Adrian, I have watched tons of videos on UA-cam, but you are the only one who convinced me to purchase and use Hostinger. I used your codes and everything. I enjoy your videos because of the clarity of your voice and the way you showcase your skills and talents. It’s just so awesome. I am a third-year computer science student and have started building more and more projects. However, I wasted a lot of time because of my laziness. I would always start something and then stop, never finishing what I was doing. But your videos have helped me keep going. I hope that more people with the same degree as mine can socialize online and actively work on projects together.
I started this months ago and quit. I got distraught trying to add my own logos (.svg files were NOT working with me). I got over it, and decided to just follow the video from start to finish in order to just attain the knowledge and try my best to complete it. I was not disappointed. Thank you so much!
Hello everyone. You might encounter an error at around 54:17 which says "Uncaught Div is not part of the THREE namespace...". You might be tempted to wrap the Suspense around the entire Canvas instead of just the OrbitControls. That works until you have to set up the loader. Then you have to move the Suspense back. I wonder why this happens. So if you get the error, just continue until you have set up the CanvasLoader.
@benwaters2353 @benwaters2353 2 months ago If anyone else is stuck at 53:59, first try removing fallback from the suspense tag also try removing some chrome extensions. For me a couple chrome extensions I had were blocking it from loading. he answerd it remove fallback
@@laibaiqbal7801 This happens because the Canvas component (ComputerCanvas, EarthCanvas, etc) hasn't yet been completed. Notice it only has a div in it. That's what's causing the error. After the 3D gltf file has been rendered in it, the error should go away. The Canvas component does not accept html elements. Only THREE Components
In Loader.jsx I deleted Loader part and added a console.log it solved that problem. Also I downgraded my three version to 0.149.0 for fixing the lights.
This tutorial was great and I hope to see more 3JS in the future! One thing I do wish is that you could show us the creation of assets that you use in these projects. It's one thing to take preconceived assets and put them together, but a whole other thing to create assets from scratch.
@@gabrieldiaz6509 bro i have a problem with displaying all 3d , they're not all displayed ,i think the problem is from the huge 3d amount that are rendered in the same page , i tried to optimize gltf file but the same problem, it's only happening on mobile not on laptop
Thank you Adrian! Super useful video to get me out of my "AngularJS" denial :-) - Loved the video and used it to kick start my own portfolio and dip my toes into the react world!
dude if you doubled this amount, then you can buy a course for me at this rate . and in 3 months i would've given you 10x of this price by getting a job :/
How much is it to join the bootcamp,and what are the prerequisites, I do not want to waste my time and their time too since I am still beginner...Thanks
For anywone who can't get the balls to float in the Experience section at 01:42:22, this is what worked for me. In the Ball.jsx file in the BallCanvas component delete the `frameloop="demand"` property. Should work now 😁
For anyone who can't get the balls to float in the Tech section at 01:40:46, this is what worked for me. In the Ball.jsx file in the BallCanvas component delete the `frameloop="demand"` property.
If anyone struggling with the first app.jsx part around 19:00 where I had a browser error that said something like [plugin:vite:import-analysis] All I did was copy everything from components folder then delete the components folder Then create a new folder then paste everything in there. It worked for me so you could try if you have the same problem
Yes finally! I have been trying to learn this new tech through other tutorials for weeks now but no one can teach the way you teach!!! 🎉 thank you for uploading this video!
If anyone is having trouble with a deprecation warning on "react-tilt", I suggest using "react-parallax-tilt" instead and defining the variables something like this:
Now this error shows up Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-parallax-tilt.js?v=fecbe886' does not provide an export named 'ParallaxTilt'
Great Video When deploying the site and running it from an android device, you'll get a white screen in the computer canvas plus on some of the tech balls, this is due to the fact that android devices limit the max amount of loaded 3d GLTF models In order to prevent that you can for example render only the tech icons not the whole ball canvas on small screens (500px) or reduce the number of tech to 4 (I tried it and it's the max) Hope I helped
Facing the same issue but i am clearly not interested in removing those balls anything you know so that i can reduce the maybe resolution/texture / quality in order to run it smoothly on Android?
You and Llama Dev are so closely aligned with your content - it's so helpful for me to watch both your guys videos as you both put so much effort and they're the most relevant and timely tutorials I can find. Thank you very much as always!
@@javascriptmastery i have a error when i do = npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom
Hi! I recently started learning React as a side project because I was curious to learn how web development works today. I stumbled upon your video and was astonished by the content. I have just finished it and I want to say a thousand thanks for making it so entertaining and for teaching so much in only a few hours ! I can't say I'm an expert at React, but I can definitely read it properly now.
For the packages used @12:30 use this line in your terminal "npm install @react-three/fiber @react-three/drei maath react-parallax-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom" - this worked for me as of 21/05/2023
Thanks for posting this!! Saved me big time. I was trying to fix it for hours. Don't forget to change the Tilt import as well to "import Tilt from "react-parallax-tilt" on any components that use it.
thank you. At the end of the app everything is working but i have this error: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. Do you have the same?
hey Adrian, The way you explained every concept in detail, made the entire learning experience seamless and enjoyable. once again thank you for sharing your knowledge and expertise with the world. You have made a significant contribution to the web developer's community, and your efforts will continue to benefit aspiring developers like me for years to come. love from India 🇮🇳 ❤
for those, whose earth is rotating about a different axis(not the vertical center) change to instead of primitive object={earth.scene} scale={2.5} position={[0, 0, 0]} rotation-y={0} />
Questi video sono una miniera d'oro, meglio sfruttarli ora prima che sia troppo tardi! Questo è il futuro e la richiesta di lavoro è altissima! Complimenti dall'Italia
@@anishwarsharma5277 what you're going to want to do is npm install react-router-hash-link, import { HashLink } from 'react-router-hash-link', and then do exactly as the tutorial says, but with a component instead of the tag. This will allow React Router to recognize your page id links.
If someone has error like this "Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend?" you shoud just remove div in Loader Component and that's all
Followed and loved it from start to finish. It's a lot to take in honestly but I'm gonna start one from scratch and add a twist to the design and 3D models. Thanks so much Adrian! (Would love to see more of three.js and motion stuff)
These projects are always cool, and I could follow them and just repeat it, but I'm hardly learning and 90% of it seem to require you to know everything that exists already. The fact you guys can come up with this stuff and show others how to make it is really quite something. But if I made this and displayed it as something I had created, it'd be a complete lie.
Start small on the projects if you need to. It gets easier. There’s a lot to learn here but yeah, it’s definitely more copy-pasting if you don’t know what’s really going on haha
@@sneaky3014dude this is like extraterrestial language for me, i'm really sad that i can't build what i would love to do because i'm only a ui/ux designer and this would take months Even years to learn and i do not have the time for it :(
If anyone else is stuck at 53:59, first try removing fallback from the suspense tag also try removing some chrome extensions. For me a couple chrome extensions I had were blocking it from loading.
Sir I'm getting a error while building this project in scene.gltf during create a hero. Jsx code while not working properly I'm stuck in mid what should I do and ther error in public folder that h provide
This is the first time I am commenting on any youtube video I just wanted to say thanks for such an amazing tutorial - It was so easy going - your way of teaching is amazing I just loved developing this portfolio!! Looking forward to develop many more projects like this
Hello can you please tell is it okay for a beginner to do this? I covered HTML CSS and React js now looking to make projects. Is this project okay or tough for a beginner? Also can you suggest what projects to make if this will be tough i cant seem to decide what to do. I want to make atleast 3-4 good projects as my background is not of IT as well. Thankyou
@@kartavyasharma6272 I don’t feel this programmer is for a beginner and I’m not a beginner .. he makes great content .. start from the very, very simplest tutorials so you can gain confidence. Programming is not easy #goodLuck2u
Thanks JM for great free resource. 54:15 I got stuck with the following error: "Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter." not only but also with , , , ... Resolve: try to change last line of Computers.jsx to "export default ComputersCanvas " Hope this will help someone saving some time.
who is having trouble here at minutes 54, I have been able to solve the problem the way is 1. Make sure to use export default ComputersCanvas; in place of export default Computers; 2. in here you will see black screen until minute 58, but don't panic just continue the step of video until minutes 58.38. And reload your website
at 1:44:00 I realised, that balls don't float as I expect (they did strange rotation only when I did microscroll. It looks like veery slow animation and of course it doesn't looks good) I delete "frameloop="demand"" and add "requestAnimationFrame" parameter at BallCanvas component --> Canvas tag, and now it looks much more better
also it could be frameloop='always' ,but I hav ethis error with the app running: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.Do you hav ethe same at the end?
just a suggestion, it would be nicer if the small balls, after you rotate them, would automatically turn back to their front/logo instead of staying on the empty side.
This channel is AMAZING!!! It offers some of the best tutorials that are easy to understand. These tutorials have enlightened my mind and unleashed numerous possibilities for my personal development. Thank you for sharing these incredible videos.
If you are getting white screen during about section (01:07:41 About Section) How to fix: import {Tilt} from 'react-tilt'; Not: import Tilt from 'react-tilt';
DId the tutorial as of 3/12/2023 and ran into an issue and it looks like others have had the same problem. If when setting up all of the files and doing the imports you get the error, "You can mark the path "three" as external to exclude it from the bundle, which will remove this error." all you have to do is run "npm install --legacy-peer-deps three use --force" in terminal.
Thanks! At the 39:31 mark the code looks one way, but at the 39:32 the mark, the code goes back to where it was at the 39:00 mark .. still LOVE the video! It’s just the things I changed 😂 until I figured it out was going on were driving me bananas
Hey, I am tried it but it's not working , I am getting an warning is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements Not only for hemisphereLight but also mesh , pointLight and primitive and also 3d model is not showing on screen
What a wonderful instructional video. Thank you for taking the time to offer this tutorial to the public. I learned an incredible amount and Love the way this portfolio looks!
First thank you for that awesome video i learnt a lot. really appreciate that ! but => sm: is not just for small devices it's from sm to 2xl so if you say "sm:block hidden " that means it will be hidden in phone pages and will be block from small pages to 2xl pages
The web looks and scroll nice on a computer but on a mobile device(using iPhone 14 pro) it is a little bit slow, very hard to toggle the navigation… Did anyone else notice that???
Anyone having trouble with the mobile version not displaying properly : There is way too much for the phone to handle, you got to reduce the number of stars on the contact section, completely removes the balls with the skills and replace them with an img version of them, try to get off as much draining things for the phone as possible, also the performances on desktop aren't that great, so, try to replace things too heavy with your own stuff that is lighter !
it's really helped, me thx, Ive been using those stars all around the page, so mobile was always crashing , and I didnt know what is going on, thx for your comment, you made my day!
I made this project and deploy it on vercel, everything looks great on desktop but on mobile the header section is creating problem, the screen turns into white I think I have to remove the 3d computer 😥😞
If you are new to 3js, don't watch this video, it has so many unresolved errors, and you will leave the project in between; I am just watching the video as a theory part, not coding alongside him.
Some people are facing sectionwrapper issues. Here's how to fix it, 1- Uninstall the package with: npm uninstall react-tilt 2- Then reinstalled it with: npm install react-tilt 3- Then in the imports of About.jsx and Works.jsx change import Tilt from "react-tilt"; to import { Tilt } from "react-tilt"; 4- Run npm run dev
Always love your videos. They are so incredibly helpful and provide an excellent framework to make some incredible projects. My wife loves her blog site that I made from another one of your videos and now I have an excellent portfolio site. Thank you for everything!
I ran into an issue at 47:25 and it looks like others have had the same problem. If when setting up all of the files and doing the imports you get the error, "You can mark the path "three" as external to exclude it from the bundle, which will remove this error." all you have to do is run "npm install --legacy-peer-deps three use --force" in terminal and it will remove the error.
For anyone having an Uncaught Error: Could not load ./desktop_pc/scene.gltf: sRGBEncoding is not defined) error. The 3d model is the issue itself, its a corrupted file. Use a different model and its all good 👍
in point 43:45 I had to add to the gradient violet line mx-2 to make it match the line with the circle, Thanks for everything Adrian, I think my development skills really got improve after this video!!!!the linethe line
hey, when you get to around 54 minutes, can you lmk if the computer will load for you because it's not loading for me and every part of my code looks correct.
I'm facing issue of 3D objects are not loading on mobile screen view and same as project section too. Does anyone know the solution for that then please give it to me otherwise this complete tutorial is damn fabulous and amazing
@Adrian, you have no errors in your solution, but I am facing lot of errors like below one 😭. Could you please help me to resolve it Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
@@andieastra6141 I am facing this error at the end: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. but the app is running ok
Did anyone have an issue at 54:19, when Adrian fixed some errors, the desktop image show up on his website, but did not on mine. I also tried just copying and pasting his Computers.jsx file and still the desktop image did not pop up. Thanks
@@markolumbar4307 I've done this too but I still get a blank screen with an error saying this:Uncaught Error: Could not load ../desktop_pc/scene.gltf: Unexpected token '
I was really happy and proud on my html css js skills. And then i saw this video (now i feel I'm like I'm in kinder garden and this guy is Matered all things)
For those with mobile display issues, I fixed the problem by cutting only 2 canvases left, and some parts don't use motion framer; use the regular div or p tag.
Hello beautiful fellows! I Spent $100+ for Hostinger domain, completed code-along, uploaded dist files, clicked on my custom domain name and ended with a 404... any solutions/ ideas please?
Man you need to make another 3D website. The video has crossed 20k views. I am watching it on 31st May, 2 months after, and it already has 34k likes. Btw, this is a great video!!
Hi Adrian , thanks for your work. It was great learning and I build my portfolio by following this video and i deploy it on GitHub pages it works fine on laptop but in real mobile device 3d model of computer is not loading.Anybody have this same issue??
Yes! I did too! I’ve been looking for someone with the same issue. The thing is, it loads on some devices and not on others. It seems to work on iPhones but not on android
Want to land your dream programming job in 3 - 6 months?
⭐ JSM Masterclass Experience - jsmastery.pro/masterclass
Become a Software Engineer. Guaranteed.
cant't able to deploy this on vercel any solutions
can you please make use of Webxr with threeJS to simulate AR products in a e-commerce site this would be a crazy project
Hie i am having a problem deploying site, when i run ...》》》 npm run build,
i get (!) Some chunks are lager than 500 kbs after minification
The folder it shows is the dist/assets/three-891170d2.js 624.09 kB | gzip: 161.01 kB
Is they a way i can deploy??
Thanks
I must be fullstack Developer, I am ready to sacrifice everything even though I come from very poor background, I must achieve my dream
from where did you get those png for about section....?
👇 Time Stamps:
00:17:55 Layout
00:21:07 Navigation bar
00:40:57 Hero Section
01:07:41 About Section
01:17:09 Higher Order Component
01:23:28 Experience Section
01:44:33 Projects Section
02:01:01 Testimonials
02:13:15 Contact
02:32:09 3D Stars
02:49:09 Deployment
Thanks for the Awesome Video!
Thanks man
Thankyou❤
01:34:25 is Tech section
02:24:05 is earth model section
Bro did you faced any difficulty following this project?
👇 Time Stamps Below! :
00:17:55 Layout
00:21:07 Navigation bar
00:40:57 Hero Section
01:07:41 About Section
01:17:09 Higher Order Component
01:23:28 Experience Section
01:34:23 Tech Section
01:44:33 Projects Section
02:01:01 Testimonials
02:13:15 Contact
02:32:09 3D Stars
02:49:09 Deployment
Thanks for the Amazing Video Adrian! I am currently going along with it and then I'll be making my changes to it.
Hey everyone, just to leave a heads up that we can use react-parallax-tilt instead of react-tilt so that we don't have to face library peer dependency issues while deploying the project.
Edit:
At 12:00, use react-parallax-tilt instead of react-tilt and remove --legacy-peer-deps from the command.
Also wherever you are using: import Tilt from "react-tilt", replace it with your new library like this: import Tilt from "react-parallax-tilt".
And some of you might be facing an error: Could not resolve three (something like this), the fix is to add "three" along with other libraries while npm installation.
Dude how to contact you. I have some doubts related to the project. Do reach out please
@@dakshkumar992 I didn't understand which Logo are you talking about. Is it the meta tag of the site or the Navbar one?
@@deepaktripathi3777 I don't why but i can't add my mail here. So just view my yt profile and there is some contact info about me on the About page. Contact me there.
How do you resolve this the peer dependency issues if you've already used react-tilt.
@@EmmanuelArowoselu Just simply uninstall the library by running the command "npm uninstall react-tilt --legacy-peer-deps" and then installing react-parallax-tilt by the command "npm install react-parallax-tilt".
I just completed it and I'm in love with it.
I am overwhelmed by your tutorial, and I extend my heartfelt gratitude for the effort and time you put in and also for making this available free of cost. Because of people like you, we have hope in our journey. I thank you from the core of my heart.
Hey there I did not get error in the navbar but the prelisted items in order like at timeframe 26:00 we can see that the sections are hero, about, experience so on but in the timeframe 30:35 how they dissappeared? please let me know the solution.
I will make it but my 3D models can not load in hero section
heyy, how much time did it take you to complete this project?
Hi there, so I open up the components like the Computers in my hero section and it was empty did u find a similar problem with your assets?
@@authenticself3800 they didn't disappeared, I believe it just was not in frame
Also, at 1:08:22 the second line in About has to be changed to import { Tilt } from 'react-tilt' or else it will throw an error (at least it did for me)
tnx bro
yes yes yes thanks a lot brother ... you save me my entire evening... this comment deserve more like
Thanks bro.
thank you really my head almost exploded
Thanks a lot. I was on the verge of breaking down
I'm finishing my Computer Science Degree, and I'm doing a portfolio with some projects and this content is a HUGE HELP, thank you so much love all your videos!
Now I know how ill spend my weekend
Enjoy! 😊
I'm already getting started 💯
Definitely staying indoors this weekend
@@denniswambua4471 no touching grass this weekend? :D
Same also
I've been learning Reactjs and I just make use of framer motions but I've been interested in Threejs, I'm happy you make this course 😍
Enjoy! 😊
This is the first time you're making a not so beginner-friendly app, but it's still superb. Thank you so much always coming through with the best tutorials.
Use import { Tilt } from 'react-tilt' ; instead of import Tilt from 'react-tilt'; to avoid white screen problem thank you ❤
Think you Dude
hi i`m having a pproblem in hero ssection light and postion and rotation not reflected
@@michaelpacto364 increase the hemisphere intensity To 8 or more it worked for me
And spotlight intensity to 1
Play with them until you get your correct lighting
Same here @@michaelpacto364
i love u
I had just been thinking about learning 3D web development for the front end and you already have a free course on it! I am blown away by your consistency! Thank you so much, Adrian, thank you!
i love how you said words carefully and clearly, english is my scnd language and this really helps. thankyou!
For those who are just starting or are in the navBar section: At the 39:31 mark the code looks one way, but at the 39:32 the mark, the code goes back to where it was at the 39:00 mark .. still LOVE the video! It’s just the things I changed 😂 until I figured it out was going on drove me bananas
"if we save that.... everything breaks" was my favorite part of the tutorial. thank you for posting this, it truly was very informative and extremely useful. hoping good things come your way.
Hello Adrian,
I have watched tons of videos on UA-cam, but you are the only one who convinced me to purchase and use Hostinger. I used your codes and everything. I enjoy your videos because of the clarity of your voice and the way you showcase your skills and talents. It’s just so awesome.
I am a third-year computer science student and have started building more and more projects. However, I wasted a lot of time because of my laziness. I would always start something and then stop, never finishing what I was doing. But your videos have helped me keep going.
I hope that more people with the same degree as mine can socialize online and actively work on projects together.
I started this months ago and quit. I got distraught trying to add my own logos (.svg files were NOT working with me). I got over it, and decided to just follow the video from start to finish in order to just attain the knowledge and try my best to complete it. I was not disappointed. Thank you so much!
Bro this problem also happens with and luckily I solved it, can you explain about the error more clearly
I just built a portfolio website 2 weeks ago, but this one looks insane. Looks like I’m building another!!
Glad you like it! 😊
fr, doing the same
@@arielebabini9012 same with me happening
Hello everyone. You might encounter an error at around 54:17 which says "Uncaught Div is not part of the THREE namespace...".
You might be tempted to wrap the Suspense around the entire Canvas instead of just the OrbitControls. That works until you have to set up the loader. Then you have to move the Suspense back. I wonder why this happens.
So if you get the error, just continue until you have set up the CanvasLoader.
I am also getting the same error . have you got solution?
@benwaters2353
@benwaters2353
2 months ago
If anyone else is stuck at 53:59, first try removing fallback from the suspense tag also try removing some chrome extensions. For me a couple chrome extensions I had were blocking it from loading. he answerd it remove fallback
@@laibaiqbal7801 This happens because the Canvas component (ComputerCanvas, EarthCanvas, etc) hasn't yet been completed. Notice it only has a div in it. That's what's causing the error. After the 3D gltf file has been rendered in it, the error should go away. The Canvas component does not accept html elements. Only THREE Components
In Loader.jsx I deleted Loader part and added a console.log it solved that problem. Also I downgraded my three version to 0.149.0 for fixing the lights.
@@ArdaAydnVideolar Oh I see
This tutorial was great and I hope to see more 3JS in the future! One thing I do wish is that you could show us the creation of assets that you use in these projects. It's one thing to take preconceived assets and put them together, but a whole other thing to create assets from scratch.
watch a blender tutorial
@@gabrieldiaz6509 is blender gltf? sorry Im new to 3D scenes and looking to create my school logo in 3D.
@@rybaxter6454 yes, blender guru is great to start in this.
@@gabrieldiaz6509 bro i have a problem with displaying all 3d , they're not all displayed ,i think the problem is from the huge 3d amount that are rendered in the same page , i tried to optimize gltf file but the same problem, it's only happening on mobile not on laptop
i can't stress this enough, your teaching, rhythm and editing is out of this world
Thank you Adrian! Super useful video to get me out of my "AngularJS" denial :-) - Loved the video and used it to kick start my own portfolio and dip my toes into the react world!
Amazing. Enjoy!
dude if you doubled this amount, then you can buy a course for me at this rate . and in 3 months i would've given you 10x of this price by getting a job :/
Always expect mind-blowing videos from Adrian. He has always been fresh inside the Bootcamp. I am so proud to have joined the JSMastery bootcamp.
Thank you so much Rodgers!
How much is it to join the bootcamp,and what are the prerequisites, I do not want to waste my time and their time too since I am still beginner...Thanks
For anywone who can't get the balls to float in the Experience section at 01:42:22, this is what worked for me.
In the Ball.jsx file in the BallCanvas component delete the `frameloop="demand"` property. Should work now 😁
I believe setting the property to 'always' also works -> frameloop='always'
Anyway thank you! your solution led me to fix the ball rotation
Thank you very much buddy.
You're the best!!
Thanks you so much. Saved my life!!!
Thank you very much. You are the best. It looks alive now.
For many days I was looking for threejs tutorial. And here, you brought this with a stunning project. Hats off to you.
Thank you so much 😀
For anyone who can't get the balls to float in the Tech section at 01:40:46, this is what worked for me.
In the Ball.jsx file in the BallCanvas component delete the `frameloop="demand"` property.
Thank you. It works now
If anyone struggling with the first app.jsx part around 19:00 where I had a browser error that said something like [plugin:vite:import-analysis] All I did was copy everything from components folder then delete the components folder Then create a new folder then paste everything in there. It worked for me so you could try if you have the same problem
Thank you very much, I noticed that there is a component file inside the component file, just pulled it out of the duplicate file
No doubt, one of the best development channels ever! Congrats Adrian!
Thank you! 😊
Yes finally! I have been trying to learn this new tech through other tutorials for weeks now but no one can teach the way you teach!!! 🎉 thank you for uploading this video!
Enjoy! 😊
have you implemented this , is this working ? please reply because , i am getting error
Adrian uploads nothing short of high end and over the top quality content. Thank you very much bro. I learn a whole lot from you.
Glad you like it
56:11 penumbra is the second shadow casted by the initial shadow(umbra), it covers a wider area and surrounds the initial shadow.
thank you for the explanation!
If anyone is having trouble with a deprecation warning on "react-tilt", I suggest using "react-parallax-tilt" instead and defining the variables something like this:
{/* ... rest of the component */}
Thanks ❤❤❤
DId you solve when you try to view it in mobile phone but works section doesn't show up?
@@najrulsumon3062 I hace the same issue, can you fixed it?
@@arielelias2413 Yes. I used AOS for that part only.
Now this error shows up
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-parallax-tilt.js?v=fecbe886' does not provide an export named 'ParallaxTilt'
Great Video
When deploying the site and running it from an android device, you'll get a white screen in the computer canvas plus on some of the tech balls, this is due to the fact that android devices limit the max amount of loaded 3d GLTF models
In order to prevent that you can for example render only the tech icons not the whole ball canvas on small screens (500px) or reduce the number of tech to 4 (I tried it and it's the max)
Hope I helped
Facing the same issue but i am clearly not interested in removing those balls anything you know so that i can reduce the maybe resolution/texture / quality in order to run it smoothly on Android?
This was so simple to follow and also extremely informative on how I can adapt and build other projects with similar features. Thank you 😊
You and Llama Dev are so closely aligned with your content - it's so helpful for me to watch both your guys videos as you both put so much effort and they're the most relevant and timely tutorials I can find. Thank you very much as always!
Thank you so much! And yeah, Llama is great! 🦙🔥
yeah they are the best in the youtube
@@javascriptmastery i have a error when i do = npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom
plz help me
@@zerominute1209 whats the error
such an amazing video. The world needs more of these man that are trying to help people get better
Hi!
I recently started learning React as a side project because I was curious to learn how web development works today. I stumbled upon your video and was astonished by the content. I have just finished it and I want to say a thousand thanks for making it so entertaining and for teaching so much in only a few hours !
I can't say I'm an expert at React, but I can definitely read it properly now.
Navbar done 40:38
hero start 40:45
Computer.jsx dev start 46:14
Computer 3D model first render 54:19
Loader.jsx 58:16
About 1:08:59
Getting error on computer.jsx as THREE.WebGLRenderer: Context Lost.
For the packages used @12:30 use this line in your terminal "npm install @react-three/fiber @react-three/drei maath react-parallax-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom" - this worked for me as of 21/05/2023
Thanks for posting this!! Saved me big time. I was trying to fix it for hours. Don't forget to change the Tilt import as well to "import Tilt from "react-parallax-tilt" on any components that use it.
Without GitHub account will it work
thank you. At the end of the app everything is working but i have this error: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. Do you have the same?
@@jotasenator yes i have same issue, could you fix it?
@@toss5337will check it again today and will let you know
hey Adrian,
The way you explained every concept in detail, made the entire learning experience seamless and enjoyable. once again thank you for sharing your knowledge and expertise with the world. You have made a significant contribution to the web developer's community, and your efforts will continue to benefit aspiring developers like me for years to come.
love from India 🇮🇳 ❤
Thank you! Love to India!
GLTF not working in mobile devide , how to fix it ?
I'm jst speechless at d premium-quality courses u give to us at free of charge. I'm really grateful nd we will love to see more
Stay blessed boss
You too boss!
This is fantastic! Thanks, Adrian, for the time and effort you put into the production of such first-class content.
Much appreciated!
for those, whose earth is rotating about a different axis(not the vertical center)
change to
instead of
primitive object={earth.scene} scale={2.5} position={[0, 0, 0]} rotation-y={0} />
Questi video sono una miniera d'oro, meglio sfruttarli ora prima che sia troppo tardi! Questo è il futuro e la richiesta di lavoro è altissima! Complimenti dall'Italia
At 34:07 , on line 38, when you are rendering the About, Work and Contact in navLinks map, use instead of tag. Otherwise you will run into problems.
Hi, can you specify the changes, it's still not working for me.
@@anishwarsharma5277 what you're going to want to do is npm install react-router-hash-link, import { HashLink } from 'react-router-hash-link', and then do exactly as the tutorial says, but with a component instead of the tag. This will allow React Router to recognize your page id links.
@@benjohnson5164 Good to know, thanks
Thanks! I was wondering why my links would not stay white even though they're "active". Also remember to change 'href' to 'to'
I was supposed to watch other courses today but this just went top of my list. 3D is always interesting
Enjoy! :)
If someone has error like this "Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend?" you shoud just remove div in Loader Component and that's all
just started but already super excited, thank you for caring about us bro
this person is a god who have made all cheat sheets and resources :)
This is my sign to take threeJS seriously. Love it🥰🥰🥰
Yess!🔥
Followed and loved it from start to finish. It's a lot to take in honestly but I'm gonna start one from scratch and add a twist to the design and 3D models. Thanks so much Adrian! (Would love to see more of three.js and motion stuff)
Hey where to get those 3d models?
@@sujayshanbhag2055sketchfab
These projects are always cool, and I could follow them and just repeat it, but I'm hardly learning and 90% of it seem to require you to know everything that exists already. The fact you guys can come up with this stuff and show others how to make it is really quite something. But if I made this and displayed it as something I had created, it'd be a complete lie.
Start small on the projects if you need to. It gets easier. There’s a lot to learn here but yeah, it’s definitely more copy-pasting if you don’t know what’s really going on haha
@@sneaky3014dude this is like extraterrestial language for me, i'm really sad that i can't build what i would love to do because i'm only a ui/ux designer and this would take months Even years to learn and i do not have the time for it :(
👇 Time Stamps:
00:17:55 Layout
00:21:07 Navigation bar
00:40:57 Hero Section
01:07:41 About Section
01:17:09 Higher Order Component
01:23:28 Experience Section
01:44:33 Projects Section
02:01:01 Testimonials
02:13:15 Contact
02:32:09 3D Stars
02:49:09 Deployment
This is the most amazing thing I have ever seen in my developer life...
Thank you so much for doing the tutorial for three js. And hope for more of such three js tutorial in the future. ❤️
More to come!
If anyone else is stuck at 53:59, first try removing fallback from the suspense tag also try removing some chrome extensions. For me a couple chrome extensions I had were blocking it from loading.
Ayo thanks man
I had the same issue, i remove the fallback property and it works
My man! I was trying forever to fix this. I removed the fallback and it fixed it. Thanks!
@@simp4_jesus953 What did you do, just keep it at ?
Thanks man, it really helped!
never disappoints, always top-notch projects.
Thank you.
Appreciate it!
Sir I'm getting a error while building this project in scene.gltf during create a hero. Jsx code while not working properly I'm stuck in mid what should I do and ther error in public folder that h provide
Hi this is Stephen from Nigeria I really love the way you code, God bless you for the value you give
This is the first time I am commenting on any youtube video
I just wanted to say thanks for such an amazing tutorial
- It was so easy going
- your way of teaching is amazing
I just loved developing this portfolio!!
Looking forward to develop many more projects like this
Hello can you please tell is it okay for a beginner to do this? I covered HTML CSS and React js now looking to make projects. Is this project okay or tough for a beginner? Also can you suggest what projects to make if this will be tough i cant seem to decide what to do. I want to make atleast 3-4 good projects as my background is not of IT as well. Thankyou
@@kartavyasharma6272 I don’t feel this programmer is for a beginner and I’m not a beginner .. he makes great content .. start from the very, very simplest tutorials so you can gain confidence. Programming is not easy #goodLuck2u
successfully completed the project
thank you so much!
Thanks JM for great free resource.
54:15 I got stuck with the following error:
"Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."
not only but also with , , , ...
Resolve: try to change last line of Computers.jsx to "export default ComputersCanvas "
Hope this will help someone saving some time.
Thank you so much! god bless you
Thank you lol
Thank you so much
Did not work for me are there any other options?
@@morikami26 did u find anything , i'm stuck even now ?
who is having trouble here at minutes 54, I have been able to solve the problem
the way is
1. Make sure to use export default ComputersCanvas; in place of export default Computers;
2. in here you will see black screen until minute 58, but don't panic just continue the step of video until minutes 58.38. And reload your website
:)
Thanks Bro
You've literally made a video of all the things I want to learn now. You're incredible
Finally! Love threejs, and I love React w/ Framer Motion, but have always struggled to really get a head around getting them to play with each other
at 1:44:00 I realised, that balls don't float as I expect (they did strange rotation only when I did microscroll. It looks like veery slow animation and of course it doesn't looks good)
I delete "frameloop="demand"" and add "requestAnimationFrame" parameter at BallCanvas component --> Canvas tag, and now it looks much more better
also it could be frameloop='always' ,but I hav ethis error with the app running: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.Do you hav ethe same at the end?
Thanks man. Float now works on mine too.
What an incredible tutorial. Very thorough and legit. Really appreciate the effort put into this
just a suggestion, it would be nicer if the small balls, after you rotate them, would automatically turn back to their front/logo instead of staying on the empty side.
so did you implement this?
if yes, share your code please
😂😂😂😂
This is better projects than other youtubers , udemy and college, simply the best project tutorials.
Did you hosted this?
@@manash2 no, it's my opinion.
Mine too
This channel is AMAZING!!! It offers some of the best tutorials that are easy to understand. These tutorials have enlightened my mind and unleashed numerous possibilities for my personal development. Thank you for sharing these incredible videos.
If you are getting white screen during about section (01:07:41 About Section)
How to fix:
import {Tilt} from 'react-tilt';
Not:
import Tilt from 'react-tilt';
thanks
i am getting THREE.WebGLRenderer: Context Lost.and nothingshowing how to fix this?
DId the tutorial as of 3/12/2023 and ran into an issue and it looks like others have had the same problem. If when setting up all of the files and doing the imports you get the error, "You can mark the path "three" as external to exclude it from the bundle, which will remove this
error." all you have to do is run "npm install --legacy-peer-deps three use --force" in terminal.
thank you, that cleared all the hundreds of THREE errors that popped up in terminal
Really thank you
Not sure if I'm the only one that missed it but around 52:00 the export at the bottom changes to ComputersCanvas
Thanks! At the 39:31 mark the code looks one way, but at the 39:32 the mark, the code goes back to where it was at the 39:00 mark .. still LOVE the video! It’s just the things I changed 😂 until I figured it out was going on were driving me bananas
lol that is crazy
Learning about the HOC with SectionWrapper was amazing.
Thank you for the wonderful tutorial! You took me on a fantastic adventure and I had so much fun learning from you!
If u increase the intensity of the spotlight....you will be able to see that the code on the computer model is the code you are writing😗
great job! Thank you. I'm expecting from you video about docker and ci/cd in context of mern projects. I hope you can explain it easy
Cool idea!
I fixed it) u just need to remove fallback={} inside the and here you go, errors wont desapear, but at least it will work and the 3d object appears
Or just delete div inside the CanvasLoader))
@@eduardgrigoryan6052 You are a genius ;-; I WAS STRUGGLING FOR 24 HRS T.T But like is it really okay? If I host it, will it be okay?
Hey, I am tried it but it's not working , I am getting an warning
is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
Not only for hemisphereLight but also mesh , pointLight and primitive
and also 3d model is not showing on screen
I don't know pal, you have to delete any div elements inside those components
Done bro error is resolved ....and 3d model is also appears
What a wonderful instructional video. Thank you for taking the time to offer this tutorial to the public. I learned an incredible amount and Love the way this portfolio looks!
First thank you for that awesome video i learnt a lot. really appreciate that !
but => sm: is not just for small devices it's from sm to 2xl
so if you say "sm:block hidden " that means it will be hidden in phone pages and will be block from small pages to 2xl pages
The web looks and scroll nice on a computer but on a mobile device(using iPhone 14 pro) it is a little bit slow, very hard to toggle the navigation… Did anyone else notice that???
Anyone having trouble with the mobile version not displaying properly : There is way too much for the phone to handle, you got to reduce the number of stars on the contact section, completely removes the balls with the skills and replace them with an img version of them, try to get off as much draining things for the phone as possible, also the performances on desktop aren't that great, so, try to replace things too heavy with your own stuff that is lighter !
it's really helped, me thx, Ive been using those stars all around the page, so mobile was always crashing , and I didnt know what is going on, thx for your comment, you made my day!
I made this project and deploy it on vercel, everything looks great on desktop but on mobile the header section is creating problem, the screen turns into white I think I have to remove the 3d computer 😥😞
@@devilxgamer3775 facing this problem too, did you manage to resolve it?
@@ayubonyiego3588 no bro, I couldn't manage to resolve this 🤧
If you are new to 3js, don't watch this video, it has so many unresolved errors, and you will leave the project in between; I am just watching the video as a theory part, not coding alongside him.
Then how he coded the website?
Then what should we do then🙄
@@SYED0Pread documentation
You should be able to fix errors yourself if you’re at the point of needing a portfolio website
For example?
Some people are facing sectionwrapper issues. Here's how to fix it,
1- Uninstall the package with:
npm uninstall react-tilt
2- Then reinstalled it with:
npm install react-tilt
3- Then in the imports of About.jsx and Works.jsx change
import Tilt from "react-tilt";
to
import { Tilt } from "react-tilt";
4- Run
npm run dev
You just saved me so much time. Thank you!!
Always love your videos. They are so incredibly helpful and provide an excellent framework to make some incredible projects. My wife loves her blog site that I made from another one of your videos and now I have an excellent portfolio site. Thank you for everything!
I ran into an issue at 47:25 and it looks like others have had the same problem. If when setting up all of the files and doing the imports you get the error, "You can mark the path "three" as external to exclude it from the bundle, which will remove this error." all you have to do is run "npm install --legacy-peer-deps three use --force" in terminal and it will remove the error.
Thank You So Much
For anyone having an Uncaught Error: Could not load ./desktop_pc/scene.gltf: sRGBEncoding is not defined) error. The 3d model is the issue itself, its a corrupted file. Use a different model and its all good 👍
Thanks
Hello, you did great. Can you tell me the VS code extensions you are using?
At 2:07:00 the testimonial might not load for u,
"const FeedbackCard = ({index, testimonial, name, designation, company, image}) => {
return(
{testimonial}
)
}"
just change the const Feedback card code with the above code snippet, Hope that helps,
Thank You Adrian ❤
in point 43:45 I had to add to the gradient violet line mx-2 to make it match the line with the circle, Thanks for everything Adrian, I think my development skills really got improve after this video!!!!the linethe line
hey, when you get to around 54 minutes, can you lmk if the computer will load for you because it's not loading for me and every part of my code looks correct.
I'm facing issue of 3D objects are not loading on mobile screen view and same as project section too. Does anyone know the solution for that then please give it to me otherwise this complete tutorial is damn fabulous and amazing
bhai mera bhi same issue hai agar solution ho to batana
same issue
@Adrian, you have no errors in your solution, but I am facing lot of errors like below one 😭. Could you please help me to resolve it
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Same here
Try looking at the comments above. They mentioned solving the error by changing the last line of computers.jsx to export default ComputersCanvas
@@andieastra6141 I am facing this error at the end: VM11:1 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. but the app is running ok
Did anyone have an issue at 54:19, when Adrian fixed some errors, the desktop image show up on his website, but did not on mine. I also tried just copying and pasting his Computers.jsx file and still the desktop image did not pop up. Thanks
also copy the whole loader.jsx and it magically starts working
@@markolumbar4307 I've done this too but I still get a blank screen with an error saying this:Uncaught Error: Could not load ../desktop_pc/scene.gltf: Unexpected token '
@@simiariyo4163 were you able to resolve this issue?
Hellow @simiariyo4163 I also faces the same issue could you resolve it?
Could you resolve it?
I was really happy and proud on my html css js skills. And then i saw this video (now i feel I'm like I'm in kinder garden and this guy is Matered all things)
For those with mobile display issues, I fixed the problem by cutting only 2 canvases left, and some parts don't use motion framer; use the regular div or p tag.
Can you please tell me clearly
Can you explain more about the canvas? What canvas are you talking about
Hello beautiful fellows! I Spent $100+ for Hostinger domain, completed code-along, uploaded dist files, clicked on my custom domain name and ended with a 404... any solutions/ ideas please?
Man you need to make another 3D website. The video has crossed 20k views. I am watching it on 31st May, 2 months after, and it already has 34k likes. Btw, this is a great video!!
Hi Adrian , thanks for your work. It was great learning and I build my portfolio by following this video and i deploy it on GitHub pages it works fine on laptop but in real mobile device 3d model of computer is not loading.Anybody have this same issue??
Yes! I did too! I’ve been looking for someone with the same issue. The thing is, it loads on some devices and not on others. It seems to work on iPhones but not on android
Did you manage to find a solution
@@cheybrown2076 there is limit how much 3d object can be render on mobile device therefore i am rending images in mobile devices.
same issue here, on the ball section too
I want to thank you for your efforts in making such good content for free , keep it up , it helps a lot . Thanks.
Adrian, i followed all the steps and i have myself a nice looking portfolio and all thanks to you for the work you have put in this project.
Getting Could not resolve "three" error what to do?
it's only showing page title