平时需要实现几个的动效来改善无聊的中后台业务带来的负面情绪。
概述:利用 JS 以及 Three.js 对下图进行处理
来生成对应的粒子图,实例代码。
主要分为以下几个步骤
1. 获取对应图像信息
首先读取图片,可以利用 document.images
获取页面中 img
的信息。
再将 img
绘制到 canvas
画布,利用 getImageData
获取图像的像素信息,具体如下 getImgData
const getImgData = img => {
// 宽、高
const { width, height } = img
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// 像素数
const numPixels = width * height
canvas.width = width
canvas.height = height
ctx.scale(1, -1)
ctx.drawImage(img, 0, 0, width, height * -1)
// 用来描述canvas区域隐含的像素数据
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
return {
width,
numPixels,
originalColors: Float32Array.from(imgData.data),
}
}
复制代码
imgData.data
包含着图片的像素数据的数组,即 RGBA 值:
- R - 红色 (0-255);
- G - 绿色 (0-255);
- B - 蓝色 (0-255);
- A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)。
在 imgData.data
排列顺序是每个像素点的 [R, G, B, A, R, G, B, A, ...]
,如图
2. 图像处理
上一步中获取到相关图像的像素信息,然后处理四个通道的信息 originalColors
由于图像的背景为黑色,也就是说可以利用R 通道的数据来进行阈值分割
设定一个阈值 threshold
,如果满足 originalColors[i * 4 + 0] > threshold
的条件,则统计该像素点可见,然后遍历 originalColors
得到可见像素点的位置的坐标。
const getParticleData = (img, threshold) => {
const { width, numPixels, originalColors } = getImgData(img)
let numVisible = 0
// 统计大于阈值的像素点
for (let i = 0; i < numPixels; i++) {
if (originalColors[i * 4 + 0] > threshold) numVisible++
}
const offsets = new Float32Array(numVisible * 3)
// 获取像素点的位置
for (let i = 0, j = 0; i < numPixels; i++) {
if (originalColors[i * 4 + 0] > threshold) {
// 获取 x 方向的坐标
offsets[j * 3 + 0] = i % width
// 获取 y 方向的坐标
offsets[j * 3 + 1] = Math.floor(i / width)
j++
}
}
return {
offsets
}
}
复制代码
3. 生成粒子图
这一步比较简单,就是利用得到的像素位置来生成对应的粒子图,首先初始化场景、相机等要素
// init webGL
const scene = new THREE.Scene()
const group = new THREE.Group()
scene.add(group)
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
10,
10000
)
camera.position.z = 300
const fovHeight = 2 * Math.tan(camera.fov * Math.PI / 180 / 2) * camera.position.z
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true,
alpha: true,
})
renderer.setClearColor(0x000000, 1)
复制代码
然后,在 offsets
的位置数据上,生成对应的粒子
设定每个粒子的 material
,然后利用 TweenMax.to
使得粒子过渡至对应位置。
const textureLoader = new THREE.TextureLoader()
const map = textureLoader.load('./assets/images/circle.png')
const material = new THREE.SpriteMaterial({
map,
color: 0xffffff,
fog: true
})
const positions = offsets
for (let index = 0; index < positions.length; index += 2) {
const particleMaterial = material
const particle = new THREE.Sprite(particleMaterial)
// 粒子目标位置
const targetX = positions[index]
const targetY = positions[index + 1]
const targetZ = positions[index + 2]
if (targetX && targetY) {
// 粒子的初始位置
particle.position.x = 0
particle.position.y = 0
particle.position.z = 0
// 粒子从初始位置过渡到目标位置
TweenMax.to(particle.position, 1, {
x: targetX,
y: targetY,
z: targetZ,
delay: Math.random() * 0.1
})
group.add(particle)
}
}
复制代码
4. 总结
简单的阈值分割结合粒子特效对图像进行处理,如果需要其他特效,可以处理粒子的 material
,例如 RawShaderMaterial
,可以实现如下效果