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    • TresJS - Add 3D to your nuxt app usin...  

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 https://github.com/alvarosabu/nuxt-th...
- ThreeJS https://threejs.org/
- Nuxt v3 https://nuxt.com/
----

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 https://t.co/aaEZxcPC4W 😜


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 - TheExperience.vue
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