在three.js中建立一個小球而且小球在外部添加輝光

本文參考 ： http://www.javashuo.com/article/p-mubblkxv-mc.html

我在這裏，很是感謝大佬的分享！！！！！

 

邏輯步驟：

        1.建立兩個球體，一個做爲原始物體，一個略大一些做爲它的輝光。

        2.做爲輝光的球體從內到外片元透明度逐漸減少（線性減少或是指數減少均可以）

        3.將覆蓋原始物體的部分丟棄掉

 

let vertexShader    = [
  'varying vec3    vVertexWorldPosition;',
  'varying vec3    vVertexNormal;',
  'varying vec4    vFragColor;',
  'void main(){',
  '    vVertexNormal  = normalize(normalMatrix * normal);',//將法線轉換到視圖座標系中
  '    vVertexWorldPosition   = (modelMatrix * vec4(position, 1.0)).xyz;',//將頂點轉換到世界座標系中
  '    // set gl_Position',
  '    gl_Position    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
  '}'
].join('\n');
let fragmentShader1    = [
  'uniform vec3    glowColor;',
  'uniform float   coeficient;',
  'uniform float   power;',
  'varying vec3    vVertexNormal;',
  'varying vec3    vVertexWorldPosition;',
  'varying vec4    vFragColor;',
  'void main(){',
  '    vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;', //世界座標系中從相機位置到頂點位置的距離
  '    vec3 viewCameraToVertex    = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',//視圖座標系中從相機位置到頂點位置的距離
  '    viewCameraToVertex = normalize(viewCameraToVertex);',//規一化
  '    float intensity       = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
  '    gl_FragColor      = vec4(glowColor, intensity);',
  '}'//vVertexNormal視圖座標系中點的法向量
  //viewCameraToVertex視圖座標系中點到攝像機的距離向量
  //dot點乘獲得它們的夾角的cos值
  //從中心向外面角度愈來愈小（從鈍角到銳角）從cos函數也能夠知道這個值由負變正，不透明度最終從低到高
].join('\n');
// let fragmentShader2 = [
//   'uniform vec3 glowColor;',
//   'uniform float    coeficient;',
//   'uniform float    power;',
//   'varying vec3 vVertexNormal;',
//   'varying vec3 vVertexWorldPosition;',
//   'varying vec4 vFragColor;',
//   'void main(){',
//   ' vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;', //世界座標系中頂點位置到相機位置到的距離
//   ' vec3 viewCameraToVertex    = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;',//視圖座標系中從相機位置到頂點位置的距離
//   ' viewCameraToVertex = normalize(viewCameraToVertex);',//規一化
//   ' float intensity       = coeficient + dot(vVertexNormal, viewCameraToVertex);',
//   ' if(intensity > 0.55){ intensity = 0.0;}',
//   ' gl_FragColor      = vec4(glowColor, intensity);',
//   '}'//vVertexNormal視圖座標系中點的法向量
//   //viewCameraToVertex視圖座標系中點到攝像機的距離向量
//   //dot點乘獲得它們的夾角的cos值
//   //從中心向外面角度愈來愈大（從銳角到鈍角）從cos函數也能夠知道這個值由負變正，不透明度最終從高到低
// ].join('\n');

//本質透明度遞減
let sphere =  new THREE.SphereBufferGeometry( 16, 32, 32 );
let material   = new THREE.ShaderMaterial({
  uniforms: {
    coeficient : {
      type : "f",
      value    : 1.0
    },
    power     : {
      type : "f",
      value    : 2
    },
    glowColor  : {
      type : "c",
      value    : new THREE.Color('#01d8d2')
    }
  },
  vertexShader : vertexShader,
  fragmentShader   : fragmentShader1,
  blending : THREE.NormalBlending,
  transparent  : true
});
// let material_glow   = new THREE.ShaderMaterial({
//   uniforms: {
//     coeficient  : {
//       type  : "f",
//       value : 0.0
//     },
//     power      : {
//       type  : "f",
//       value : 2
//     },
//     glowColor   : {
//       type  : "c",
//       value : new THREE.Color('#01d8d2')
//     }
//   },
//   vertexShader  : vertexShader,
//   fragmentShader    : fragmentShader2,
//   blending  : THREE.NormalBlending,
//   transparent   : true
// });
let group = new THREE.Group()
let mesh = new THREE.Mesh(sphere, material);
let sphere2 =  new THREE.SphereBufferGeometry( 8, 32, 32 );
let material2  = new THREE.MeshPhongMaterial({color:new THREE.Color('#01d8d2')
});
let mesh2 = new THREE.Mesh(sphere2, material2);
group.add(mesh);
group.add(mesh2);
group.position.set(550,300,-2)
this.scene.add(group);

效果圖以下：