Build and Deploy an Amazing 3D Web Developer Portfolio in React JS | Beginner Three.js Tutorial
The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
What to do after mastering Three JS? Master the most powerful web dev framework today - Next 14! www.jsmastery.pro/ultimate-ne...
⭐Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 FREE Ultimate ThreeJS Cheatsheet: resource.jsmastery.pro/threej...
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
GitHub Gist Code Snippets: gist.github.com/adrianhajdin/...
Assets, Components, Public folders: drive.google.com/drive/folder...
Bruno Simon Portfolio - bruno-simon.com/
Junni - next.junni.co.jp/
In this course, you'll learn the following:
- ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
- React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
- TailwindCSS - a popular utility-first CSS styling framework
- Framer Motion - the most popular library used to bring your React website to life with animations
You'll also learn how to:
- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
- Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
- Implement sending emails through a form on the website
- Ensure responsiveness across all devices and improve your site's performance using Suspense and Preload.
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM on Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
👇 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
Пікірлер: 2 400
Want to land your dream programming job in 3 - 6 months? ⭐ JSM Masterclass Experience - jsmastery.pro/masterclass Become a Software Engineer. Guaranteed.
@amirmanzoor4343
Жыл бұрын
cant't able to deploy this on vercel any solutions
@KarthikMumadi
Жыл бұрын
can you please make use of Webxr with threeJS to simulate AR products in a e-commerce site this would be a crazy project
@DonNjabs
Жыл бұрын
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
@moseskiprono8594
Жыл бұрын
I must be fullstack Developer, I am ready to sacrifice everything even though I come from very poor background, I must achieve my dream
@anupamanand5480
Жыл бұрын
from where did you get those png for about section....?
Now I know how ill spend my weekend
@javascriptmastery
Жыл бұрын
Enjoy! 😊
@BigBankzSon
Жыл бұрын
I'm already getting started 💯
@denniswambua4471
Жыл бұрын
Definitely staying indoors this weekend
@arvydas5017
Жыл бұрын
@@denniswambua4471 no touching grass this weekend? :D
@thefuntech2810
Жыл бұрын
Same also
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!
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.
This is fantastic! Thanks, Adrian, for the time and effort you put into the production of such first-class content.
👇 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!
@GodOfFaith
Жыл бұрын
Thanks man
@daffaalexander6300
Жыл бұрын
Thankyou❤
@daffaalexander6300
Жыл бұрын
01:34:25 is Tech section
@daffaalexander6300
Жыл бұрын
02:24:05 is earth model section
@arpanbajpai1226
Жыл бұрын
Bro did you faced any difficulty following this project?
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 😍
@javascriptmastery
Жыл бұрын
Enjoy! 😊
"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.
i can't stress this enough, your teaching, rhythm and editing is out of this world
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 was so simple to follow and also extremely informative on how I can adapt and build other projects with similar features. Thank you 😊
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
Жыл бұрын
watch a blender tutorial
@rybaxter6454
Жыл бұрын
@@gabrieldiaz6509 is blender gltf? sorry Im new to 3D scenes and looking to create my school logo in 3D.
@gabrieldiaz6509
Жыл бұрын
@@rybaxter6454 yes, blender guru is great to start in this.
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!
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.
@javascriptmastery
Жыл бұрын
Glad you like it
👇 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.
No doubt, one of the best development channels ever! Congrats Adrian!
@javascriptmastery
Жыл бұрын
Thank you! 😊
i love how you said words carefully and clearly, english is my scnd language and this really helps. thankyou!
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!
such an amazing video. The world needs more of these man that are trying to help people get better
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.
@authenticself3800
10 ай бұрын
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.
@aayanminhasminhas2271
10 ай бұрын
I will make it but my 3D models can not load in hero section
@kanchisrivastava5124
10 ай бұрын
heyy, how much time did it take you to complete this project?
@nsikakikot7285
6 ай бұрын
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?
@enddigital2377
3 ай бұрын
@@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)
@dineindark
Жыл бұрын
tnx bro
@jinethhettiarachchi8744
Жыл бұрын
yes yes yes thanks a lot brother ... you save me my entire evening... this comment deserve more like
@bitcoincypher
Жыл бұрын
Thanks bro.
@dev.gnzx2
Жыл бұрын
thank you really my head almost exploded
@Aviralsingh-yw7xx
Жыл бұрын
Thanks a lot. I was on the verge of breaking down
Seriously, your vids make me learn JS more than anyone. I wish you had twice as many subscribers as you already have.
For many days I was looking for threejs tutorial. And here, you brought this with a stunning project. Hats off to you.
@javascriptmastery
Жыл бұрын
Thank you so much 😀
I have been watching and learning from your videos since long. Actually from more than 1 and half years. But never thanked you for making these videos. Now it's my first comment on your video. Thank you really thank you sir !! You are really an excellent teacher and guide. Hope you continue to make these amazing videos and never get tired of giving knowledge to us.
@javascriptmastery
Жыл бұрын
Thank you so much!!!
Thank you for the wonderful tutorial! You took me on a fantastic adventure and I had so much fun learning from you!
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
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!
@javascriptmastery
Жыл бұрын
Enjoy! 😊
@vivekmaurya2852
Жыл бұрын
have you implemented this , is this working ? please reply because , i am getting error
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
Жыл бұрын
Dude how to contact you. I have some doubts related to the project. Do reach out please
@Shubham-Lal
Жыл бұрын
@@dakshkumar992 I didn't understand which Logo are you talking about. Is it the meta tag of the site or the Navbar one?
@Shubham-Lal
Жыл бұрын
@@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
Жыл бұрын
How do you resolve this the peer dependency issues if you've already used react-tilt.
@Shubham-Lal
Жыл бұрын
@@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".
You've literally made a video of all the things I want to learn now. You're incredible
Thanks Adrian for this awesome work, you literally blessed my day with this video!
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)
@sujayshanbhag2055
Жыл бұрын
Hey where to get those 3d models?
@KwameGyanko
11 ай бұрын
@@sujayshanbhag2055sketchfab
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.
@javascriptmastery
Жыл бұрын
Thank you so much Rodgers!
@Dr_PhilK
Жыл бұрын
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
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
Жыл бұрын
Thank you so much! And yeah, Llama is great! 🦙🔥
@imkir4n
Жыл бұрын
yeah they are the best in the youtube
@zerominute1209
Жыл бұрын
@@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
@zerominute1209
Жыл бұрын
plz help me
@imkir4n
Жыл бұрын
@@zerominute1209 whats the error
Amazing tutorial. Thanks a lot Adrian! 🤩
You're incredible dude. Keep up the amazing work!
never disappoints, always top-notch projects. Thank you.
@javascriptmastery
Жыл бұрын
Appreciate it!
@anujkashyap999
Жыл бұрын
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
I just built a portfolio website 2 weeks ago, but this one looks insane. Looks like I’m building another!!
@javascriptmastery
Жыл бұрын
Glad you like it! 😊
@elbertainstein2451
Жыл бұрын
fr, doing the same
@deepanshuce-5180
11 ай бұрын
@@arielebabini9012 same with me happening
successfully completed the project thank you so much!
Thank you so much for doing the tutorial for three js. And hope for more of such three js tutorial in the future. ❤️
@javascriptmastery
Жыл бұрын
More to come!
Boom, I'll have this done by the end of the day! Thanks! Your content is always topnotch.
@javascriptmastery
Жыл бұрын
Thank you so much, enjoy!
Adrian thank you, for all these amazing videos!
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!
@javascriptmastery
Жыл бұрын
Amazing. Enjoy!
@JohnWickea
10 ай бұрын
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 :/
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 🇮🇳 ❤
@javascriptmastery
Жыл бұрын
Thank you! Love to India!
@ShubhamSingh-ts3sw
9 ай бұрын
GLTF not working in mobile devide , how to fix it ?
This channel is a blessing for both beginners and intermediates.
@javascriptmastery
Жыл бұрын
Thank you! 😊
Awesome tutorial! I didn't expect it to be that easy, Tailwind is GOAT
Thank you so much for this amazing tutorial. Loved it and learned a lot while building it.
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 😁
@kalyansaxena6460
Жыл бұрын
I believe setting the property to 'always' also works -> frameloop='always' Anyway thank you! your solution led me to fix the ball rotation
@-RohitJaiswal
Жыл бұрын
Thank you very much buddy.
@elvictoret
Жыл бұрын
You're the best!!
@Henry-lr9sw
Жыл бұрын
Thanks you so much. Saved my life!!!
@prabhakardeep
Жыл бұрын
Thank you very much. You are the best. It looks alive now.
I was supposed to watch other courses today but this just went top of my list. 3D is always interesting
@javascriptmastery
Жыл бұрын
Enjoy! :)
best web tutorial i have ever seen. Thank you
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.
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
Awesome - love that the pc you downloaded was working on your tutorial (just at the bit I, ahem, first got stuck on too) so you can prolly add quntum computing/ time travel to the skillset!
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
@kartavyasharma6272
Жыл бұрын
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
@edutainment9235
Жыл бұрын
@@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
Use import { Tilt } from 'react-tilt' ; instead of import Tilt from 'react-tilt'; to avoid white screen problem thank you ❤
@Nikhi_lesh
5 ай бұрын
Think you Dude
@michaelpacto364
5 ай бұрын
hi i`m having a pproblem in hero ssection light and postion and rotation not reflected
@Nikhi_lesh
5 ай бұрын
@@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
@-NITIN
4 ай бұрын
Same here @@michaelpacto364
@charlielehnert7889
3 ай бұрын
i love u
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
Thank You for this amazing and comprehensive tutorial!
just completed your metaversus tutorial project...loved it....I am currently doing project based learning....I have learned so many things by just following your project tutorial.....I hope to become a good react developer in coming days❤❤❤❤
@javascriptmastery
Жыл бұрын
Keep it up
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.
@arpanbajpai1226
Жыл бұрын
Getting Could not resolve "three" error what to do?
Looks stunning!
56:11 penumbra is the second shadow casted by the initial shadow(umbra), it covers a wider area and surrounds the initial shadow.
@josemirandaiii1064
Жыл бұрын
thank you for the explanation!
Yes!!!! Thanks, dude. Abraço do Brasil! God bless you!
@javascriptmastery
Жыл бұрын
Greetings to Brasil!😊
Great!, a crystal clear explanation, thank you for taking your time doing this topnotch material! blessings.
thank you so much I have learned a lot from you and I hope you never stop teaching us ❤❤❤❤
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
@javascriptmastery
Жыл бұрын
You too boss!
What an incredible tutorial. Very thorough and legit. Really appreciate the effort put into this
What a good place to find 3d models like these. Great tutorial!
Hi Adrian honestly I'm speechless, keep up the good work
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.
@laibaiqbal7801
11 ай бұрын
I am also getting the same error . have you got solution?
@laibaiqbal7801
11 ай бұрын
@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
@NphiniT
11 ай бұрын
@@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
@ArdaAydnVideolar
11 ай бұрын
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.
@NphiniT
11 ай бұрын
@@ArdaAydnVideolar Oh I see
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
@javascriptmastery
Жыл бұрын
Cool idea!
Love your work brother. Thanks, I'm using this on a real non-portfolio project. ❤
I always get excited with a tutorial of this man
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';
@vergoal4745
3 ай бұрын
thanks
@user-zm6nk5mw9i
15 күн бұрын
i am getting THREE.WebGLRenderer: Context Lost.and nothingshowing how to fix this?
This is my sign to take threeJS seriously. Love it🥰🥰🥰
@javascriptmastery
Жыл бұрын
Yess!🔥
Hi this is Stephen from Nigeria I really love the way you code, God bless you for the value you give
Thank you is not enough, I'm grateful beyond words.
what an amazing website! You're better than universities since I am learning way more for free. Thanks a lot! By the way, could you build a react app with a paid subscription or paid features? That would be really awesome!
@javascriptmastery
Жыл бұрын
Great suggestion!
@abdulazeez2222
Жыл бұрын
@@javascriptmastery Yeah that would be better
Good work man! This is awesome! I am actually building this out myself and love it. I was wondering If I could get a few directional pointers from ya. I am working on making it so after the user stops rotating the balls that the slowly rotate back to their starting rotation position. I am not sure where to start on researching how to do this. Any sudgestions would be amazing. Thanks.
@arielelias2413
Жыл бұрын
can you resolved it? i want to do the same thing
Thank you for making this great portfolio, Adrian.
nice weekend build. just completed it. thank you very much
I just loved this tutorial! I've learned so much about Framer and Three. Thank you
Hello, you did great. Can you tell me the VS code extensions you are using?
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.
@sneaky3014
Жыл бұрын
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
@TheMezmeriZe
Жыл бұрын
@@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 :(
I like and I subscribe, I love the video and it's rare to find people who explain concepts so clearly and well. You're amazing Thank's
Well done you'r always suprise me with this new videos! You'r a star and very good teacher ! 😁❤
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!!
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.
@notanothersouravjoshivlogs8715
Жыл бұрын
so did you implement this? if yes, share your code please
@techbydami379
9 ай бұрын
😂😂😂😂
Once again, another professional application!
I want to thank you for your efforts in making such good content for free , keep it up , it helps a lot . Thanks.
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
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.
@abon2204
Жыл бұрын
Ayo thanks man
@RodrigoPerez-rn8ve
Жыл бұрын
I had the same issue, i remove the fallback property and it works
@simp4_jesus953
Жыл бұрын
My man! I was trying forever to fix this. I removed the fallback and it fixed it. Thanks!
@Millz98
Жыл бұрын
@@simp4_jesus953 What did you do, just keep it at ?
@bizkiqz6337
Жыл бұрын
Thanks man, it really helped!
Couldn't be better... I literally created a website in 1 day and learned so much
done and dusted Adrian. You really help me get there! Hope to land a great job soon so i get enough money to join your master class. Keep the good work up
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
@jotasenator
8 ай бұрын
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?
@monoq_
3 ай бұрын
Thanks man. Float now works on mine too.
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😗
you’re the best. i can’t thank you enough
Thanks to that, I was able to create a 3D website. A few more things come to mind that I would like to apply. thank you so much! 🙏
Man I have lost words. "That's all I can say at this moment. I have to upgrade my website immediately after this video
@javascriptmastery
Жыл бұрын
Yess, do it! 😊
@owensofcode
Жыл бұрын
@@javascriptmastery Thanks Bro.
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.
@techknowgemes7860
Жыл бұрын
Thank you so much! god bless you
@isaaccarter7786
Жыл бұрын
Thank you lol
@reaperhound1699
Жыл бұрын
Thank you so much
@morikami26
Жыл бұрын
Did not work for me are there any other options?
@mikelan9854
Жыл бұрын
@@morikami26 did u find anything , i'm stuck even now ?
Thank you, I just also made me for my version. This is extremely helpful
Not sure if I'm the only one that missed it but around 52:00 the export at the bottom changes to ComputersCanvas
@edutainment9235
Жыл бұрын
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
@julioo534
Жыл бұрын
lol that is crazy