Add 3D to your Nuxt website using ThreeJS

UPDATE 🎉 We just launched the official TresJS Nuxt module for a seamless integration 😊 Check this new video to learn how to use it Have you ever wondered to know how websites add these fancy 3D experiences? You know you can also do it with Nuxt and ThreeJS? This tutorial serves as an extension to my @Nuxtnation talk last November with a more in-detail explanation of how to: - Create a 3D Scene with ThreeJS - Create a render based on canvas element using template Refs - Make the scene responsive - Only render the scene on the client with Nuxt - Adding a GLTF model - Using composables And more. Resources - Link to the repo - ThreeJS - Nuxt v3 ---- Our Sponsors Meet Storyblok (not Storybook which is a different thing) The world’s first headless CMS that works for both developers & business users. I must warn you when you start using it, you will never go back to any other CMS solution Give it a try at 😜 00:00 - Intro 01:18 - What are we going to build? 01:56 - Create Nuxt App 02:44 - Basic Setup 04:51 - ThreeJS 06:38 - Install ThreeJS 07:02 - 3D Scene visual explanation 08:25 - 10:06 - Adding a camera and a sphere 14:08 - Renderer and canvas templateRef 19:54 - Set renderer to window size 21:58 - Nuxt ClientOnly 23:57 - useWindowSize 27:49 - The render loop 31:51 - Adding a GLTF Model 41:46 - Using composables 46:51 - Outro