# What is the best approach for adding text/images to an object

**URL:** <https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997>\
**Category:** Questions\
**Tags:** text, decals, textures\
**Created:** [April 1, 2020, 11:34am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997 "2020-04-01T11:34:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 1, 2020, 11:34am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/1 "2020-04-01T11:34:50Z")

</div>

Hey there.

I’ve got an object on which I’d like to add something like a text or an image.  
For example: An object with a rough-looking material/texture which has a shiny text on it.

I already have an object with a rough-looking material/texture, but what is the best approach to add a shiny text to it? is decalGeometry the best approach?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2020, 12:05pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/2 "2020-04-01T12:05:01Z")

</div>

> [@Kelle](#):
>
> is decalGeometry the best approach?

Depending on your use case `DecalGeometry` is one way to project a text onto an existing surface. However, you need to write the text on a texture (e.g. write the text to a 2D canvas and then use [CanvasTexture](https://threejs.org/docs/index.html#api/en/textures/CanvasTexture)) and then use it as the diffuse map for the decal.

If you need more control over how the text is added to the object, you might want to add the text in a DCC tool like Blender and not at runtime.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 1, 2020, 12:23pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/3 "2020-04-01T12:23:16Z")

</div>

Okay, I’ll give it a try. Thanks!

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 1, 2020, 1:36pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/4 "2020-04-01T13:36:58Z")

</div>

For this example I used a small jpeg (just an image) to project it onto my object but I’m still having trouble.

let decalImage = new THREE.TextureLoader().load(‘Decal/ObjectDecal.jpg’);

```
            let decalMaterial = new THREE.MeshPhongMaterial({
                map: decalImage,
                transparent: true,
                depthTest: true,
                depthWrite: false,
                polygonOffset: true,
                polygonOffsetFactor: -4,
                wireframe: false
            });

            let decalGeometry = new THREE.DecalGeometry(
                myObject,
                new THREE.Euler(0, 20.5, 30),
                new THREE.Euler(0, 0, 0),
                new THREE.Euler(80, 80, 80),
                myObjectMaterial
            );
            decal = new THREE.Mesh(decalGeometry, decalMaterial);

            scene.add(decal);

```

I tried to solve the problem using the three.js-documentation but I’m still having trouble.  
When I try this code there is this error: Cannot read property ‘geometry’ of undefined

Are there some major problems with the code?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2020, 1:48pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/5 "2020-04-01T13:48:06Z")

</div>

> [@Kelle](#):
>
> let decalGeometry = new THREE.DecalGeometry( myObject, new THREE.Euler(0, 20.5, 30), new THREE.Euler(0, 0, 0), new THREE.Euler(80, 80, 80), myObjectMaterial );

You are not creating `DecalGeometry` correctly. As mentioned in the [docs](https://threejs.org/docs/index.html#examples/en/geometries/DecalGeometry), the signature is:

```javascript
constructor( mesh: Mesh, position: Vector3, orientation: Euler, size: Vector3 );

```

You are using this right now:

```javascript
constructor( mesh: Mesh, position: Euler, orientation: Euler, size: Euler, myObjectMaterial: Material );

```

Please try it again with the correct parameterization.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 1, 2020, 2:14pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/6 "2020-04-01T14:14:17Z")

</div>

Thank you for the correction.

Now I used the correct parameterization but there is still the mentioned error.

“DecalGeometry.js:62 Uncaught TypeError: Cannot read property ‘geometry’ of undefined  
at generate (DecalGeometry.js:62)  
at new THREE.DecalGeometry (DecalGeometry.js:43)  
at index.html:267  
at Object.onLoad (HDRCubeTextureLoader.js:104)  
at XMLHttpRequest. (three.min.js:755)”

Any idea what the issue may be?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2020, 3:37pm UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/7 "2020-04-01T15:37:05Z")

</div>

It seems that `myObject` does not have a geometry. Can you please verify if it is actually an instance of `Mesh`.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 7:42am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/8 "2020-04-02T07:42:09Z")

</div>

I loaded my object with the gltf-loader so I did the following:

myObject = gltf.scene;

But I also used it when I traversed:

myObject.traverse(function (child) {  
if (child.isMesh) {  
and then it continous.

does this verify that it is a mesh or is a step missing?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2020, 8:25am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/9 "2020-04-02T08:25:50Z")

</div>

> [@Kelle](#):
>
> does this verify that it is a mesh or is a step missing?

No, this does look correct! Do you mind demonstrating the issue with a live example?

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/hyok6tvj/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

I’m not sure how to help further without debugging.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 9:01am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/10 "2020-04-02T09:01:31Z")

</div>

It’s hard because the project is a little bit bigger and complex with its paths.

I’m creating my decal components within my gltf-loader-function. May that be a problem?  
I thought this would be an easy way to access myObject.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 9:09am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/11 "2020-04-02T09:09:19Z")

</div>

It’s mentioned in the docs as “geo = new DecalGeometry” but “geo = new THREE.DecalGeometry” is the right way i guess?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2020, 9:13am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/12 "2020-04-02T09:13:38Z")

</div>

That depends how you import `DecalGeometry`. When using ES6 imports (recommended), the usage of the `THREE` namespace is not necessary.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 9:17am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/13 "2020-04-02T09:17:26Z")

</div>

I assume ES6 imports are the ones that are used in the three.js examples, right ?  
With the module

---

<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:** [April 2, 2020, 9:44am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/14 "2020-04-02T09:44:48Z")

</div>

Here is an alternative example of using the DecalGeometry.  
[https://sbcode.net/extra\_html/game.html](https://sbcode.net/extra_html/game.html)

View the source. Line 78 in the debugger

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/ae2130bdf1685a04273ed74cb15376a76bd1648f.png)

This code uses ES6 imports

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2020, 9:53am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/15 "2020-04-02T09:53:14Z")

</div>

> [@Kelle](#):
>
> I assume ES6 imports are the ones that are used in the three.js examples, right ?

Correct 👍. If you are going to implement a real app, I suggest you import the modules from the official npm package and then perform a build (e.g. with rollup) to produce your final app bundle. There are several starter projects that simplify the respective setup. E.g. [Module Import / Usage - #26 by seanwasere](https://discourse.threejs.org/t/module-import-usage/11574/26)

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 9:55am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/16 "2020-04-02T09:55:01Z")

</div>

Thank you, I’ll give this a try, too.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 9:59am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/17 "2020-04-02T09:59:01Z")

</div>

This sounds good so far.  
It may be a pretty rough question -\> But what are the main advantages using modules?  
I’m not quite sure if I need them, and it sounds a little confusing too.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 10:16am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/18 "2020-04-02T10:16:13Z")

</div>

Unfortunately there is still the problem with my “myObject”.  
“Cannot read property ‘isGeometry’ of undefined”

Pretty hard to tell what the problem is.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2020, 10:26am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/19 "2020-04-02T10:26:46Z")

</div>

> [@Kelle](#):
>
> But what are the main advantages using modules?

There are many existing resources answering this question. E.g.

> **[Understanding ES6 Modules — SitePoint](https://www.sitepoint.com/understanding-es6-modules/)**
>
> Craig Buckler introduces ES6 modules, showing how they can be used today with the help of a transpiler.

The following resource provides a more in-depth explanation and is a must for all JS developers:

[https://exploringjs.com/es6/ch\_modules.html](https://exploringjs.com/es6/ch_modules.html)

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [April 2, 2020, 10:30am UTC](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997/20 "2020-04-02T10:30:04Z")

</div>

Thanks! I’ll have a look.

[Next page](https://discourse.threejs.org/t/what-is-the-best-approach-for-adding-text-images-to-an-object/13997.md?page=2)