This is the project I was so excited about sharing. 🤩
Dream collab with
@ViteConf
and
@patak_dev
to build a 3D Pyraminx Puzzle with
@tresjs_dev
, and
@stackblitz
WebContainers.
The cool part? If you click Code! You can program your own solver for the puzzle 🤓.
This is how far I have gotten with the Tres
@nuxt_js
devtools.
A proper scene graph view to inspect
@threejs
objects on the scene. Let's see how this evolves.
Kudos to
@antfu
and nuxt team, custom tab API 👌
The worst part was that she called out Henry Cavill of being difficult just because he wanted to stay true to the original source of the Witcher.
The audacity.
We're happy to announce TresJS v2 beta! 🔥🎉
After a month of hard work and gathering feedback from users, a new major version of TresJS is available.
Guess what, TresJS is now a Vue Custom Render 🤯
What's hot 🔥🌶️? --> 🧵Thread
The most significant release of TresJS v1.7.0 📦is here 🤩:
- Realistic preset for the renderer 🔥
- Better HMR disposal of scenes (Improves DX) 🥹
- Better state management with useTres
- Environment abstraction (cientos)
- Removed annoying warns
While recording my next video about
@astrodotbuild
I managed to fix the shader for the Houston model and now the gradient looks pretty smooth. 😊
Basically, I simulated
@Blender
Texture Coordinate and Color Ramp with glsl
How? Check thread 🧵
🪐🪐🪐I have a huge announcement to make today. 🪐🪐🪐
I changed my avatar some weeks ago to give a hint of my new role. My new mission 🚀👨🚀
The time has come.
Yesterday, I had the chance to talk with
@youyuxi
at
@vuejsamsterdam
and hang out with so many amazing people from the Vue and Nuxt community. 😊
What a great time.
Update on the TresJS Nuxt devtools 😋.
Say hello to the Performance monitor 🚀:
- FPS
- Memory (usedJSHeapSize and allocated)
- Render info
Todo:
- Shaders info (programs)
- GPU Graph
- CPU Graph
🥺😍 I just received a DM from a company that is using
@tresjs_dev
for production-level projects.
They decided to sponsor me. 😍 As a FOSS maintainer, this is absolutely the best thing that can happen to you.
I deeply appreciate it 🙏🏻
I finally managed to finish the HTML component for
@tresjs_dev
cientos package 🥳.
This one is very powerful, you can project any HTML into your 3D objects like an iframe containing your website 😜.
Video Inspired by
@bruno_simon
portfolio lesson
Macbook Model from
@pmndrs
Build 3D experiences in your
#vuejs
application with Tres.js. Tres.js is a new declarative way of building 3D
@threejs
with
@vuejs
components.
Built by
@alvarosabu
Try it out:
I'm incredible excited to announce that I have started a new role as a DX (Developer Experience) Engineer at
@storyblok
to lead the OSS of the product!
I guess my experience as author on
@tresjs_dev
ecosystem helped out 😂
Pretty excited about this new challenge
@Rasv21
@SaloGuardione
Si es verdad que poco a poco esa Ansiedad desaparece y te habituas al nuevo ritmo y a realmente disfrutar de tu trabajo.
No es malo haber pasado por ello. Ahora sabes lo que está bien y lo que está mal. Lo que quieres y lo que no.
Ánimos
Interesting 🤔 I managed to set up a
@Ionicframework
with vue and
@vite_js
and previewed it with the Ionic VSCode extension.
It looks fantastic so far.
Are you interested in a full video tutorial on how to do it? 🤘
Dreams come true.
After several years of attending the conference and looking out to all the VueJS and Open Source leaders who inspired my career on that stage, it is now my time to give back to the community 🥰.
See you soon.
🌐✨ Embark on a mesmerizing journey with
@tresjs_dev
🚀 Immerse yourself in 3D scrolly-telling that weaves storytelling and breathtaking visuals with
@alvarosabu
. Elevate user engagement by adding personalized touches! 🎨
👉
#vuejsamsterdam
#vuejs
#vue
Stop trying to go fast.
I'm overwhelmed by the amount of social media toxic-productivity posts, do web fast, do designs fast, etc.
STOP, enjoy the process, and focus on quality.
The only thing that should be fast should be your build tools.
Peace ✌️
OMG is finally here!!!!!!!! 🔥🎉 Also special thanks to
@yaeeelglx
and
@nuxtlabs
team for your continuous support.
If you want to check the Nuxt magic stones scene, it is live here 😊
We're happy to finally announce the official Nuxt Module for TresJS 🎉🥳
Special thanks to
@danielcroe
and
@nuxt_js
team for making it possible
😊 Now you can enjoy the Nuxt DX Magic on the Tres ecosystem 🧙♀️
Official announcement
#Do3DwithNuxt
Overall I think we are aiming AI in the wrong way, I want AI to automate boring tasks like doing laundry or washing dishes so I can do the ones I love: like coding or 3d modeling, not automating these so I end up sending my time doing laundry and washing dishes 😒
This is what I call: the
@ViteConf
effect 😂📈
But seriously, showcasing
@tresjs_dev
in such an amazing event meant a huge increase in npm downloads🚀. For a small team like ours, this is more than important
Now, more devs know that they can create 3D experiences with Vue
Happy Halloween 🎃!!
To celebrate I created this little Pumpkin Ivysaur in blender. This is by far the best character I have modeled
- Learned how to sculpting and how it improves modelling workflow
- Hand draw textures using my Wacom tablet.
#Blender3d
#b3d
#Halloween
OMG This made my entire year! 😍 Someone made a small game with my library Tres!!!
I can't describe the feeling 🥹. Thank you
@enpitsulin
This is what I dreamt of when I started Tres 😭
The first game ever done with TresJS is here!!! 🥳
The Aviator - by
@enpitsulin
Inspired by "The Making of 'The Aviator': Animating a Basic 3D Scene with Three.js", by
@yakudoo
tutorial
Amazing work!! Give it some love 🧡
#Do3DWithVue
Friday update on TresJS Devtools
@tresjs_dev
Managed to make the scene graph editable yesterday night. 😊
This is the DX I was dreaming of 3D on the browser.
@webfansplz
Nuxt + Pinia 🍍 question.
I'm using `useFetch` inside the store but, should I be using `$fetch` here in the actions instead followed by a:
await useAsyncData('campaigns', () => fetchCampaigns())
in my component template?
I'm having the best time building this realistic 3D Kitchen planner with
@tresjs_dev
and
@storyblok
.
The editor uploads the PBR Materials to the DAM and they become available on the client interface.
If you want to get started with 3D on
@vuejs
come to my workshop later today
When you have depression, normal days become "hard mode" and you just want to sleep. Even the smallest tasks, such as taking a call or preparing a coffee gain some weight.
Today is one of those days. 😕. But it's OK, tomorrow will be better, so much to be grateful for. 😊
Do you want to start your journey in 3D and your favorite framework is
@vuejs
?
This is the first video of a series covering the basics of
@tresjs_dev
TresJS v2 - First steps with 3D on Vue 🪐.
Enjoy!
▶️ Today at 2:30pm CET ( 1:30pm BST) I'm gonna be a guest at
@danielcroe
Twitch channel where we are going to build:
The
@nuxt_js
module for
@tresjs_dev
from scratch 🤯.
Make sure you join us! 😊
Yesterday I was honored to participate in
@danielcroe
stream to build the
@nuxt_js
module for
@tresjs_dev
live.
Nuxt proved to be so versatile, that the integration was seamless, 2 hours later we had an almost-ready module 🤯
Ready to use 3D in Nuxt
Come join us at the
@storyblok
spot at
@JSworldconf
@vuejsamsterdam
and take a picture with us.
For every photo, a developer gets his/her ticket pass through QA without bugs 😜
OK, this is just amazing 😱. Testing TresJS in the browser with
@vitest_dev
thanks to
@userquin
@asleMammadam
@_jessicasachs
Not in my wildest dreams I thought I would be able to test TresJS this way, is just 🤯.
I love the community.
I'm really happy to announce that I'm going to give a talk about
@tresjs_dev
at
@ViteConf
2023!
The speaker list is wild 🔥. I am truly honored to have a spot between all those legends. 🥹
Get yours! The Vue community will not miss it!
What if I told you that you can create 3D scenes like this using Vue Components and composition API?
And it's automatically updated with the latest
@threejs
versions, no need to update🤔
Are you interested?
This was the initial Roadmap I presented for TresJS at the WeReDevs
@vuejs
day.
A lot of you are requesting Nuxt support, should we prioritize it for Q1? Vote with 💚
We would need help with the HMR disposal if someone feels up to the challenge. 🤓
I made a really simple & opinionated Vue3 template +
#Vite
Starter template with a lot of cool stuff out of the box 🔥:
- 💨
#WindiCSS
- 📦 Components auto importing
- 👩🎨 i18n out of the box
- 🔝 Easy to use SVG icons
- Routing with Vue Router 4
@agenersurrell
Curioso. Mi compañía es 100% remota.
- Alta identificación con la cultura de la empresa.
- Producto con 582% ROI
- Trabajo flexible y por objetivos.
- Producto innovador
- Empleados con balance trabajo-personal saludable.
- Rotación mínima.
Dejad de justificar lo insostenible.
I'm so excited to announce that I will be talking about TresJS at VueJS Live in London 🔥🤩.
Let's bring the magic of
@threejs
to Vue.
There is gonna be a huge surprise live that day so stay tuned.
Are you ready to add a new dimension to your
#VueJS
Apps?😎
Discover TresJS, a declarative way of creating 3D scenes from Vue components, at the
#VueJSLive
.
@alvarosabu
, Author of TresJS and Creative Engineer, will talk about it at the conference.
Save the date 🗓 May 12 & 15
I'm thrilled to announce my very first course as
@eggheadio
instructor🥚🎉
"Create Interactive 3D Experiences with TresJS
@tresjs_dev
" 🪐
Learn how to create a fully functional 3D Product Configurator with
@vuejs
and
@threejs
using the Tres ecosystem.
Ohh so excited!!!
🚨 New Course! 🚨
Struggling to bring 3D into your Vue projects? Three.js too complex and time-consuming?
Introducing "Create Interactive 3D Experiences with TresJS" by
@alvarosabu
, the author of
@tresjs_dev
! 🎉
Check it out 👇
Is there any animator available in my network that could help me with a simple animation?
The assets are already created just need the animations, Obviously paid for.
DM me and share with your friends
Going back home after an amazing
@vuejsamsterdam
with
@storyblok
I was able to see a lot of friends again, enjoy amazing talks, and meet a lot of new awesome people.
I couldn't be happier.
Performance update 📈🪄
Before:
300 models grass => ~100 - 125 FPS
1000 models grass => ~50FPS
NOW
On video is 1800 models grass => stable 130FPS
I tried adding 3000 models and it was still stable at 130FPS 🤯🤯🤯
(Now I'm using InstancedMesh)
Thanks for your help
@alvarosabu
Update on the
@tresjs_dev
vue chrome devtools plugin.
- Now there is visual feedback when objects get inspected (highlight)
- Memory allocation was added to the scene graph
- You can edit the object properties directly 😛
Happy Christmas 🎄
@vuejs
community.
So, I did a thing.
Official
@tresjs_dev
plugin for
@vuejs
chrome devtools coming soon.
It was about time. Dunno why I was so scared to try it, the API for plugin authors is fantastic.
This is a real-world use case of how to use
@tresjs_dev
to create a landing page featuring Product staging, allowing the end user to customize it.
This example is using
@nuxt_js
and the latest version of Tres.
You can check it out here
#Do3DwithVue