sidebar: false

Announcing v2.1.0 🎉

We are excited to announce the release of TresJS v2.1.0 🎉 . First release since we open source the project an recieveing such a warm welcome from the vue community. We are so grateful for all the support and feedback we have received so far. More than 225 ⭐️ in the github repo in just 2 weeks! 🤯.

This new version comes with exciting new features and improvements in the ecosystem, let's dive in!

What's hot? 🔥

Export types and better intellisense 🦾

We are now correctly exporting the types from the core package (thanks to @userquin), this means that you can use the types in your project and get better intellisense. Specially if you are using moduleResolution: 'bundler' in your tsconfig.json.

Before 😨

Source

After 🥹

Source

Shoutout to the team behind this amazing tool Are the types wrong, a must-have for every library author.

Inherit types from THREE 🤓

We are now inheriting the types from the three package instead of generating them on build time. That means that you no longer need to wait for a release of TresJS to get the latest types from ThreeJS which follows our goal of always being up to date with the latest ThreeJS features.

::: tip Make sure you have the @types/three package installed in your project. :::

We took serious inspiration from R3F v9 and how they are handling the types, so thanks to @CodyJasonBennett from the Pmndrs team for pointing me in the right direction.

type ThreeExports = typeof THREE
type ThreeInstancesImpl = {
  [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation
    ? ThreeElement<ThreeExports[K]>
    : never
}

export interface ThreeInstances extends ThreeInstancesImpl {
  primitive: Omit<ThreeElement<any>, 'args'> & { object: object }
}

type TresComponents = {
  [K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>
}

declare module 'vue' {
  export type GlobalComponents = TresComponents
}

This is a simplified version of the code, you can check the full implementation here

Why is this so great? For example now you get a better intellisense of the args property for the instance constructor parameters:

Improved HMR

We have improved the HMR experience, now you can update the code without reloading the page. This is a huge improvement for the development experience but still not perfect. For example OrbitControls is not working correctly with HMR, so you will have to reload the page to see the changes.

Updated to Vue 3.3.4

We are now using the latest version of Vue 3.3.4 "Rurouni Kenshin", this means that you get all the latest features and bug fixes from Vue.

Ecossystem updates 🌳

Cientos v2.1.0

We have updated the @tresjs/cientos package to v2.1.0, this version comes with a lot of improvements and new features. Check out the release notes

Enhanced `OrbitControls`

The abstraction for OrbitControls has been improved adding all the properties and methods from the original ThreeJS class such as enableDamping and autoRotate as well as events like change and start.

This was highly requested by the community, so thanks to everyone that contributed to this release.

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera
      :args="[45, 1, 0.1, 1000]"
    />
    <OrbitControls
      enable-damping
      :damping-factor="
        0.1"
      @start="onOrbitControlStart"
    />
  </TresCanvas>
</template>

Welcome `ContactShadows`

We have added support for Contact Shadows. Is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
      <TresMeshNormalMaterial />
    </Box>
    <Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
      <TresMeshNormalMaterial />
    </Icosahedron>
    <ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
    <Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
      <TresMeshBasicMaterial :color="'#ffffff'" />
    </Plane>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

Precipitation abstraction

A new abstraction has arrived, the precipitation component creates an infinite flow of particles, in combination with different props, this allow you to create, rain/snow/hail and many more effect. Unlock your creativity

<template>
  <TresCanvas>
    ...
    <Precipitation :speed="1" :count="2500" :randomness="0.7" />
    ...
  </TresCanvas>
</template>

You can read all the documentation here

Update parallax mouse abstraction

We have added improvements to MouseParallax (previously called PamCameraMouse)

No conflicts with controls
New prop ease factor allows you to add smooth movement
Change to a better name

Improvements in DX

It's also worth mentioning, in cientos we're working hard on improving the developer experience, as we know the details matter, these are some of them:

Update Vue 3.3.4
start of migration to new destructure props
Export types and better intellisense
Refactor folder structure
Creation of feature/bug forms in github for better issues report

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-2-1-0.md 6.7 KB Historique Raw