/**
 *@author liuhaixiao
 *@createTime 2018-09-27 11:10
 *@description  下雪组件
 */
var THREE = require('../three.min');

var renderer = null;
var scene;
var camera;
var point;
export default class Snow {

  constructor(select) {
    this.oC = select;
    this.widthCanvas = this.oC.width;
    this.heightCanvas = this.oC.height;
    this.oGc = this.oC.getContext('webgl');
    this.instance = null;
  }

  init() {
    this.initRenderer()
    this.initScene()
    this.initCamera()
    this.createParticles()
    this.animate()
  }

  /**
   * 初始化渲染3D引擎，指定画到canvas上
   */
  initRenderer() {
    renderer = new THREE.WebGLRenderer({antialias: false,canvas:this.oC, context: this.oGc, preserveDrawingBuffer: true});
    renderer.setSize(this.widthCanvas, this.heightCanvas);
  }

  /**
   * 初始化透视投影相机的视角
   */
  initCamera() {
    //PerspectiveCamera 参数详解
    //Fov – 相机的视锥体的垂直视野角    ———— 一般写75
    // Aspect – 相机视锥体的长宽比     ———— 一般是宽除以高
    // Near – 相机视锥体的近平面       ———— 一般填写1
    // Far – 相机视锥体的远平面        ———— 一般填写1000
    camera = new THREE.PerspectiveCamera(75, this.widthCanvas / this.heightCanvas, 1, 1000);
    /** 设置相机的位置 **/
    camera.position.set(0, 20, 100);
    /** 设置相机聚焦的位置 **/
    camera.lookAt(new THREE.Vector3(0, 30, 0));
  }

  /**
   * 初始化场景对象
   */
  initScene() {
    scene = new THREE.Scene();
  }


  /**
   * 创建图形粒子
   */
  createParticles() {
    var texture = new THREE.TextureLoader().load("https://dm.static.elab-plus.com/static/img/snow.png");//雪花图片材质
    /** 存放粒子数据的网格容器形状 **/
    var geom = new THREE.Geometry();
    /** 样式化粒子的THREE.PointsMaterial材质 **/
    var material = new THREE.PointsMaterial({
      /** 粒子大小 **/
      size:1,
      map: texture,
      transparent: true,
      depthTest: false  //设置解决透明度有问题的情况
    });
    //范围距离
    var range = 300;
    for (var i = 0; i < 5000; i++) {
      /** 添加顶点的坐标的三维模型THREE.Vector3参数说明：x, y, z **/
      var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
      /** 雪花下落的速度 **/
      particle.velocityY = 0.01 + Math.random() / 5;
      /** 雪花下落的横向坐标的偏移位置 **/
      particle.velocityX = (Math.random() - 0.3) / 3;
      /** 把物体添加到图形顶点容器中 **/
      geom.vertices.push(particle);
    }
    /** 把物体生成模型 **/
    point = new THREE.Points(geom, material);
    /** 把模型添加到场景中 **/
    scene.add(point);
  }

  render() {
    /** 从图形顶点容器中获取坐标集，进行渲染 **/
    var vertices = point.geometry.vertices;
    vertices.forEach(function (vertice) {
      vertice.y = vertice.y - (vertice.velocityY);
      /** x坐标，控制雪花下落的位置变化情况 **/
      vertice.x = vertice.x - (vertice.velocityX)*0.5;
      /** 防止雪花粒子下落超过位置后重新赋值**/
      if (vertice.y <= -60) vertice.y = 60;
      if (vertice.x <= -20 || vertice.x >= 20) vertice.velocityX = vertice.velocityX * -1;
    });
    /** 实时更新顶点的信息，这里必须为true，因为循环渲染不能走缓存 **/
    point.geometry.verticesNeedUpdate = true;
    /**  **/
    renderer.render(scene, camera);
  }

  animate() {
    this.render()
    /** 循环产生下降动画效果 **/
    requestAnimationFrame(this.animate.bind(this));
  }

  process() {
    this.init()
  }
}

/*

export default class Snow {
  /!**
   * 返回一个最小和最大个数之间的随机数
   * @param min 最小数
   * @param max 最大数
   * @returns {*}
   *!/
  random(min, max) {
    return Math.random() * (max - min) + min;
  }
  constructor(select) {
      this.oC = select;
      this.widthCanvas = this.oC.width;
      this.heightCanvas = this.oC.height;
      this.oGc = this.oC.getContext('2d');
  }

  init() {
    this.x = this.random(0, this.widthCanvas);//圆的中心的 x 坐标。
    this.y = 0;//圆的中心的 y 坐标。
    this.r = this.random(1, 5);//圆的半径。
    this.vy = this.random(0.5, 1);//y坐标的变化值（主要作用是控制Y坐标下落的速度）
  }

  /!**
   * 画
   * @param cxt
   *!/
  draw(cxt) {
    cxt.beginPath();//起始一条路径，或重置当前路径
    cxt.fillStyle = 'white';//设置或返回用于填充绘画的颜色、渐变或模式
    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);//画一个圆
    cxt.fill();//填充当前绘图（路径）
    cxt.closePath();//创建从当前点回到起始点的路径
    this.update();//
  }

  update() {
    if (this.y < this.heightCanvas - this.r) {
      this.y += this.vy;
    } else {
      this.init();
    }
  }

  process() {
    if (snowArray.length <= 10) {
      for (var i = 0; i < 10; i++) {
        setTimeout( ()=> {
          var oSnow = new Snow(this.oC);
          oSnow.init();
          snowArray.push(oSnow);
        }, 1000 * i);
      }
    }

    this.oGc.clearRect(0, 0, this.widthCanvas, this.heightCanvas);//在给定的矩形内清除指定的像素
    for (var i = 0; i < snowArray.length; i++) {
      snowArray[i].draw(this.oGc);
    }
    requestAnimationFrame(this.process.bind(this));


  }
}


var snowArray = [];
*/
