I am trying to do texture mapping with triplanner mapping in three.js in terrain created after heightmap data into plane mesh.

To do that i load the diffuse texture by

```
let diffuseTex;
loader.load(
"./resources/images/satellite.png",
function (image) {
diffuseTex = image;
},
undefined,
function () {
console.error("An error happened.");
}
);
```

I did use that texture created from the diffusemap image that i have locally as an uniform

```
var uniforms1 = {
diffuseTexture: { type: "t", value: diffuseTex },
};
const _meshMaterial = new THREE.RawShaderMaterial({
uniforms: uniforms1,
vertexShader: terrainShader._VS,
fragmentShader: terrainShader._FS,
});
```

My shader code is:

```
const _VS = `#version 300 es
precision highp float;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
in vec3 position;
in vec3 normal;
out vec3 vNormal;
out vec3 vPosition;
#define saturate(a) clamp( a, 0.0, 1.0 )
void main(){
vNormal = normal;
vPosition = position.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vPosition = vec3(gl_Position.xyz)*0.5 + 0.5;
}
`;
const _FS = `#version 300 es
precision mediump sampler2DArray;
precision highp float;
precision highp int;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform vec3 cameraPosition;
uniform sampler2D diffuseMap;
in vec3 vNormal;
in vec3 vPosition;
out vec4 out_FragColor;
vec3 blendNormal(vec3 normal){
vec3 blending = abs(normal);
blending = normalize(max(blending, 0.00001));
blending /= vec3(blending.x + blending.y + blending.z);
return blending;
}
vec3 triplanarMapping (sampler2D tex, vec3 normal, vec3 position) {
vec3 normalBlend = blendNormal(normal);
vec3 xColor = texture(tex, position.yz).rgb;
vec3 yColor = texture(tex, position.xz).rgb;
vec3 zColor = texture(tex, position.xy).rgb;
return (xColor * normalBlend.x + yColor * normalBlend.y + zColor * normalBlend.z);
}
void main(){
vec3 color = triplanarMapping(diffuseMap, vNormal, vPosition);
out_FragColor = vec4(color, 1.0);
}
`;
export const terrainShader = { _VS, _FS };
```

Then i create a mesh with the geometry which is filled with the vertices data and material created with custom shader:

```
let geometry = new THREE.PlaneGeometry(
partial.x,
partial.y,
partial.x - 1,
partial.y - 1
);
geometry.setFromPoints(chunk[i]);
geometry.computeVertexNormals();
let mesh = new THREE.Mesh(geometry, _meshMaterial);
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh);
```

I donâ€™t know what i am doing wrong because i am getting this as output of terrain:

I was expecting mapping of this texture above this terrain.

texture to map:

I am new to this and struggling can anyone please help me ?

This is the complete code and this code is not working because though i did put all code into fiddle but three.js loader.load( image url) is thowing error of CORS which is not going even if i am doing loader.setCrossOrigin(â€śanonymousâ€ť);

because of it demo is not working but fiddle is