JS-我如何将其纳入ES6模块？

Question

Ok, I'm breaking apart the ShaderGlow example from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Shader-Glow.html trying to bring it into my node app.

Author does everything in tags in the html doc, but my whole app is in app.js and calls in ES6 modules from helper files.

The shader, before my tweaking, works like this:

var customMaterial = new THREE.ShaderMaterial(
{
    uniforms:
    {
        "c":   { type: "f", value: 1.0 },
        "p":   { type: "f", value: 1.4 },
        glowColor: { type: "c", value: new THREE.Color(0xffff00) },
        viewVector: { type: "v3", value: camera.position }
    },
    vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    transparent: true
}   );

Where fragment and vertex shader are in their own 's:

<!-- ---------------- Custom Shader Code ------------------------ -->
<script id="vertexShader" type="x-shader/x-vertex">
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<!-- fragment shader a.k.a. pixel shader -->
<script id="fragmentShader" type="x-shader/x-vertex"> 
uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}
</script>

So far I've tried doing:

import fragmentShader from './elements/GlowShaders.js';
import vertexShader from './elements/GlowShaders.js';

    var customMaterial = new THREE.ShaderMaterial(
    {
            uniforms:
        {
            "c":   { type: "f", value: 1.0 },
            "p":   { type: "f", value: 1.4 },
            glowColor: { type: "c", value: new THREE.Color(0xffff00) },
            viewVector: { type: "v3", value: this.camera.position }
        },
        vertexShader:  vertexShader,
        fragmentShader: fragmentShader,
        side: THREE.FrontSide,
        blending: THREE.AdditiveBlending,
        transparent: true
    }   );

With GlowShader.js written like:

export default class vertexShader {
  uniform vec3 viewVector;
  uniform float c;
  uniform float p;
  varying float intensity;
  void main()
  {
      vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
}

export default class fragmentShader {
  uniform vec3 glowColor;
  varying float intensity;
  constructor() {
    vec3 glow = glowColor * intensity;
      gl_FragColor = vec4( glow, 1.0 );
  }
}

Honestly very new to modules and this does not work. How can I break these special shader blocks into modules, or incorporate them in my app.js script?

Answer 1

Can you provide an answer where you put the code block into JSON.stringify or another format able to be read by the JS? Pasting straight into the parameter doesn't work, no.

const vertexShader = `
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`;

const fragmentShader = `
uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}`;

var customMaterial = new THREE.ShaderMaterial({
    uniforms:
    {
        "c":   { type: "f", value: 1.0 },
        "p":   { type: "f", value: 1.4 },
        glowColor: { type: "c", value: new THREE.Color(0xffff00) },
        viewVector: { type: "v3", value: camera.position }
    },
    vertexShader,
    fragmentShader,
    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    transparent: true
});

or

var customMaterial = new THREE.ShaderMaterial({
    uniforms:
    {
        "c":   { type: "f", value: 1.0 },
        "p":   { type: "f", value: 1.4 },
        glowColor: { type: "c", value: new THREE.Color(0xffff00) },
        viewVector: { type: "v3", value: camera.position }
    },
    vertexShader: "uniform vec3 viewVector;\nuniform float c;\nuniform float p;\nvarying float intensity;\nvoid main() \n{\n    vec3 vNormal = normalize( normalMatrix * normal );\n    vec3 vNormel = normalize( normalMatrix * viewVector );\n    intensity = pow( c - dot(vNormal, vNormel), p );\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
    fragmentShader: "uniform vec3 glowColor;\nvarying float intensity;\nvoid main() \n{\n    vec3 glow = glowColor * intensity;\n    gl_FragColor = vec4( glow, 1.0 );\n}",
    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    transparent: true
});