# Die Cidretasse / The cup of cider

**URL:** <https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287>\
**Category:** Resources\
**Tags:** texture, extrude-geometry, lathe-geometery\
**Created:** [March 26, 2024, 8:39pm UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287 "2024-03-26T20:39:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 26, 2024, 8:39pm UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/1 "2024-03-26T20:39:04Z")

</div>

Hi community!  
Here is the result of the coding for one evening 🙂

Video:

Demo: [https://codepen.io/prisoner849/full/poBwLRG](https://codepen.io/prisoner849/full/poBwLRG)

---

<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 26, 2024, 10:06pm UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/2 "2024-03-26T22:06:44Z")

</div>

Good! The bubbles are fun.

Reminds me of [a mug](https://www.youtube.com/watch?v=KJb3U576am4&list=PL66ECD99DD3D06ABA&index=2) I made some 11 years ago with OpenGL.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 26, 2024, 11:40pm UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/3 "2024-03-26T23:40:50Z")

</div>

Since we’re sharing our mugs, here’s mine from ~2015 😃

[https://vectorslave.com/coffeemug/index.html](https://vectorslave.com/coffeemug/index.html)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 27, 2024, 6:43am UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/4 "2024-03-27T06:43:45Z")

</div>

@PavelBoytchev  
This is cool!  
I liked the moment when the handle appears inside 🙂

@manthrax  
Oh, yeah, I recall that I’ve seen that cute mug before. Very nice one 🙂

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [March 28, 2024, 4:36am UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/5 "2024-03-28T04:36:58Z")

</div>

Very nice!  
So you animated the bubbles by using context to redraw the textures with each iteration?  
I have used context to create textures for three.js, but never used it to animate a texture in real time.  
This may be just what I need to add random bits of foam, etc. to my ocean textures.  
Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 28, 2024, 7:03am UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/6 "2024-03-28T07:03:28Z")

</div>

> [@phil\_crowther](#):
>
> So you animated the bubbles by using context to redraw the textures with each iteration?

Yeah, I like to combine 2d and WebGL 🙂  
The same approach here for the display: [Die Digitaluhr / The digital clock](https://discourse.threejs.org/t/die-digitaluhr-the-digital-clock/62748)

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [March 28, 2024, 5:38pm UTC](https://discourse.threejs.org/t/die-cidretasse-the-cup-of-cider/63287/7 "2024-03-28T17:38:56Z")

</div>

I had seen your clock, but didn’t realize you were using context to create the text and numbers. For months, I had been trying to find ways to draw animated labels and numbers locally (using either textures or geometry) and finally figured out how to do so with TextGeometry. (Part of the challenge was that I needed flat one-sided text and numbers that would be readable from both sides.) I had not even considered using context and I don’t think it is mentioned as an option in the three.js documentation. If not, it should be as it is probably the best alternative to TextGeometry. These little tchotchkes are works of art, both on the outside and on the inside. Keep 'em coming!