Hox to correctly define shader code , to include Normal maps, in the latest Threejs release

Questions
1

All,

I have really, really tried to do this on my own. I am trying to add normal maps to my own shader terrain generation. I have at least 50 browser references on postings/examples, spread out over time, that all disagree with each other on the shader code/material etc..

I would REALLY appreciate some direction and possible example code to do this. My base code is based on the Stemkowski Shader-Heightmap-texture example Shader - Height Map (Three.js) .

Using an older example, not Stemkowski, I was able to add a Normal map to Threejs version 139, which worked. I cannot figure out how to make this all work with the MeshStandardMaterial, ShaderMaterial, etc. of the current Three source code, on the Stemkowski example.

My old working version uses the following on a MeshStandardMaterial.onBeforeCompile method.

```

this.material = new MeshStandardMaterial({

normalMap:loadedText,

color: “green”,

displacementMap: heightMap,

shader.fragmentShader = shader.fragmentShader.replace(

      "#include <normal_fragment_maps>",

`vec3 mapN=texture2D( normalMap, vUv*vec2(6.0,2.0) ).xyz * 2.0 - 1.0;

        mapN.xy \*= normalScale;

        normal = perturbNormal2Arb( - vViewPosition, normal, mapN, faceDirection );

        `)`\`\`

shader.vertexShader = `

        attribute vec2 enableDisp;

${shader.vertexShader}

      \`.replace(

`#include <displacementmap_vertex>`,

` #ifdef USE_DISPLACEMENTMAP

          if (enableDisp.x > 0.) {

            vec3 vUp = vec3(0, 1, 0);

            vec3 v0 = normalize( vUp ) \* ( texture2D( displacementMap, vUv ).x \* displacementScale + displacementBias );

            transformed += v0;

            if(enableDisp.y > 0.) {

              float txl = 1. / 256.;

              vec3 v1 = normalize( vUp ) \* ( texture2D( displacementMap, vUv + vec2(txl, 0.) ).x \* displacementScale + displacementBias );

              v1.xz = vec2(txl, 0.) \* 20.;

              vec3 v2 = normalize( vUp ) \* ( texture2D( displacementMap, vUv + vec2(0., txl) ).x \* displacementScale + displacementBias );

              v2.xz = -vec2(0., txl) \* 20.;

              vec3 n = normalize(cross(v1 - v0, v2 - v0));

              vNormal = normalMatrix \* n;

            }              

          }

        #endif

        \`

Trying to migrate to the current Threejs, apparently crossed some breaking shader support, and I simply get all sorts of errors when I try to do this. Like the following

RROR: 0:67: 'normalScale' : undeclared identifier
ERROR: 0:68: 'normal' : undeclared identifier
ERROR: 0:68: 'vViewPosition' : undeclared identifier
```

So whats the best approach here, MeshStandardMaterial or ShaderMaterial, what of the various Threejs includes, #include <normal_fragment_maps>, are needed etc. I am a loss where to go.