How to make textures align across adjacent objects

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

Updated material code:

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

1 Like