Next-Level Web Design: 3D Model Backgrounds for Elementor with Three.js | WordPress Tutorial
ฝัง
- เผยแพร่เมื่อ 8 ก.พ. 2025
- Elevate your web design skills with this tutorial on creating immersive 3D backgrounds in Elementor using Three.js. Learn how to transform your website's visual appeal and user engagement with stunning, interactive 3D elements. Perfect for web designers and developers looking to stay ahead of the curve.
Reference page for this tutorial:
rebootwebsites...
#3DWebDesign #ElementorTutorial #ThreeJSTips
----------------------------------------------------------
My Affiliate Links:
----------------------------------------------------------
The Best Hosting Company Around , Save over 75% in the first year :
✅ SiteGround : tinyurl.com/2u...
For SEO there really is no other than Semrush:
✅ semrush.sjv.io/POy9ZY
Elementor Pro:
✅ be.elementor.c...
Save up to 75% on Elementor Hosting:
✅ be.elementor.c...
Man you're a legend, thanks a lot
nice one bro. all the best from berlinnn💯
Hello Miguel, thanks for this great tutorial. Please is there a way the 3d model can be placed inside a section, and then the section sticks to the viewport until the model has completed a 360 degree rotation on scroll, before the entire page keeps on scrolling?
I placed everything as you indicated but only the black background appears and the 3D model does not appear. Everything is uploaded correctly but when I preview it nothing appears. Do I need any additional requirements?
No, everything is in the video .. as you saw it and it working was exactly the process ..
In the preview, right click and inspect, in the console should show an error to where it’s going wrong , out that error here and let me see..
Try playing with the camera offset. It worked for me ! 14:11
First of all, thank you so much for sharing such excellent resources and code. I exported a model as a GLB file from KeyShot and integrated it into the code you provided. However, the model appears very small, almost like a dot. I would like to ask if there is a way to resolve this issue.
@@sometimes7539 pleasure .. in the code, the top variables, you can move the camera closer , to the left/ right .. all that good stuff.. depending on the model, it would be by a lot or by decimal points, but the code was made to be adjustable as easily as possible..
CAMERA_DISTANCE_FACTOR_DESKTOP & then CAMERA_DISTANCE_FACTOR_MOBILE , are the variables you looking for near the top 🙂
Hello ! Lovely video thank you for sharing. The Custom File Type part is not working for me. I am still getting the "File Type Not Supported" error even though I have GLBs enabled in File Upload Types. Any idea why this might be?
That is very odd ?!?..
If you followed along then it shouldn’t be an issue ..
Do you have a security plugin running that could be preventing it ?
@@the_mig im not sure ! Ive been using Add From Server as a workaround which works, but the drag and drop doesn’t