[Three.js]WebGL心形效果

         本文实现效果参考自 Three.js、 Sparks.js的examples。如果你的浏览器支持WebGL，可以点击 这里查看效果^^。
 
一、垫脚石

         WebGL，浏览器上的3D技术，基于OpenGL ES 2.0。基础教程可见Hi,WebGL!、Learning WebGL。

         Three.js，WebGL的一个3D引擎库。呃，有需要的，可以看这一篇， Click here！
 
二、单刀直入
1 ）下载源码
         附件！恩，可以先打开html看看效果。
 
         查看源码发现还有个Stats.js，是左上角统计FPS用的。
 
         浏览388行，运行入口，也基本确定了我们的实现流程。
  
 
  
     
   
  1. function threeStart() { 
    2.  
   
  2.   initScene(); 
    3.  
   
  3.   initParticles(); 
    4.  
   
  4.   initShape(); 
    5.  
   
  5.   initEmitter(); 
    6.  
   
  6.   animate(); 
    7.  
   
  7. } 
    8.  
   
  8.  
    9.  
   
  9. window.addEventListener('load', threeStart, false); 
    10.  
  
 
  

    
  
 
  
 
   2
   ）initScene () 
  
 
  

            浏览70行，上方先定义好了方法内要给外部用的变量，之后的方法都会如此。
  
 
  

            基本就这么个流程：camera->scene->renderer[->stats]。
  
 
  

    
  
 
  
 
   3
   ）initParticles() 
  
 
  

   3.1）着色器
  
 
  
         浏览121-147行，THREE .ShaderMaterial的定义，其中attributes, uniforms，对应于GLSL内的变量，其type类型，在WebGLRenderer.js内搜索‘switch ( type )’即可找到。Vertex Shader&Fragment Shader如下：
 
  
 
  
     
   
  1. <!-- 顶点着色器 --> 
    2.  
   
  2. <script type="x-shader/x-vertex" id="vertexshader">  
    3.  
   
  3.     attribute float size; 
    4.  
   
  4.     attribute vec3 ca; 
    5.  
   
  5.  
    6.  
   
  6.     varying vec3 vColor; 
    7.  
   
  7.  
    8.  
   
  8.     void main() { 
    9.  
   
  9.         vColor = ca; 
    10.  
   
  10.  
    11.  
   
  11.         /* 
    12.  
   
  12.          * 对于简单构造的粒子，可以用一个Object的各顶点表示粒子。 
    13.  
   
  13.          * 利用gl_PointSize属性设置每个粒子大小。更快。 
    14.  
   
  14.          */ 
    15.  
   
  15.  
    16.  
   
  16.         // 变换后的顶点坐标 
    17.  
   
  17.         vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
    18.  
   
  18.         // 顶点大小 
    19.  
   
  19.         gl_PointSize = size * (200.0 / length(mvPosition.xyz)); 
    20.  
   
  20.         // 输出顶点世界坐标 
    21.  
   
  21.         gl_Position = projectionMatrix * mvPosition; 
    22.  
   
  22.     } 
    23.  
   
  23. </script>  
    24.  
   
  24. <!-- 片元着色器 --> 
    25.  
   
  25. <script type="x-shader/x-fragment" id="fragmentshader">  
    26.  
   
  26.     uniform vec3 color; 
    27.  
   
  27.     uniform sampler2D texture; 
    28.  
   
  28.  
    29.  
   
  29.     varying vec3 vColor; 
    30.  
   
  30.      
    31.  
   
  31.     void main() { 
    32.  
   
  32.         // 用gl_PointCoord设置纹理，不是UV坐标了 
    33.  
   
  33.         vec4 outColor = texture2D(texture, gl_PointCoord); 
    34.  
   
  34.         // 设定像素颜色 = 纹理颜色 * 顶点颜色 
    35.  
   
  35.         gl_FragColor = outColor * vec4(color * vColor.xyz, 1.0); 
    36.  
   
  36.  
    37.  
   
  37.         // 计算像素世界坐标z值 
    38.  
   
  38.         float depth = gl_FragCoord.z / gl_FragCoord.w; 
    39.  
   
  39.         // 雾颜色：黑 
    40.  
   
  40.         const vec3 fogColor = vec3(0.0, 0.0, 0.0); 
    41.  
   
  41.         // const vec3 fogColor = vec3(0xff, 0xff, 0xff); 
    42.  
   
  42.         // 雾因素：depth<=200时0，>=600时1 
    43.  
   
  43.         float fogFactor = smoothstep(200.0, 600.0, depth); 
    44.  
   
  44.         // 混合雾的像素颜色 
    45.  
   
  45.         gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w), fogFactor); 
    46.  
   
  46.     } 
    47.  
   
  47. </script> 
    48.  
  
 
  

    
  
 
  

   3.2）粒子初始化
  
 
  

            浏览149-178行，创建了一个几何物体，初始定义了10000个顶点，至无限远。当仓库了，拿出来，用完，再放回去（再至为无限远）。
  
 
  

    
  
 
  
 
   4
   ）initShape() 
  
 
  

            221行开始，THREE.Shape()给它整成个心形。之后在365行，render()内，从[0,1]间取出它的位置，并赋值给发射器当前位置，如下：
  
 
  

    
  
 
  
 
  
     
   
  1. // 沿形状路线运行 
    2.  
   
  2. timeOnShapePath += 0.01; 
    3.  
   
  3. if (timeOnShapePath > 1) timeOnShapePath -= 1; 
    4.  
   
  4. var pointOnShape = heartShape.getPointAt(timeOnShapePath); 
    5.  
   
  5.  
    6.  
   
  6. emitterpos.x = pointOnShape.x * 2 - 50; 
    7.  
   
  7. emitterpos.y = -pointOnShape.y * 2 + 100; 
    8.  
  
 
  

    
  
 
  
 
   5
   ）initEmitter() 
  
 
  

            Sparks.js的使用了，237行。没有自己的，就只能用用别人的了。还有它很久没更新了。
  
 
  

    
  
 
  
 
   6
   ）animate() 
  
 
  

            用requestAnimationFrame反复执行。其中render()处理变换，再渲染。stats.update()，即是左上角那插件的更新了。
  
 
  

    
  
 
  

            render()前一部分用以鼠标旋转,与鼠标事件关联。中间即是轨迹移动。还有以下三句，声明顶点、大小、颜色都要更新。
  
 
  

    
  
 
  
 
  
     
   
  1. // 设置需要更新 
    2.  
   
  2. group.geometry.verticesNeedUpdate = true; // 顶点 
    3.  
   
  3. attributes.size.needsUpdate = true; // 大小 
    4.  
   
  4. attributes.ca.needsUpdate = true; // 颜色 
    5.  
  
 
  

    
  
 
  

            其变化在initEmitter()内，Sparks.js的回调里做了。但只有这里声明了需要更新，Three.js才会更新着色器相应的变量值。
  
 
  

    
  
 
  

            最后句，以重复渲染场景。
  
 
  

    
  
 
  

   三、说点啥
  
 
  

            说是有节日==。