# Changing faceUV after Instantiating

**URL:** <https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525>\
**Category:** Questions\
**Created:** [January 2, 2019, 5:28pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525 "2019-01-02T17:28:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 5:28pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/1 "2019-01-02T17:28:09Z")

</div>

Hey everyone happy new year!

I was wondering, is there a way to change the faceUV of a mesh, specifically a box styled mesh, after it has been created?  
Heres what i tried to do:  
[https://www.babylonjs-playground.com/#20OAV9#443](https://www.babylonjs-playground.com/#20OAV9#443)

However that doesnt seem to work, is there a way to do this, or will i need to create a new box all together?

Any ideas?

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [January 2, 2019, 5:53pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/2 "2019-01-02T17:53:12Z")

</div>

Actually, I had never heard of a faceUV property before. Looks like this is just an option of the MeshBuilder object. UV’s are usually 2 values per vertex, not 4.

MeshBuilder must eventually create a UV vertex buffer. Once created you will need to update the vertex buffer directly. Add an initial value for FaceUV’s, and also add the MeshBuilder option updateable, setting it to true.

Then get the vertexBuffer:

```javascript
let buffer = box2.getVertexData(BABYLON.VertexBuffer.UVKind);

```

change buffer, then

```javascript
box.updateVerticesData(BABYLON.VertexBuffer.UVKind, buffer);

```

Or you could just skip it during creation, like you did, then do something like:

```javascript
let buffer = new float32Array({1,2, 1,2 1,2});
box.setVerticesData(BABYLON.VertexBuffer.UVKind, buffer);

```

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 6:36pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/3 "2019-01-02T18:36:33Z")

</div>

> [@JCPalmer](#):
>
> Actually, I had never heard of a faceUV property before. Looks like this is just an option of the MeshBuilder object. UV’s are usually 2 values per vertex, not 4.
> 
> MeshBuilder must eventually create a UV vertex buffer. Once created you will need to update the vertex buffer directly. Add an initial value for FaceUV’s, and also add the MeshBuilder option updateable, setting it to true.
> 
> Then get the vertexBuffer:
> 
> Copy to clipboard
> 
> ```auto
> let buffer = box2.getVertexData(BABYLON.VertexBuffer.UVKind);
> 
> ```
> 
> change buffer, then
> 
> Copy to clipboard
> 
> ```auto
> box.updateVerticesData(BABYLON.VertexBuffer.UVKind, buffer);
> 
> ```
> 
> Or you could just skip it during creation, like you did, then do something like:
> 
> Copy to clipboard
> 
> ```auto
> let buffer = new float32Array({1,2, 1,2 1,2});
> box.setVerticesData(BABYLON.VertexBuffer.UVKind, buffer);
> 
> ```

This seems like it will work however, im still having trouble getting it working. Heres what i have:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#20OAV9%23444)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I get an error when trying to use the box2.updateVerticesData(BABYLON.VertexBuffer.UVKind, buffer);  
it says:

“Argument of type ‘VertexBuffer’ is not assignable to parameter of type ‘FloatArray’.  
Type ‘VertexBuffer’ is missing the following properties from type ‘Float32Array’: BYTES\_PER\_ELEMENT, buffer, byteLength, copyWithin, and 23 more.ts(2345)”

Any ideas?

---

<div class="post-metadata">

**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\
**Post date:** [January 2, 2019, 6:46pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/4 "2019-01-02T18:46:10Z")

</div>

faceUV is a parameter to allow the user to select what area to crop from an image and to apply it to the wanted side of some meshes supporting this feature (boxes, cylinders, etc).

As it modifies the internal geometry at construction time, it can’t be changed afterwards.

The real way to change the UVs after a mesh is built is to set it as “updatable” at construction time and then to update its VerticeData about UVs like JCPalmer described in the former post.

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 6:48pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/5 "2019-01-02T18:48:20Z")

</div>

yeah thats what i tried in my response to him 🙂

to build on that resposne, i forgot to add updatable to the options, now its in:

[https://www.babylonjs-playground.com/#20OAV9#445](https://www.babylonjs-playground.com/#20OAV9#445)

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 6:57pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/6 "2019-01-02T18:57:40Z")

</div>

When i just use the a float32Array it works but does not produce the intended result:  
**[https://www.babylonjs-playground.com/#20OAV9#446](https://www.babylonjs-playground.com/#20OAV9#446)**

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 7:05pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/7 "2019-01-02T19:05:02Z")

</div>

This is a neat pattern, however i do not think im going in the right direction.

[https://www.babylonjs-playground.com/#20OAV9#447](https://www.babylonjs-playground.com/#20OAV9#447)

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [January 2, 2019, 7:09pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/8 "2019-01-02T19:09:36Z")

</div>

I have never tried understand what the UV data actually was. I just exported it. As I said before it is a set of 2 numbers per vertex.

Maybe do a set where you get the UVs where you set them using faceUV, and write them to console to reverse engineer the values need to set directly.

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 7:31pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/9 "2019-01-02T19:31:36Z")

</div>

[https://doc.babylonjs.com/how\_to/updating\_vertices](https://doc.babylonjs.com/how_to/updating_vertices)

this seems to be what i should read 🙂

---

<div class="post-metadata">

**Author:** ![Rah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rah/32/201_2.png) [@Rah](https://forum.babylonjs.com/u/Rah)\
**Post date:** [January 2, 2019, 8:01pm UTC](https://forum.babylonjs.com/t/changing-faceuv-after-instantiating/525/10 "2019-01-02T20:01:00Z")

</div>

Got it!

[https://www.babylonjs-playground.com/#20OAV9#448](https://www.babylonjs-playground.com/#20OAV9#448)

Thanks for the help everyone!

another source for how i figured this all out:

[https://www.babylonjs-playground.com/#1ALQPZ#29](https://www.babylonjs-playground.com/#1ALQPZ#29)

Cant sleep on the playground search it is invaluable!