TresJS - Add 3D to your nuxt app using the official nuxt module

🎥 Welcome to our latest tutorial on TresJS, the official Nuxt module! 🚀
In this video, we dive deep into the world of TresJS (tresjs.org/), exploring its seamless integration with Nuxt and how it can elevate your web development experience.
We kick things off by guiding you through the installation process of the TresJS module in your Nuxt app. No stone is left unturned as we ensure you understand each step of the process.
Next, we move on to creating an introductory scene using TresJS. This will give you a taste of the power and flexibility that TresJS brings to your Nuxt applications.
One of the key highlights of TresJS is the enhanced developer experience. We delve into how TresJS allows for the auto-import of components and composables from the Tres ecosystem, making your development process smoother and more efficient.
We also showcase how clean and readable your components code can be when using TresJS. This makes your code easier to understand and simplifies the maintenance and debugging process.
Finally, we demonstrate how to import the Nuxt Carved Stones model from Blender into your Nuxt app. We use the useGLTF function to import and load the textures using useTexture. This practical example will help you grasp the real-world applications of TresJS in your Nuxt projects.
Remember, if you found this video helpful, please give it a thumbs up 👍 and subscribe to our channel! Your support helps us continue creating high-quality content and keeps the Gods of the KZbin algorithm happy.
Stay tuned for more exciting tutorials and don't forget to drop your questions and feedback in the comments section below. Happy coding! 💻
----
Resources
- TresJS Nuxt module tresjs.org/guide/nuxt.html
- Repo github.com/alvarosabu/nuxt-st...
- Download model alvarosabu.gumroad.com/l/nuxt...
- Sponsor TresJS. github.com/sponsors/Tresjs
- useGLTF cientos.tresjs.org/guide/load...
- useTexture tresjs.org/examples/load-text...
00:00 - Intro
01:02 - Nuxt app setup
01:30 - Installing @tresjs/nuxt
02:33 - Create the Canvas
03:37 - Autoimports feature
04:04 - Add an object
05:12 - Adding @tresjs/cientos package
06:21 - Autoimport of composables
08:06 - Blender model
09:30 - Adding the stones model
13:29 - Adding Textures
18:20 - Adding the little stones and texture them
23:21 - Adding nuxt logo and light orbs
25:41 - Adding Bloom effect with postprocessing
30:12 - Summary
30:43 - Outro

[@poliweb007]

Супер! Классное видео и очень актуальное и хорошее объяснение работы модуля TresJS в Nuxt JS. Хорошее продвежение модуля TresJS!

[@TheDeprecatedLibrarian]

Oh my good my man. No sabia que hablabas español. Que orgullo saber que hay hermanos realizando trabajos tan importantes para la comunidad de VUE. Un saludo y un abrazo.

[@rodrigoreyessanchez9517]

Tenía mucho tiempo que no veía tus videos, el progreso que has hecho es incerible, muchas gracias por todo el esfuerzo.

[@AlvaroDevLabs]

Muchísimas gracias!

[@JelleTalsma-hj9gv]

yooo thats sick! please do more like this! Maybe some interactiveness with some models? Like configuring a product for color and specifications (basic version i guess haha) would be amazing

[@harshitshivhare839]

I always wondered how can we add 3d models in website, thanks bro

[@prashlovessamosa]

Thanks.

[@sunid_tv]

Hi, thanks for the job done, and the tuto ! Is Tres available on nuxt 2 ?

[@vnnck]

brilliant

[@AlvaroDevLabs]

Thank you!

[@FernandoHernandez-pz9im]

Hola Alvaro, sabes como puedo editar un lo que quiero hacer es cargar mi objecto y editar las sus propiedades . Ya busque en la doc y no pude encontrar como resolverlo. Intente agregar a dentro de pero no funciono. Este es mi codigo: btw tienes algun blog o foro que me recomiedes para seguir aprendiendo tres js? Espero me puedas ayudar, un saludo desde Mexico y muchas gracias por todos estos videos, = soy fan de vue

[@AlvaroDevLabs]

Hey Fernando, primitive no acepta slots, por lo que tendrías que agregar el basic material al model directamente como lo harías con threejs. model.material = new MeshBasicMaterial()

[@PratyushTewari]

UPDATE 20 minutes later!: Check my reply to this comment: Hi Alvaro, I have followed this video as well as the instructions on the documentation guide on brand new nuxt projects and I keep getting this error: [plugin:vite:import-analysis] Failed to resolve import "@tresjs/core" from "app.vue". Does the file exist? I am not even able to see the black canvas. Any help would be awesome. I only want to show one small stl file on the my nuxt website and I am not able to have any success.

[@PratyushTewari]

So I was using yarn and not matter what I try it wont work. Then I used pnpm like yours and everything works. have you seen a similar issue? This is the first time I am using pnpm and firsttime yarn is failing me big time. But Thanks for all the effort for making the library. It is awesome!

[@AlvaroDevLabs]

I would suggest use pnpm, its better resolving dependencies, several users have experience issues with yarn.

[@standroads]

no, its broken, EffectComposer is broken

[@AlvaroDevLabs]

Which version are you using?

[@standroads]

@@AlvaroDevLabs everything was latest, I got error with OrbitControls, and loading issue of models, then I search some issues and found one template, by Francesco Michelini and did setup according to his, and now everything works fine. But I could not use Component, to make glowing effect. Maybe I am doing something wrong again, do not know, but we are starting big project based on 3D and looking around to find best tools to work with. Overall it is working.

[@AlvaroDevLabs]

You can implement the effect composer manually like you would do in threejs, what Effect composer does is save you time and do the implementation on a vue component. Everything should be possible without cientos and post-processing, they are only DX oriented extensions of the core to reduce code

[@bohdanbilous1144]

I installed @tresjs/nuxt as per documentation (yarn add three @tresjs/nuxt) But when I insert a component I get an error "Failed to resolve import "@tresjs/core"". the @tresjs/core installation documentation says nothing

[@AlvaroDevLabs]

What version of the module are you using? If you could provide a reproduction link I can jump right on it.

[@bohdanbilous1144]

@@AlvaroDevLabs "@tresjs/nuxt": "2.0.2". I solved this problem by installing @tresjs/core": 3.6.1. But I understand that @tresjs/nuxt should have it inside?

[@AlvaroDevLabs]

@@bohdanbilous1144 it has it as peer, and it should autoimport all the components and composables from it. I will take a look, are you using pnpm or yarn?

[@bohdanbilous1144]

@@AlvaroDevLabs yarn

[@overrevvv]

This video was really helpful however I am facing a little issue, I'm not getting any IntelliSense suggestions for Tresjs code, is there any specific config for that? I'm also using VS Code and Volar Extension pack. Versions "devDependencies": { "@nuxt/devtools": "latest", "@types/node": "^18.16.19", "nuxt": "^3.6.3" }, "dependencies": { "@tresjs/cientos": "^2.3.0", "@tresjs/nuxt": "^1.0.1", "three": "^0.154.0" }

[@AlvaroDevLabs]

Hey there thanks a lot! For the typescript you would need to install @types/three as well