# 35 Examples of 2D interactivity in 3D

**URL:** <https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277>\
**Category:** Showcase\
**Tags:** canvas-texture, vr, zimjs, textureactive, 2d\
**Created:** [June 1, 2024, 6:53am UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277 "2024-06-01T06:53:32Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 1, 2024, 6:53am UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/1 "2024-06-01T06:53:32Z")

</div>

TextureActive Studio is now complete and demonstrates 35 examples of 2D interactivity on 3D surface using ZIM TextureActive in three.js. [TextureActive Studio - 2D Interactivity in 3D with ZIM in three.js](https://zimjs.com/studio)

 ![texture_active_studio_s](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/e/0e858e2dc1107997a62e7ab5a54dd7dd3d32bf2d.jpeg)

More information can be found at [ZIM TextureActives for Interactive Textures](https://discourse.threejs.org/t/zim-textureactives-for-interactive-textures/55746) and for VR at [ZIM TextureActives for VR](https://discourse.threejs.org/t/zim-textureactives-for-vr/56338)

---

<div class="post-metadata">

**Author:** ![Karel\_Rosseel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/karel_rosseel/32/35297_2.png) [@Karel\_Rosseel](https://discourse.threejs.org/u/Karel_Rosseel)\
**Post date:** [June 1, 2024, 4:28pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/2 "2024-06-01T16:28:19Z")

</div>

so cool… check out my project with vr here

> **[Wandel rond in het VTI Veurne](https://zimjs.com/zapp/E_V9WMK)**
>
> Mijn vroegere school, waar ik veel aan te danken heb!
> Het vtiveurne.be is technologisch, innovatief en zet in op de creativiteit van de leerlingen. Alles met hoogtechnologische apparatuur en software! #zimjs

and

> **[Walk into 3D+VR website of WiWeTeR.be](https://zimjs.com/zapp/E_6WF48)**
>
> Walk around into the website www.WiWeTeR.be in 3D!
> Interactive panels are visible, touch and slide the sliders!P
> =\> Pause with \[space\] start walking again by clicking \[space\]
> =\> navigate the mouse to the left or right to turn into the...

and

> **[VUB Brussels with VR videos](https://zimjs.com/zapp/E_4FTVX)**
>
> VR VUB Brussels with VR videos to click on! #zimjs

and fly above Belgium

> **[VR België , vlieg over Belgie en de verschillende provincies](https://zimjs.com/zapp/E_9BTB7)**
>
> Ga naar voor, onder en boven en vlieg over België, alle provincies kan je met een afbeelding zien en aanklikken. Ook een video over Nederland en Wetenschap zijn aanklikbaar. #zimjs

Thanks @danzen to make ZIM 2D to 3D VR possible!  
Greetings from Belgium/Flanders !

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 2, 2024, 12:33am UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/3 "2024-06-02T00:33:04Z")

</div>

https://www.tiktok.com/embed/v2/7369436492059512070

[![Z_29J9X](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/f/afc4afc88b54f4d64b806ca0d6a4aa3437888527.jpeg)](https://zimjs.com/studio/pen)

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 2, 2024, 9:03pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/4 "2024-06-02T21:03:10Z")

</div>

https://www.tiktok.com/embed/v2/7369436498703207685

Here we control 3D objects with a 2D Stepper in a ZIM TextureActive.

> **[Stepper - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/stepper.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 3, 2024, 7:25pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/5 "2024-06-03T19:25:28Z")

</div>

https://www.tiktok.com/embed/v2/7375618857517534470

[![Z_X7D9D](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/c/cc99b911ba9658e2de2453a70042a516e89b98ff.jpeg)](https://zimjs.com/studio/emitter.html)

> **[Emitter - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/emitter.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 6, 2024, 7:05pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/6 "2024-06-06T19:05:44Z")

</div>

https://www.tiktok.com/embed/v2/7375618857178008838

2D D-Pad to control 3D objects

> **[D-Pad - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/dpad.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 9, 2024, 2:40am UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/7 "2024-06-09T02:40:04Z")

</div>

https://www.tiktok.com/embed/v2/7375618851922267398

A Carousel - could come in handy. I know in Altspace, we put pics on the walls… would have been handy to have a user controlled carousel.

[![Z_F97YC](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/6/26b1dac1401c6f145ba1deade81140549b72c80d.jpeg)](https://zimjs.com/studio/carousel.html)

> **[Carousel - ZIM Texture Active Studio - 2D interactivity in 3D three.js with...](https://zimjs.com/studio/carousel.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 10, 2024, 4:53pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/8 "2024-06-10T16:53:39Z")

</div>

https://www.tiktok.com/embed/v2/7375618847862263045

Forms on three.js texture… handy!

[![Z_MUR94](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/f/cfd6bde90e25253df7e7482696a0b40da918f7b7.jpeg)](https://zimjs.com/studio/forms.html)

> **[Forms - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/forms.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 11, 2024, 7:47pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/9 "2024-06-11T19:47:50Z")

</div>

https://www.tiktok.com/embed/v2/7375618852006137093

Here is an indicator that can be used to capture a review, or indicate what level or page the user is on, etc.

[![Z_XVBZS](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/6/a694f12f3e95048752308398e1a606ce336761fd.jpeg)](https://zimjs.com/studio/indicator.html)

> **[Indicator - ZIM Texture Active Studio - 2D interactivity in 3D three.js with...](https://zimjs.com/studio/indicator.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 13, 2024, 5:41pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/10 "2024-06-13T17:41:24Z")

</div>

https://www.tiktok.com/embed/v2/7375618851976891653

Here is an interactive book on a 2D surface in 3D - the content of the pages can be interactive too! Set the radius parameter to limit the page interactivity to the corner area.

[![Z_P2NB4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/76e61bd8a96e3f8f0b83de36de751ce4c4d477bf.jpeg)](https://zimjs.com/studio/book.html)

> **[Book - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/book.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 15, 2024, 2:31pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/11 "2024-06-15T14:31:56Z")

</div>

https://www.tiktok.com/embed/v2/7375618849309297926

2D Sprites on a wall! Or on any surface in 3D!

[![Z_UU4PS](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/3/13f909c3e0b4dcbd3ba8ad0162fc07f05de32e7a.jpeg)](https://zimjs.com/studio/sprites.html)

> **[Sprites - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/sprites.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 17, 2024, 1:52pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/12 "2024-06-17T13:52:46Z")

</div>

[![](https://img.youtube.com/vi/MA02NZC_5gw/maxresdefault.jpg "Use a 2D Tile in 3D - #threejs #ZIMjs #TextureActive #3D #VR #virtualreality #tile") ](https://www.youtube.com/watch?v=MA02NZC_5gw)

Here we show a Tile and then animate the tile based on cursor over.

[![Z_2GRZ8](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/2/f234939b3cdc30c9ab6158c19db1c433f49022b2.jpeg)](https://zimjs.com/studio/tile.html)

> **[Tile - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/tile.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 18, 2024, 6:22pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/13 "2024-06-18T18:22:20Z")

</div>

[![](https://img.youtube.com/vi/Bxob97rQGmo/maxresdefault.jpg "Use 2D Beads in 3D - #threejs #ZIMjs #TextureActive #3D #VR #virtualreality #beads") ](https://www.youtube.com/watch?v=Bxob97rQGmo)

Example of using ZIM Beads which lets you distribute objects on a Blob or Squiggle path. We made the path move based on the controller.

[![Z_H7994](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/002fc47901dbeddba7a77d95e2780523cf5de7c0.jpeg)](https://zimjs.com/studio/beads.html)

> **[Beads - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/beads.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 20, 2024, 1:40pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/14 "2024-06-20T13:40:21Z")

</div>

[![](https://img.youtube.com/vi/Jp9OPDmHWug/maxresdefault.jpg "Drag any 2D object on 3D surfaces in #threejs with #ZIMjs #TextureActive #3D #VR #virtualreality") ](https://www.youtube.com/watch?v=Jp9OPDmHWug)

[![Z_GNQX9](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/d/ed7ba4f5ad72e1354a80c8a0426c4ef2884b3153.jpeg)](https://zimjs.com/studio/drag.html)

> **[Drag - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/drag.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

There is also draw along a path - see the next YouTube short after the one posted.

[![Z_JCPGM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/b/fbca55384f8c342d88ab1872a431e80b7c2b4d04.jpeg)](https://zimjs.com/studio/path.html)

> **[Drag on Path - ZIM Texture Active Studio - 2D interactivity in 3D three.js...](https://zimjs.com/studio/path.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 22, 2024, 6:16pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/15 "2024-06-22T18:16:29Z")

</div>

[![](https://img.youtube.com/vi/F3AjpOlhUrc/maxresdefault.jpg "Use a 2D ColorPicker on 3D surfaces in #threejs with #ZIMjs #TextureActive #3D #VR #virtualreality") ](https://www.youtube.com/watch?v=F3AjpOlhUrc)

Here is a ColorPicker we have made in 2D that can control various three.js objects.

[![Z_XSB3S](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/2/02d4d188d02e3cdd15d5cf4c230810930ccb233f.jpeg)](https://zimjs.com/studio/colorpicker.html)

> **[Color Picker - ZIM Texture Active Studio - 2D interactivity in 3D three.js...](https://zimjs.com/studio/colorpicker.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [June 25, 2024, 1:39pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/16 "2024-06-25T13:39:29Z")

</div>

[![](https://img.youtube.com/vi/pxym397uvPM/maxresdefault.jpg "Use 2D Connectors in 3D - #threejs #ZIMjs #TextureActive #3D #VR #virtualreality #connectors") ](https://www.youtube.com/watch?v=pxym397uvPM)

Connectors!

[![Z_BZW3B](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/2/e2eacd8446614de3a856d1f03c3afc96f246fa89.jpeg)](https://zimjs.com/studio/connectors.html)

> **[Connectors - ZIM Texture Active Studio - 2D interactivity in 3D three.js with...](https://zimjs.com/studio/connectors.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [July 2, 2024, 12:59pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/17 "2024-07-02T12:59:04Z")

</div>

[![](https://img.youtube.com/vi/SQSZeIz89_M/maxresdefault.jpg "Use a Stepper on 3D surfaces in #threejs with #ZIMjs #TextureActive #3D #VR #virtualreality") ](https://www.youtube.com/watch?v=SQSZeIz89_M)

Using a stepper to control 3D objects… again… this stepper or any of the other components can be put on a 3D surface and used to control other 3D elements. This gives an alternative to a HUD or DatGui. ZIM can also do a HUD as shown here: [ZIM 015 - TextureActive HUD - Code Creativity](https://zimjs.com/015/textureactive_hud.html)

> **[Stepper - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/stepper.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

[![Z_KHTPU](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/9/39823645c6446231c01fae26031a23453ccfd890.jpeg)](https://zimjs.com/studio/stepper.html)

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [July 4, 2024, 12:58pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/18 "2024-07-04T12:58:26Z")

</div>

[![](https://img.youtube.com/vi/g57Cotgh1Kk/maxresdefault.jpg "Use a 2D Pack in 3D - #threejs #ZIMjs #TextureActive #3D #VR #virtualreality #pack") ](https://www.youtube.com/watch?v=g57Cotgh1Kk)

Here we pack images onto a 3D surface - they are can be interactive to re-order them (optional).

> **[Pack Pictures - ZIM Texture Active Studio - 2D interactivity in 3D three.js...](https://zimjs.com/studio/pack.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR

[![Z_V33XQ](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bbfbeb910b38364074ad6e764bb907dbd4b93724.jpeg)](https://zimjs.com/studio/pack.html)

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [July 13, 2024, 5:55pm UTC](https://discourse.threejs.org/t/35-examples-of-2d-interactivity-in-3d/66277/19 "2024-07-13T17:55:08Z")

</div>

[![](https://img.youtube.com/vi/D-wqMvhzVMw/maxresdefault.jpg "Use a 2D Flipper in 3D - #threejs #ZIMjs #TextureActive #3D #VR #virtualreality #flipper") ](https://www.youtube.com/watch?v=D-wqMvhzVMw)

Here we use a 2D Flipper to flip a card - perhaps an odd thing to do but if you had a card game or a memory puzzle in 3D or VR, maybe it would be easier to set it on a table or a screen. We have done several flipping games [ZIM Matching Game](https://zimjs.com/elearning/match.html) and [Secret Letters - ZIM - Code Creativity](https://zimjs.com/sl) are a couple examples.

[![Z_2NRPF](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/8/48edf43be328fa65859e9aec3521025cac98c10b.jpeg)](https://zimjs.com/studio/flipper.html)

> **[Flipper - ZIM Texture Active Studio - 2D interactivity in 3D three.js with ZIMjs](https://zimjs.com/studio/flipper.html)**
>
> Examples of how to add dozens of 2D interactions to any surface in 3D three.js and VR