Yo! Welcome to the first edition of The Loop Chronicles, our monthly pass through everything that landed across the TresJS ecosystem. And what a month to kick things off: June 2026 brought physics to the scene graph. Let's dive in 🤿.

Rapier Physics has entered the scene

The big one. We shipped the first alpha of @tresjs/rapier: declarative physics for TresJS, powered by Rapier and its official @dimforge/rapier3d-compat WASM bindings.

No more hand-wiring a physics loop. Wrap your world in a <Physics> provider, drop in some <RigidBody> and let the simulation do the rest:

<script setup lang="ts">
import { Physics, RigidBody } from '@tresjs/rapier'
</script>

<template>
  <TresCanvas>
    <Physics>
      <RigidBody>
        <TresMesh>
          <TresBoxGeometry />
          <TresMeshNormalMaterial />
        </TresMesh>
      </RigidBody>

      <RigidBody type="fixed">
        <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
          <TresPlaneGeometry :args="[10, 10]" />
        </TresMesh>
      </RigidBody>
    </Physics>
  </TresCanvas>
</template>

Here it is in action: a clump of rigid bodies pulled toward a center point, colliding and jostling in real time. Move your mouse around to push them.

What's in the box for 1.0.0-alpha.0:

Huge thanks to Jaime Torrealba and Nathan Mande for pushing this one over the line 🙌.

New features landed in Cientos

Cientos @tresjs/cientos@5.8.1 got a few genuinely fun additions this month.

Decal

Technically this one slipped in on May 28, but it's too good to leave on the cutting-room floor. The new Decal abstraction projects a flat texture onto the surface of a mesh, conforming to its geometry instead of sitting flat like a plane. Stickers, logos, bullet holes, labels: stamp them right onto your models.

<script setup lang="ts">
import { Decal, DecalDebugUI, useGLTF, useTextures } from '@tresjs/cientos'

// A palette of stickers to stamp onto the mesh
const { textures } = useTextures([
  '/decal/tresjs-dark.png',
  '/decal/vue.png',
  '/decal/threejs.png',
])

const { nodes } = useGLTF('/models/Mug.glb', { draco: true })

// Decals serialize to plain JSON via v-model:data
const decals = reactive([
  { id: 'logo', position: [-0.9, 2, 0.4], orientation: [0, -1.1, 0], size: [0.9, 0.2, 1], zIndex: 0, map: 'tresjs-dark.png' },
])

const decalRef = ref()
const session = computed(() => decalRef.value?.editor ?? null)
</script>

<template>
  <!-- Drop-in editor: place, rotate, scale, layer, undo/redo -->
  <DecalDebugUI :session="session" :textures="textures ?? []" :data="{ mug: decals }" />

  <primitive :object="nodes.Mug">
    <Decal ref="decalRef" v-model:data="decals" :map="textures" editable />
  </primitive>
</template>

It does more than stamp-and-forget: multiple decals stack with z-layering, layouts serialize to plain JSON via v-model:data, and an editable mode plus DecalDebugUI give you an in-canvas editor to place and tweak decals by hand (with undo/redo). See the Decal docs for the full editor workflow.

MeshTransmissionMaterial

That gorgeous glass / frosted look, with thickness, roughness and chromatic aberration, is now one component away (#1436).

A sharper Environment

The new quality prop (#1418) lets you serve 2k or 4k preset HDRs depending on how crisp (or how light) you need your reflections. We also fixed Environment url reactivity and cleaned up the docs demo (#1407).

More reliable PointerLockControls

PointerLockControls got its event-listener logic refactored for more dependable lock/unlock handling.

Thanks to Alfarish Fizikri, Jaime Torrealba and everyone who reviewed and tested these.

Everything in sync

To keep the ecosystem aligned, we also rolled out matching releases for the rest of the family:

Updating is the usual one-liner. Bump them together and you're good:

pnpm up @tresjs/core @tresjs/cientos @tresjs/post-processing @tresjs/nuxt

From the community

The best part of any month is seeing what you all ship. Here's a handful of things built with TresJS that caught our eye 👀:

See you next month

Physics is the headline, but it's just the start. The rapier API will keep evolving through alpha, so jump in early, break things, and tell us what hurts. Your feedback shapes where it lands for 1.0.0.

Got something cool built with Tres? Share it in our Discord. It might headline the next Loop Chronicles.

Happy 3D ✌️.