Fresnel Shader or similar effect

Questions
17

Does it make an difference where the js files from the ExtendMaterial.js goes? they’re not in the same location as the rest of my ThreeJS files because I’d need to make sure your code is brought in via composer if it needs to be in the same location, so your code being brought in like this (I’ve changed the relevant import function inside of your ExtendMaterial.module.js to match the location of my threejs folder too)

import { patchShader, extendMaterial, CustomMaterial } from '/path/to/my/import/js/ExtendMaterial.module.js';

So I don’t have access to use THREE.extendMaterial, because it says that THREE.extendMaterial isn’t a function, so I was just using extendMaterial on it’s own

This is the part that applying the texture to an item, the only part I changed was the THREE.extendMaterial to extendMaterial, other than that I just copy&pasted the whole lot to test

const mergedMaterial = extendMaterial(THREE.MeshStandardMaterial, {


      // Will be prepended to vertex and fragment code

      header: 'varying vec3 vNN; varying vec3 vEye;',
      fragmentHeader: 'uniform vec3 fresnelColor;',


      // Insert code lines by hinting at a existing

      vertex: {
        // Inserts the line after #include <fog_vertex>
        '#include <fog_vertex>': `


          mat4 LM = modelMatrix;
          LM[2][3] = 0.0;
          LM[3][0] = 0.0;
          LM[3][1] = 0.0;
          LM[3][2] = 0.0;

          vec4 GN = LM * vec4(objectNormal.xyz, 1.0);
          vNN = normalize(GN.xyz);
          vEye = normalize(GN.xyz-cameraPosition);`
      },
      fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : `

gl_FragColor.rgb +=  ( 1.0 - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor;

`
      },


      // Uniforms (will be applied to existing or added)

      uniforms: {
        diffuse: new THREE.Color( 'black' ),
        fresnelColor: new THREE.Color( 'blue' )
      }


    });

Then later on down in my code I’ve got this, just to test adding it to something before I add it to my actual glb asset

let geometry = new THREE.TorusKnotBufferGeometry( 0.5, 0.3, 128, 16 );
        let mesh = new THREE.Mesh( geometry, mergedMaterial );
        scene.add( mesh );