I'm glad many people like this video considering it's my first one after a while. However, as a creator, I need to make sure I'm putting out videos that are beneficial rather than a hassle. I've started seeing comments around performance which I didn't experience at the time or foresee other people experiencing it especially when they're trying to make their own twist (Which I encourage). I would recommend to see other exporting options (such as Three.js/React-Three Fibre) and see if that helps. I haven't personally used it myself but those are the possible options I can give out. If you are building a front facing website then I believe based on these performance issues, I would not recommend to use this approach. You don't want to tank your SEO/performance ratings for this and UX is really important. If you're using a web app which isn't front facing to your website, then you can still use it but I would make sure you're optimising it and gaining user feedback to make sure everything is stable. I apologies for this but hey, it's all part of the journey.
I hope this video was helpful! There is one point I forgot and I realised this now where before exporting, make sure to enable auto zoom and zoom in to the rectangle. Alternatively, you can change the size of the rectangle to the view and also make sure to press update before exporting. This is for responsiveness for wide-screen monitors and you want to make sure you cover most if not all aspects of that. Other than that, thank you for watching and if you like this type of content, consider subscribing. I will definitely be making more videos soon! If you want to catch me on other socials then my most active platform is X/Twitter: x.com/AnzTech . If that's not your cup of tea or if you are also on Threads/Instagram then it is: www.threads.net/@_anztech or instagram.com/_anztech/
I haven’t done so myself but Spline allows you to export to 3D formats. You can try looking in to React-Three-Fibre and see if that’s what you’re looking for? Make a small object, look at the export options and see how you go!
I have made a similar background but i animated the displacement so it looks like it ripples. I have a MacBook Pro M1 Pro and the CPU runs at 75C. The scene is fully optimized everything is green the compression is set to performance and it still runs hot. On the phone the animations are not smooth when i have it as a background. Do you have experience with react three fiber, do you think it would help ?
Yeah unfortunately there are some drawbacks to this and it seems like as you start diving in to manipulation such as increase in displacement/sub divisions, there has been some performance impacts (Base M2 Max user here). I would definitely look in to exporting to use React-Three Fibre or even Three.JS. As mentioned in other comments, I haven't got around doing so myself. However, someone I know did experiment exporting as a 3D format (Such as GLTF) and that didn't work out too well.
@@_AnzTech I wonder how others get away with more complex animations, in this case this program is pretty useless then. Subdivision is at 1 and i decreased the sides to the point that the edges are not smooth... I have contacted them via email and they said they will look into it, i'm curious what will they have to say. Anyway thanks for the info.
@@DRUEVISUAL I think it might have to do with having smaller objects which might not hit the load as much but I have seen on community pages full page designs as well. But yeah nah no worries, glad you reached out!
Will this background render with low internet connection ? I've used interactive bakgrounds before but they won't load with bad connection or low RAM. Thanks for the tutorial !!
Thank you for your comment man - Good question! I've just tested with different throttling (such as 3G,2G speeds) and it seems to have loaded fine. Little delay (3-5 second tops) but regardless, it does render and works about the same as normal connection. Ram I will need to check further on for sure. There are alternative ways to export as well such as using React-Three-Fibre which Spline generates the code for you. Hopefully this helps.
You need to go to the Spline export settings, go to play settings and then set cursor to "Default" - That should have the mouse back. Make sure to update the export as well for the changes to take effect. 😄
I'm glad many people like this video considering it's my first one after a while. However, as a creator, I need to make sure I'm putting out videos that are beneficial rather than a hassle.
I've started seeing comments around performance which I didn't experience at the time or foresee other people experiencing it especially when they're trying to make their own twist (Which I encourage).
I would recommend to see other exporting options (such as Three.js/React-Three Fibre) and see if that helps. I haven't personally used it myself but those are the possible options I can give out.
If you are building a front facing website then I believe based on these performance issues, I would not recommend to use this approach. You don't want to tank your SEO/performance ratings for this and UX is really important.
If you're using a web app which isn't front facing to your website, then you can still use it but I would make sure you're optimising it and gaining user feedback to make sure everything is stable.
I apologies for this but hey, it's all part of the journey.
I hope this video was helpful!
There is one point I forgot and I realised this now where before exporting, make sure to enable auto zoom and zoom in to the rectangle. Alternatively, you can change the size of the rectangle to the view and also make sure to press update before exporting.
This is for responsiveness for wide-screen monitors and you want to make sure you cover most if not all aspects of that.
Other than that, thank you for watching and if you like this type of content, consider subscribing. I will definitely be making more videos soon!
If you want to catch me on other socials then my most active platform is X/Twitter: x.com/AnzTech .
If that's not your cup of tea or if you are also on Threads/Instagram then it is: www.threads.net/@_anztech or instagram.com/_anztech/
Nice video, the quality has improved
Thank you brother!
wow really needed this for my portfolio
Glad to hear this helps!
is there a way for JS to do react to Spline events and vice versa? like configuring a pizza in 3d that ends with a json api to stripe checkout ?
I haven’t done so myself but Spline allows you to export to 3D formats. You can try looking in to React-Three-Fibre and see if that’s what you’re looking for?
Make a small object, look at the export options and see how you go!
Great video🫡
I have made a similar background but i animated the displacement so it looks like it ripples. I have a MacBook Pro M1 Pro and the CPU runs at 75C. The scene is fully optimized everything is green the compression is set to performance and it still runs hot. On the phone the animations are not smooth when i have it as a background. Do you have experience with react three fiber, do you think it would help ?
Yeah unfortunately there are some drawbacks to this and it seems like as you start diving in to manipulation such as increase in displacement/sub divisions, there has been some performance impacts (Base M2 Max user here).
I would definitely look in to exporting to use React-Three Fibre or even Three.JS. As mentioned in other comments, I haven't got around doing so myself. However, someone I know did experiment exporting as a 3D format (Such as GLTF) and that didn't work out too well.
@@_AnzTech I wonder how others get away with more complex animations, in this case this program is pretty useless then. Subdivision is at 1 and i decreased the sides to the point that the edges are not smooth... I have contacted them via email and they said they will look into it, i'm curious what will they have to say. Anyway thanks for the info.
@@DRUEVISUAL I think it might have to do with having smaller objects which might not hit the load as much but I have seen on community pages full page designs as well. But yeah nah no worries, glad you reached out!
Thank you
Will this background render with low internet connection ? I've used interactive bakgrounds before but they won't load with bad connection or low RAM.
Thanks for the tutorial !!
Thank you for your comment man - Good question!
I've just tested with different throttling (such as 3G,2G speeds) and it seems to have loaded fine. Little delay (3-5 second tops) but regardless, it does render and works about the same as normal connection.
Ram I will need to check further on for sure.
There are alternative ways to export as well such as using React-Three-Fibre which Spline generates the code for you.
Hopefully this helps.
hey, I have a problem when I hover my mouse pointer in the background it disappears what should I do ?????
Did you check your export settings and see if the cursor is set to hidden?
@@_AnzTech yes it's is hidden
@@mrfrankstea Yeah you want to have the default in order for it to appear.
You need to go to the Spline export settings, go to play settings and then set cursor to "Default" - That should have the mouse back. Make sure to update the export as well for the changes to take effect. 😄
@@_AnzTech did you mean to reset it?