TresJS - First steps with 3D on Vue

[@FernandoHernandez-pz9im]

Dude you're awesome! Great job, love vue and I wanted to learn three js but the documentation of trees is a lil limit and is kinda hard translate the three's docs into trees js. Love it thank you so much, I will follow all the videos please don't stop to upload this kind of content ❤

[@AlvaroDevLabs]

Thanks a lot for your kind feedback 😊. Really happy to know that this content is valuable. I will continue doing it

[@einl12345]

Looks great! Thanks :)

[@alexhek]

This library looks really useful. Do the object components support v-on:click or v-on:hover attributes?

[@AlvaroDevLabs]

Yes, we support pointer events docs.tresjs.org/api/events.html

[@ЙорданРамчев]

Great content!

[@sarwannizamani9963]

Your videos are great, but I am unable to find props for the different components like for example TresBoxGeometry, TresMesh etc, I am unable to look for different components there.

[@AlvaroDevLabs]

Hi! Thank you! The props and the arguments are exactly the same as you were using plain threejs, just by checking the documentation of ThreeJS you can see what props you can pass

[@sarwannizamani9963]

@@AlvaroDevLabs yes, components as well are same as defined in threejs?

[@caioalves8319]

Hello, would you be able to make a video on how to use Histoire in Nuxt 3?

[@thomasfichtner9738]

Hey Alvaro, loving the framework your creating. One question is there a function or a way to fully or partly clean a scene and dispose items? Iam currently doing it like: if (this.renderer?.renderer && this.scene && this.canvas) { this.scene.traverse((object) => { if (object instanceof THREE.Mesh) { object.geometry.dispose(); object.material.dispose(); object.material.map?.dispose(); } }); this.renderer && this.renderer.renderer.dispose(); this.canvas.removeChild(this.renderer.renderer.domElement); } But is there a better way that the TresJS provides? Thank you

[@thomasfichtner9738]

Or when TresJS does it automatically - is there a way to keep 3d components alive when switching pages?

[@AlvaroDevLabs]

Hey Thomas, first of all thank you for your kind message 🙏🏻. Really happy you are enjoying it. Yes correctly, TresJS takes care of all the disposals for you when the components are `unMounted`. I don't know if using component from vue will keep it between pages. vuejs.org/guide/built-ins/keep-alive.html#basic-usage

[@thomasfichtner9738]

@@AlvaroDevLabs Thank you very much I will try ✌🏼❤️❤️

[@kokiiito]

i'm trying to use tresjs but whenever I try to set a color to any mesh material, i keep getting an error that says "type 'string' is not assignable to type Color", and altough the 3d mesh changes the color the error is quite annoying, do you know how could I get rid of it?

[@AlvaroDevLabs]

I think is fixed in the last version, it was a type issue when threejs updated to 160

[@marhunter1698]

спасибо бро

[@RobertWildling]

Nice tutorials, even though a bit confusing. There is no package.json (but you later mention that you have a basic setup with vite). Also: what are "nr" and "ni"? When I search npm I get really old results (like 9 and 10 years old). And when I install those packages globally and use them, all I get is errors over errors. Could you please share a little info about "nr" and "ni"? Thank you! 🙂

[@AlvaroDevLabs]

Hey there! Thanks for the feedback, ni and nr is npm install and npm run when you use antfu ni package github.com/antfu/ni

[@insecureup]

¿Alvaro tienes canal en Español?

[@AlvaroDevLabs]

Hola por ahora no, la inmensa mayoria de mi comunidad es internacional, saludos!

[@LNSFLIVE]

doubt you can use fbx files, but can you still use glb files? maybe do a video for that

[@AlvaroDevLabs]

In fact, you can load fbx easily, we have FBX abstractions, you can use the useFBX composable here cientos.tresjs.org/guide/loaders/use-fbx.html or directly the FBXModel component cientos.tresjs.org/guide/loaders/fbx-model.html A video explaining model loading is on the roadmap, where I will cover all of this. Thanks for the feedback

[@LNSFLIVE]

@@AlvaroDevLabs :O