# Interactive 3D Scene Built with Three.js WebGPU and TSL

**URL:** <https://discourse.threejs.org/t/interactive-3d-scene-built-with-three-js-webgpu-and-tsl/90492>\
**Category:** Showcase\
**Tags:** shaders\
**Created:** [March 21, 2026, 6:50am UTC](https://discourse.threejs.org/t/interactive-3d-scene-built-with-three-js-webgpu-and-tsl/90492 "2026-03-21T06:50:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![yomero243](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yomero243/32/45872_2.png) [@yomero243](https://discourse.threejs.org/u/yomero243)\
**Post date:** [March 21, 2026, 6:50am UTC](https://discourse.threejs.org/t/interactive-3d-scene-built-with-three-js-webgpu-and-tsl/90492/1 "2026-03-21T06:50:28Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/f/8f597e923ce9447a0d5fd330f17cf4c2bddfc88c.jpeg)

A real-time interactive 3D scene built entirely on the new Three.js WebGPU renderer and TSL (Three Shading Language). 4,000 particles orbit a glowing cube driven by custom physics — magnetic forces, cursor attraction, and orbital velocity constraints. A single guide particle follows your mouse in world space, pulling the swarm with it. All shading is written in TSL: additive glow, radial falloff, pulsing emission, and per-instance color snapshots at birth. No postprocessing — just raw WebGPU.

Stack: React 19 · React Three Fiber · Three.js r183 · WebGPU · TSL · Zustand · Vite 8

If you know of anything else that would be cool to implement, like a portfolio or something else I can learn by doing, please leave it below.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 23, 2026, 11:35am UTC](https://discourse.threejs.org/t/interactive-3d-scene-built-with-three-js-webgpu-and-tsl/90492/2 "2026-03-23T11:35:23Z")

</div>

> [@yomero243](#):
>
> If you know of anything else that would be cool to implement

Turn the particles from dots into flames or smoke:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/674a9be84fe45eb4fa7fbd85e04818be04fedf0e.jpeg)

---

<div class="post-metadata">

**Author:** ![yomero243](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yomero243/32/45872_2.png) [@yomero243](https://discourse.threejs.org/u/yomero243)\
**Post date:** [March 23, 2026, 2:34pm UTC](https://discourse.threejs.org/t/interactive-3d-scene-built-with-three-js-webgpu-and-tsl/90492/3 "2026-03-23T14:34:22Z")

</div>

Good idea I’ll do it, I was also thinking of trying with DeviceOrientation API to see if I could make it even more interesting