# How to engrave words(name) into a ring in three js

**URL:** <https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163>\
**Category:** Questions\
**Tags:** textgeometry, geometry\
**Created:** [September 28, 2020, 2:21am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163 "2020-09-28T02:21:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [September 28, 2020, 2:21am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/1 "2020-09-28T02:21:48Z")

</div>

Hello guys,

I need an idea that engrave the words into a geometry, and how to bend the textgeometry as round as rings . Such as we always put our name in the inner ring.

![图片](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/9ef31eeb5a115fc6b50053c9dec03ed98ca6202b.jpeg)

I can only put the textgeometry on a geometry.

There is an [artical](https://developpaper.com/wandering-with-canvas-14-three-js-generation-method-of-concave-relief-model/) talk about it, but Scheme 2 isnt clear for me if it works

Thanks,  
Alan

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [September 28, 2020, 6:33am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/2 "2020-09-28T06:33:15Z")

</div>

Do you want to be able to change the writing at run time? If so, probably the easiest approach is to use a bump map.

First, set up the ring geometry in a modeling program with a test texture (e.g. with the words “A promise is forever”) so the words appear in the correct location in the ring. Then at run time in your app, you can generate a new texture with different words using a [canvas texture](https://threejs.org/examples/#webgl_materials_texture_canvas).

---

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [September 29, 2020, 1:34am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/3 "2020-09-29T01:34:14Z")

</div>

> [@looeee](#):
>
> Do you want to be able to change the writing at run time? If so, probably the easiest approach is to use a bump map.
> 
> First, set up the ring geometry in a modeling program with a test texture (e.g. with the words “A promise is forever”) so the words appear in the correct location in the ring. Then at run time in your app, you can generate a new texture with different words using a [canvas texture](https://threejs.org/examples/#webgl_materials_texture_canvas).

Actually, this is for 3D printer, therefore, texture is not good. I need engraving words on the geometry.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [September 29, 2020, 3:52pm UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/4 "2020-09-29T15:52:35Z")

</div>

If you don’t need to change the text at runtime, then I think you will have an easier time building it in blender first.  
Use the boolean modifer to subtract your text mesh from the ring.  
Then export the model as glb/ply/stl/obj/etc from blender.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/1776678081e1769e456e27e26afc7b0997a77955.jpeg)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [September 30, 2020, 12:52am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/5 "2020-09-30T00:52:37Z")

</div>

If you do need to update the words at runtime, you will probably need to use a CSG library. There are quite a few three.js CSG libraries around, although they are mostly out of date (they only work with Geometry, not BufferGeometry).

You can follow this thread for progress on building BufferGeometry based CSG libraries.

> <https://github.com/mrdoob/three.js/issues/16099>
>
> CSG is a very important feature… other 3D frameworks have support for CSG built-in ( Babylon.js ), the only CSG I...

In particular, I have a port of [evanw/csg.js](https://evanw.github.io/csg.js/) here:

> **[looeee/threejs-csg](https://github.com/looeee/threejs-csg)**
>
> Constructive Solid Geometry for three.js, ES6 + BufferGeometry - looeee/threejs-csg

And [@SebiTimeWaster](https://github.com/SebiTimeWaster) has version based on [jscad/csg.js](https://github.com/jscad/csg.js) here:

> **[SebiTimeWaster/three-csg](https://github.com/SebiTimeWaster/three-csg)**
>
> CSG (Constructive Solid Geometry) library for three.js - SebiTimeWaster/three-csg

I think Sebi’s is faster than mine, I haven’t tested it though.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 3, 2020, 2:56pm UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/6 "2020-10-03T14:56:06Z")

</div>

Realtime circular text engraving in threejs  
Example : [https://cm5lp.sse.codesandbox.io/](https://cm5lp.sse.codesandbox.io/)  
Beware that longer strings take longer to process

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/75c57a89d7dd17a0ce9d678532a27f27bd417558.jpeg)

---

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [October 10, 2020, 1:30am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/8 "2020-10-10T01:30:40Z")

</div>

Thanks, Seanwasere, it is a wonderful example. However, currently, I am using js, not jsm. Could you please provide the source code to me? I want to convert to js project. I tried to save each js from this website but cannot run it locally.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 10, 2020, 7:22am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/9 "2020-10-10T07:22:13Z")

</div>

For subtracting geometries use

> **[Sean-Bradley/THREE-CSGMesh](https://github.com/Sean-Bradley/THREE-CSGMesh)**
>
> Conversion of a CSG library for use with modern THREE.js - Sean-Bradley/THREE-CSGMesh

For bending geometries use

> **[Sean-Bradley/Bender](https://github.com/Sean-Bradley/Bender)**
>
> Bend Geometries in Threejs. Contribute to Sean-Bradley/Bender development by creating an account on GitHub.

Both of the repositories are ES6 modules first, but you can find CommonJS versions of the libs in the `/dist/client/` folders suffixed with `.cjs.js`

Both libs support geometries of type THREE.Geometry and THREE.BufferGeometry

Examples of where I use these libs  
Bender : [https://sbcode.net/threejs/bender/](https://sbcode.net/threejs/bender/)  
Engraving : [https://sbcode.net/threejs/engraving/](https://sbcode.net/threejs/engraving/)  
CSG-gLTF : [https://sbcode.net/threejs/csg-gltf/](https://sbcode.net/threejs/csg-gltf/)

---

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [October 10, 2020, 7:36am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/10 "2020-10-10T07:36:49Z")

</div>

Cool, thanks. I already made it.

However, I am subtracting an stl model and TextGeometry. The process will take different time according to different letters, Such as  
B: 87.037s  
C:117.707 s  
O:116 s  
G:121.36 s  
S:222.64 s  
U:45.45 s  
R:37s  
Others will take a shorter time.

Buy using normal geometries might faster than the stl model.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 10, 2020, 10:03am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/11 "2020-10-10T10:03:12Z")

</div>

The STL will already be a THREE.BufferGeometry after it is loaded if you are using a recent version of Threejs.

You have the option to reduce the amount of curveSegments when you create your text geometry which will make it faster.

How many vertices are in your CSGs will make a significant difference to speed.

---

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [October 10, 2020, 10:13am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/12 "2020-10-10T10:13:16Z")

</div>

Cool, thanks. I set 22 for the curveSegments 😅 😂 I changed to 2, it faster

---

<div class="post-metadata">

**Author:** ![AlanXin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alanxin/32/11380_2.png) [@AlanXin](https://discourse.threejs.org/u/AlanXin)\
**Post date:** [October 13, 2020, 1:39am UTC](https://discourse.threejs.org/t/how-to-engrave-words-name-into-a-ring-in-three-js/19163/13 "2020-10-13T01:39:02Z")

</div>

There is another issue when I do the subtract. All the code is running at the backend, but when the geometries start subtract, nothing on the page can be manipulated.  
Do you know how to fix this issue? It seems the subtract process cost all the cpu/memery/thread.