# How to make textures align across adjacent objects

**URL:** <https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193>\
**Category:** Questions\
**Tags:** uv, triplanar, materials, textures, tsl, uvs, shaders\
**Created:** [May 30, 2024, 9:23am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193 "2024-05-30T09:23:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Schmitz](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Post date:** [May 30, 2024, 9:23am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193/1 "2024-05-30T09:23:11Z")

</div>

Hi,

I’m trying to make the textures of adjacent objects align.  
One object is an imported gltf model, and the other is a programmatically created BoxGeometry.  
I tried to match the textures using the material repeat and offset values using a grid debug texture. And this worked but when I resize one of the objects the textures are no longer aligned.  
Is there a material or setting that could fix this, something like projecting the material onto the objects in world space?

**Example of the issue** ,  
This example has three separate objects. When I change the height of the objects by moving the vertices up, the texture no longer aligns.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/6/66d3c5ff126a9c244a04529d79d005ac1f50d4dd.jpeg)

**Second example,**  
Same setup as before, but now before resizing objects with a debug texture (material repeat and offset values adjusted)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/add31f998f4fa11d644c54bd3a7fba3ffb727ae9.jpeg)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [May 31, 2024, 3:14am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193/2 "2024-05-31T03:14:12Z")

</div>

Is there a solution currently, without coding a custom shader material? Nope.

But if you can wait a moment - [TSL finally introduces triplanar mapping as texture mapping option](https://x.com/bruno_simon/status/1796186931790815710?s=46&t=ViF4mDv451zom5HBtovQgQ), which is pretty much exactly what you’re looking for.

---

<div class="post-metadata">

**Author:** ![Tom\_Schmitz](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Post date:** [June 5, 2024, 8:00am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193/3 "2024-06-05T08:00:26Z")

</div>

Hi Mjurczyk,

I’ve been testing around with TSL triplanar texture. And it works partially, the texture is being displayed. But its position seems to stick to the object instead of world space. Am I missing something here?

**Expected effect** :  
 ![expected_result](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/652a2251b03442b14c55779a3a36c1263c843f61.gif)

**Result** :  
 ![triplanar](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/7/f7adc035c94339a90f1b1af614ec768b86414406.gif)

**Current material code** :

```javascript
const material = new MeshStandardNodeMaterial();

const textureMap = new THREE.TextureLoader().load('./texture.jpg');
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.wrapT = THREE.RepeatWrapping;
const colorTexture = texture(textureMap)
material.colorNode = triplanarTexture(colorTexture, colorTexture, colorTexture, 0.5)

const normalTextureMap = new THREE.TextureLoader().load('./normal.jpg');
normalTextureMap.wrapS = THREE.RepeatWrapping;
normalTextureMap.wrapT = THREE.RepeatWrapping;
const normalTexture = texture(normalTextureMap)
material.normalNode = normalMap(triplanarTexture(normalTexture))

```

---

<div class="post-metadata">

**Author:** ![Tom\_Schmitz](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Post date:** [June 5, 2024, 8:25am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193/4 "2024-06-05T08:25:53Z")

</div>

Just a small update, after going through the source code I managed to find the code to get the desired effect to work 👌.

**Updated material code** :

```javascript
const material = new MeshStandardNodeMaterial();

const textureMap = new THREE.TextureLoader().load('./texture.jpg');
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.wrapT = THREE.RepeatWrapping;
const colorTexture = texture(textureMap)
material.colorNode = triplanarTexture(colorTexture, colorTexture, colorTexture, 0.5, varying(modelWorldMatrix.mul(positionLocal).xyz, 'v_positionWorld'))

const normalTextureMap = new THREE.TextureLoader().load('./normal.jpg');
normalTextureMap.wrapS = THREE.RepeatWrapping;
normalTextureMap.wrapT = THREE.RepeatWrapping;
const normalTexture = texture(normalTextureMap)
material.normalNode = normalMap(triplanarTexture(normalTexture, normalTexture, normalTexture, 0.5, varying(modelWorldMatrix.mul(positionLocal).xyz, 'v_positionWorld')))

```

**Result** :  
 ![triplanar2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/e/2e5ff894dc7ed5f75cf6c04ef2de0dc30ee4e6ee.gif)

---

<div class="post-metadata">

**Author:** ![sunag](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sunag/32/29472_2.png) [@sunag](https://discourse.threejs.org/u/sunag)\
**Post date:** [June 11, 2024, 3:23am UTC](https://discourse.threejs.org/t/how-to-make-textures-align-across-adjacent-objects/66193/5 "2024-06-11T03:23:59Z")

</div>

It’s possible to use `positionWorld` instead of doing the calcs manually.

> **[Three.js Shading Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#position)**
>
> JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.