To create a seamless transition into a separate page on our site, we're going to need to use a single page framework like Nuxt or Next.js. Since Nuxt uses Vue, it is by default a much easier framework to use in my opinion, so we'll be going with that.
To get our three.js piece working in Nuxt, we need to do quite a bit of refactoring, mainly because Nuxt renders its HTML on the server side of things for enhanced performance and SEO. It's a bit of extra work, but by doing so, we'll be able to utilize Nuxt's wonderful routing system that'll load only the exact content we need without ever having to do a full page refresh.
Follow along and let me guide you through the complete refactor process to get three.js working in a real-world project.