# How to add image texture to no texture model

**URL:** <https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756>\
**Category:** CesiumJS\
**Created:** [May 22, 2021, 9:13am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756 "2021-05-22T09:13:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lishulincug](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lishulincug/32/4394_2.png) [@lishulincug](https://community.cesium.com/u/lishulincug)\
**Post date:** [May 22, 2021, 9:13am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/1 "2021-05-22T09:13:14Z")

</div>

How to add image texture to no texture model?

like this,but Don’t work :  
var viewer =initCesium.initViewer(‘cesiumContainer’);  
var scene = viewer.scene;

```
var imagePath = '../data/models/CesiumBalloon/CesiumBalloonPrint_singleDot.png';
var model = createModel('../data/models/ShadowTester/Shadow_Tester_4.gltf');

```

function createModel(url) {  
var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0);  
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0));

```
    var model = scene.primitives.add(Cesium.Model.fromGltf({
        url : url,
        modelMatrix : modelMatrix,
        minimumPixelSize : 128,
        incrementallyLoadTextures : false
    }));

    model.readyPromise.then(function(model) {
        var camera = viewer.camera;

        // Zoom to model
        var controller = scene.screenSpaceCameraController;
        var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.5;

        var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
        var heading = Cesium.Math.toRadians(230.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
    }).otherwise(function(error){
        window.alert(error);
    });

    return model;
}

```

// Alernate approach - but requires fix in DelayLoadedTextureUniform to return this.\_textures[this.\_textureId] instead of this.\_value  
model.readyPromise.then(function() {  
var textureIndexToReplace = 0;  
var textures = model.\_rendererResources.textures;  
var oldTexture = textures[textureIndexToReplace];  
// model.color = Cesium.Color.RED;  
// saveJSON(model)  
Cesium.Resource.fetchImage({  
url : imagePath  
}).then(function(image) {  
image.width = oldTexture.width  
image.height = oldTexture.height  
var newTexture = new Cesium.Texture({  
context : viewer.scene.frameState.context,  
source : image  
});

```
        // oldTexture.destroy();
        textures[textureIndexToReplace] = newTexture;
        newTexture.copyFrom(image);
        newTexture.generateMipmap();
    });
});

```

![image](https://global.discourse-cdn.com/cesium/original/2X/4/4312c2e913529bf484e26dc6ab71280daeab4b23.png)

![image](https://global.discourse-cdn.com/cesium/original/2X/3/31353ee518946926dff4bdb32a2bd07d8a6d5f7f.png)

[Shadow\_Tester\_4.gltf](https://community.cesium.com/uploads/short-url/yOcnmG0nTOH0ItpTsGkf6nujVoY.gltf) (115.4 KB)

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 16, 2021, 6:58pm UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/2 "2021-07-16T18:58:51Z")

</div>

Hi @lishulincug ! Apologies for the delayed response.

I’ve having some problems loading your glTF. Specifically, it’s giving me some errors when I load it into the [official glTF validator](http://github.khronos.org/glTF-Validator/):

```auto
{
    "uri": "Shadow_Tester_4.gltf",
    "mimeType": "model/gltf+json",
    "validatorVersion": "2.0.0-dev.3.4",
    "validatedAt": "2021-07-16T18:41:11.646Z",
    "issues": {
        "numErrors": 1,
        "numWarnings": 5,
        "numInfos": 0,
        "numHints": 0,
        "messages": [
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/programs"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/shaders"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/techniques"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/asset/premultipliedAlpha"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/asset/profile"
            },
            {
                "code": "UNKNOWN_ASSET_MAJOR_VERSION",
                "message": "Unknown glTF major asset version: 1.",
                "severity": 0,
                "pointer": "/asset/version"
            }
        ],
        "truncated": false
    }
}

```

In addition, when I upload it to [BabylonJS’s online model viewer](https://sandbox.babylonjs.com/), there is no shading on the model.

 ![image](https://global.discourse-cdn.com/cesium/original/2X/7/7be99f1c88e1a5778a215e5da7a7f79e473da0f9.jpeg)

How did you create this glTF? And can you confirm that you created it with UV coordinates?

---

<div class="post-metadata">

**Author:** ![lishulincug](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lishulincug/32/4394_2.png) [@lishulincug](https://community.cesium.com/u/lishulincug)\
**Post date:** [July 20, 2021, 7:13am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/3 "2021-07-20T07:13:10Z")

</div>

It comes from the cesium case SampleData。

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html?src=Shadows.html)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

![image](https://global.discourse-cdn.com/cesium/original/2X/f/fbcc2e55674dbde546064d4fde7d6888b2e757ee.png)

 ![image](https://global.discourse-cdn.com/cesium/original/2X/e/e3171d04a66564f4ba7ce29ab5d152888f394d83.jpeg)

---

<div class="post-metadata">

**Author:** ![lishulincug](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lishulincug/32/4394_2.png) [@lishulincug](https://community.cesium.com/u/lishulincug)\
**Post date:** [July 20, 2021, 7:40am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/4 "2021-07-20T07:40:47Z")

</div>

sorry，the gltf moedl is old SampleData。here is new。  
[Shadow\_Tester\_4.glb](https://community.cesium.com/uploads/short-url/YU3sHTxQGsQPxxihu04AiyzGyL.glb) (128.1 KB)  
the question is model can have a texture map, no not texture images。

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 20, 2021, 5:17pm UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/5 "2021-07-20T17:17:03Z")

</div>

Hi @lishulincug,

Thank you for the update. I viewed this file in the Babylon.js glTF viewer and it said that the model has no UV coordinates.

 ![image](https://global.discourse-cdn.com/cesium/original/2X/1/105040a9f2cb21f915406626d475b8ac7732c394.png)

Unfortunately, models need UV coordinates to display the texture, so if you don’t have UV coordinates you can’t properly sample the texture.

What kind of texture are you trying to apply to this model? If you give me more details, I can try to see if there are any workarounds.

Best regards,  
Janine

---

<div class="post-metadata">

**Author:** ![lishulincug](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lishulincug/32/4394_2.png) [@lishulincug](https://community.cesium.com/u/lishulincug)\
**Post date:** [July 21, 2021, 2:45am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/6 "2021-07-21T02:45:06Z")

</div>

add a image texture to this model。like this：

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=hVZtb9s2EP4rhPch8uBQjuO2W5IGa5Nm69CuRuxtwObCoKWzxYUiNZKy4xX57zu+SJYzD82HQCSfu3vu+NzRc7lhmmw4bEGT10TCltyA4XVJf/N7yUnmlzdKWsYl6JP+5dzbmAwkoEmwpX6JR+GQl2wNE2YLBJwU1lbmIk0Nk3nGjBVAg1OaqTJdMyFA79K3QqmS/lWtTy5Jmp5Qmk5ZWQm4ZZalpcpBmDRQe4sWSsnD1URzaReGyzWaKEsriY7mMk0dHW+OVDINzMJHt0qOR5gWLFfbGRgLOi4WYbUY07VYtukfcznvHfX5u1L5TGGR/NfCfzpf855ztqplZrmSB55qLfrkC1bTulhK8zWXGCxezQ3TFr+YPKcrrcpbWGsAk5yejc7p8NV4/PLs+wEZj+nwxfD81fDlgAzp0IUK3jyrj8xq/rh3OdNMmpXSpaEFsBzLOOE2K+6VEDN1xx8hv9OshCRQGXSF8tMzfILRfMgQ1wfuhsagXiy00rzklm/AUJbnSXTnC+Dz+lHYVeKLMLdYEHJB8P8grLtJXHRTas655GVdTpC5mPJ/AEFno+/iIZdY6xJQ0ULsPiiWz+ARI4BB1IoJAw721DL33ineTr6bIC1ugNoCZNLcXOIB8b5CohnWSrN9d4R19De3aUr+QLUTqwL1jiH2mVauI9oyGSQLclqxDG68m5sWc7k3dPgRHZJvCdahoCV7DLToUtXS3c+0KkAD1XhZtRlEhljn2lisugSm+9HdngONZXRkb7mxTGau5TVGGdIXbTqeOJbTk26u0d/GmJa1sLwSu7e7icIOjaS6F0aO8gz+DoS2l33S73dSj4I9iF1Qq+5xG1WdjM5b/QeDykn1f+Gnow48lgknzMMbmxwhdaB+JteQRDqDEGbgqzVqGgFlRRWqR29RRnsFgdZK96OAtlzi2KEML8DGk2gaK64B1SpD3XDryY058gbhEgcIYVWlFcMET8mytkTD3zV32l5hq+AUuQXBvOihkf2vkrvOd2qMnm3BDV3Y2BV/Hizf55/RDU5ElhO1itANEzV2zVc7pTPUGncyh8eZuodKMC+u4eUzhMHN4HihAdEa9D0YVWt8RGiDaY2UaNJCs30Gx4J99kZYuuA9U0J1BHzjlvT+3W2DMmwDP08//RLb3e1GaEOHrgBv/L17+w7nVvschk3UwGFZ/Hk7QHBAuTXd8tw/oPuUwtYhqgC+LuwhLOw1OFcWVOy+LB35xs2kDe2aH/eQdPdhxzmBjTC1qC8aEYPGIuTeZNnstmKN867DLsf3VKtd0vTY3H7lngLlaN4a7beQUrW7Q8HFQh6DrDEL7d5XXpWsamN7mvivN+hdGbsTcD2XxP/9wMtKaevenASfdQv4rKO9SZd19gCWZsY42wD+xiollljn+MvmFDvP4pv+pQEQknODDnYXZClU9tBaPoWPq7Qb/SrnG8Lz1/Pes19f8x7JBDMGT1a18C/bvHd9lSL+P6ZC+Tn0aQMa4zpYcXb9IWxSSq9SXB63jMk88/wv)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 21, 2021, 2:24pm UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/7 "2021-07-21T14:24:20Z")

</div>

Hi @lishulincug,

I see. The reason the Wood Tower model can be textured is because it has a set of UVs, whereas the Shadow Tester model does not. You will need to find another model has UVs to texture it.

Best regards,  
Janine

---

<div class="post-metadata">

**Author:** ![lishulincug](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/lishulincug/32/4394_2.png) [@lishulincug](https://community.cesium.com/u/lishulincug)\
**Post date:** [September 28, 2021, 7:29am UTC](https://community.cesium.com/t/how-to-add-image-texture-to-no-texture-model/13756/8 "2021-09-28T07:29:10Z")

</div>

Can I add a set of UVs to the Wood Tower model ?
