sidebar: false

Vue Devtools are back on v3.1.0 🎉

We are excited to announce the release of TresJS v3.1.0. This release brings back the support for Vue Devtools, which was broken since v2 🤯 thanks to @enpitsuLin

This is huge for DX since you can now inspect the internal state of the library and the components that are using it. Although, we are still working on improving the experience, so expect more improvements in the future.

What's hot 🔥?

Guess who is back? Back again? Vue Devtools are back 🎶

So since v2, the Vue Devtools were broken whenever <TresCanvas /> was mounted. This is because we were using the custom Renderer API createApp to mount a second App inside the <TresCanvas /> component. This was causing the Vue Devtools to break since it only works with DOM based vue apps (See issue).

Now, we are using the render function from the custom Renderer API to render the <TresCanvas /> component, which means that the Vue Devtools are working again 🎉

const { render } = createRenderer(nodeOps)

const createInternalComponent = (context: TresContext) => {
    return defineComponent({
        setup() {
            provide('useTres', context)
            provide('extend', extend)
            return () => h(Fragment, null, slots?.default ? slots.default() : [])
        }
    })
}

const mountCustomRenderer = (context: TresContext) => {
    const InternalComponent = createInternalComponent(context)
    render(h(InternalComponent), scene.value as unknown as TresObject)
}

mountCustomRenderer(context)

Thanks again to @enpitsuLin for solving this issue 🙏🥹.

Re-instancing of THREE Objects

Another important caveheat of Tres was that it was not possible to reactively change the constructor params of a THREE Object via the props args.

Before 😠

<script lang="ts" setup>
const color = ref('#ffffff')
const intensity = ref(1)

const lightRef = shallowRef<THREE.DirectionalLight>()

watch([color, intensity], ([color, intensity]) => {
    // this will not work
    lightRef.value = new THREE.DirectionalLight(color, intensity)
})
</script>

<template>
    <TresDirectionalLight ref="lightRef" :args=[color, intensity] />
</template>

As you can see, we are trying to re-instance the THREE.DirectionalLight object whenever the color or intensity refs change. So we needed to do it manually by using the watch function and re-assigning the template ref lightRef value.

After 😎

<script lang="ts" setup>
const color = ref('#ffffff')
const intensity = ref(1)
</script>

<template>
    <TresDirectionalLight :args=[color, intensity] />
</template>

Now, we can just pass the color and intensity refs to the args prop and Tres will take care of re-instancing the THREE.DirectionalLight object whenever the refs change 🤭😉.

No more `useLegacyLights` warning

Since threejs v155 update there was pretty annoying warning on the console.

And it's GONEEEEEEE! 🎉🎉🎉

Share your work 🎨

We want to see what you are creating with TresJS, so please share your work with us in our Discord server where we have a #Showcase area or in our Twitter 😊.

Happy coding! 🚀

announcing-v-3-1-0.md 3.7 KB تاريخچه خام