canvas = document.createElement('canvas');//創(chuàng)建canvas畫(huà)布
content = canvas.getContext('2d');//獲取畫(huà)布的上下文
canvas.width = 310;//設(shè)置尺寸
canvas.height = 310;
img = new Image();//創(chuàng)建一張圖片
img.src = require("../assets/images/base/wechat.png");//設(shè)置圖片地址
img.onload = () => {
    //在圖片加載后
  content.drawImage(img, 0, 0, canvas.width, canvas.height);//將圖片添加到畫(huà)布，并設(shè)置寬高
  imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//獲取畫(huà)布數(shù)據(jù)
};

for (var i = 0; i < 31 * 31; i++) {
    //random_position為各個(gè)小平面塊打亂時(shí)的位置信息，我設(shè)置小平面一共有31 * 31個(gè)
  random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])
}
var color = new Array(310).fill('').map(d => []);//color設(shè)置成310個(gè)數(shù)組
for (var i = 0; i < 310; i++) {
  for (var j = 0; j < 310; j++) {
    let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];
    clr = clr > 382 ? 'light' : 'black'; //因?yàn)轭伾怯猩钌珘K和淺色塊組成，他們的分界就是rgb通道顏色值之和小于等于127+127+127之和。
    color[i].push(clr)//每個(gè)數(shù)組有310項(xiàng)，每項(xiàng)的值為'light'或者'black'
  }
}
var color1 = [];//設(shè)置color1為小平面顏色數(shù)組31 * 31。
color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));//每10個(gè)像素，篩選出1個(gè)像素作為小平面的顏色，選取的位置盡量在10個(gè)的中間選擇，畢竟有的圖片比較模糊。
for (var i = 0; i < color1.length; i++) {//31 * 31的循環(huán)
  for (var j = 0; j < color1[i].length; j++) {
    var geometry = new THREE.PlaneGeometry(10, 10);
    var material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: color1[i][j] == 'black' ? 0 : 1,
    });
    var mesh = new THREE.Mesh(geometry, material);//小方塊網(wǎng)格
    origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//保存序列換后小方塊的位置
    mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//先將小方塊的位置設(shè)置成打亂的位置，便于動(dòng)畫(huà)播放。
    mesh.name = 'plane';
    group.add(mesh);//將所有小平面放到數(shù)組，便于操作。
  }
}
scene.add(group);

var pos = { time: 0 };
tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);
tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);
tween1.easing(TWEEN.Easing.Quadratic.In);
tween2.easing(TWEEN.Easing.Quadratic.Out);
tween1.onUpdate(onUpdate);
tween2.onUpdate(onUpdate);
tween1.start();

function onUpdate() {
  let time = this._object.time;
  group.children.forEach((d, i) => {
    d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);
  })
}