filmov
tv
TresJS - Add 3D to your nuxt app using the official nuxt module
Показать описание
🎥 Welcome to our latest tutorial on TresJS, the official Nuxt module! 🚀
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 YouTube 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
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
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 YouTube 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
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
0:19:30
TresJS - First steps with 3D on Vue
0:31:39
TresJS - Add 3D to your nuxt app using the official nuxt module
0:35:51
How to add 3D to Astro using TresJS
0:19:09
Getting started with 3D on Vue with TresJS
0:01:01
Use TresJS to add 3D to your Vue apps #coding #3d #threejs #vuejs #vue
0:14:32
TresJS - Animate your 3D Objects with Vue
0:36:07
How to add 3D to your Vue App using ThreeJS
0:21:57
TresJS, a declarative way of creating 3D scenes from Vue components - Vue.js Live 2023
0:22:26
TresJS. Declarative way of creating 3D scenes from Vue component - Alvaro Saburido, Vue.js Live 2023
0:19:09
TresJS OrbitControls
0:01:01
Animate your 3D objects using Vue and TresJS #coding #vue #three #tresjs #3d
0:48:14
Add 3D to your Nuxt website using ThreeJS
0:05:57
Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial
0:00:45
Introduction to TresJS: A 3D Rendering Library for Vue.js
0:01:41
Episode 3: Animating Objects in TresJS using useRenderLoop and Vue's templateRefs by Alvaro Sab...
0:22:18
How to Load a 3D model in Three.js | GLTF/GLB Model | GLTFLoader
0:26:29
TresJS Materials
0:08:28
I Built a 3D Developer Portfolio Website // Three.js + React + Tailwind
0:16:24
TresJS v2 beta - What's hot 🔥?
0:15:55
Add 3D to your Nuxt site using ThreeJS by Alvaro Saburido: Nuxt Nation 2022
0:31:58
Vue.js Nation 2024: How to create 3D experiences using Vue with TresJS by Alvaro Saburido
0:01:34
Vue ThreeJs Model Loader
0:00:58
How to use TresJS - Part 2
0:26:17
Alvaro Saburido - The Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
Комментарии