Github首页地球学习(2)-光源

Github首页地球学习(2)-光源

参考1
参考2

接上一篇:Github首页地球学习(1)-Earth

最终效果:
Github首页地球学习(2)-光源_第1张图片

代码:

export default function getGlowLight() {
  const cl = 25;
  const mat = new THREE.ShaderMaterial({
    uniforms: {
      c: {
        type: "f",
        value: 0.7,
      },
      p: {
        type: "f",
        value: 15,
      },
      glowColor: {
        type: "c",
        value: new THREE.Color(0x1c2462),
      },
      viewVector: {
        type: "v3",
        value: new THREE.Vector3(0, 0, 220),
      },
    },
    vertexShader: `
      #define GLSLIFY 1
      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 );
      }`,
    fragmentShader: `
      #define GLSLIFY 1
      uniform vec3 glowColor;
      varying float intensity;
      void main()
      {
          vec3 glow = glowColor * intensity;
          gl_FragColor = vec4( glow, 1.0 );
      }`,
    side: 1,
    blending: 2,
    transparent: !0,
  });
  const s = new THREE.Mesh(new THREE.SphereBufferGeometry(cl, 45, 45), mat);
  s.name = "GlowLight";
  s.scale.multiplyScalar(1.15);
  s.rotateX(0.03 * Math.PI);
  s.rotateY(0.03 * Math.PI);
  return s;
}

你可能感兴趣的:(Threejs-Shader)