Three.js - 利用 JS 进行图片处理并生成对应粒子图

栏目: JavaScript · 发布时间: 5年前

内容简介:平时需要实现几个的动效来改善无聊的中后台业务带来的负面情绪。概述:利用 JS 以及 Three.js 对下图进行处理来生成对应的粒子图,

平时需要实现几个的动效来改善无聊的中后台业务带来的负面情绪。

概述:利用 JS 以及 Three.js 对下图进行处理

Three.js - 利用 JS 进行图片处理并生成对应粒子图

来生成对应的粒子图, 实例代码

Three.js - 利用 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, ...] ,如图

Three.js - 利用 JS 进行图片处理并生成对应粒子图

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 ,可以实现如下效果

Three.js - 利用 JS 进行图片处理并生成对应粒子图

以上所述就是小编给大家介绍的《Three.js - 利用 JS 进行图片处理并生成对应粒子图》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python编程无师自通

Python编程无师自通

[美] 科里·奥尔索夫(Cory Althoff) / 宋秉金 / 人民邮电出版社 / 2019-1-1 / 59

畅销Python编程类入门书,美国亚马逊Kindle编程类排行榜榜一。 作者从文科毕业,通过自学编程转行为专业程序员,在硅谷工作多年后成功技术创业。本书不仅教读者如何使用Python语言编程,还会介绍其他书中所忽略的、编程初学者应该了解并掌握的其他所有知识点。 本书作者是一名自学成才的程序员,经过一年的自学,掌握了编程技能并在eBay找到了一份软件工程师的工作。本书是作者结合个人经验写......一起来看看 《Python编程无师自通》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具