【Three.js基础学习】13.Particle

已于 2024-04-29 23:20:18 修改
阅读量715 收藏 17
点赞数 9
分类专栏： three.js基础学习 文章标签： 学习 前端 javascript
于 2024-04-29 23:08:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41722662/article/details/138327041
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

课堂知识点

        1.粒子

        2.PointsMaterial 点材质 ； 可以设置点材质的

         size 大小 ， sizeAttenuation 设置这个可以 可以实现缩放粒子 近处的大 远处小，设置false 远近都一样大

        3. Points() 点网格 ，和Mesh()类似 参数接收几何体 和 材质

        注意：使用缓冲几何体 你在画面中什么也看不到；可以先从ShpereGeomatry观看一下效果

        4. 想要随机的粒子

        https://www.kenney.nl/assets/particle-pack

        需要Float32Array 获取数组长度 ，由于一个粒子是 x,y,z 数据 因此在数组中占三位

        如果要500个粒子 则 要 500 * 3

        const position = new Float32Array(count * 3)

        这个时候position 就是相当于500 个 粒子的位置信息

        position[i] = Math.random()  // 设置粒子位置的随机

        // 和上一节对比 都是设置属性 位置， 创建缓冲属性 设置位置数据 和 3

        particleGeometry.setAttribute(

            'position',

            new THREE.BufferAttribute(position,3)

        )

        添加纹理

        可以看到粒子生成 ，但是仔细看背景 是有黑色的背景 要解决

        解决方法：

            aplhaMap 属性 设置

            1. aplhaTest = 0.01 // 阿尔法 测试

                但是不是很完美

            2. depthTest = false // 深度测试  它会判断当前粒子前方是否有东西 有测渲染 不然不渲染

             会有问题 ，有其他的颜色 会很糟糕

            3.depthWrite = false // 深度缓冲区

                当绘画这些东西时候 他会判断 在这个物体前还是后 ，会有这些信息

                可以高度网格 不要在深度缓冲区进行绘画

            前三个对于性能不会影响

           

            4.blending 混合  对于性能有点影响

                depthWrite = false

                blending = THREE.AdditiveBlending

       

        设置粒子颜色不同

            1.color 存储不同颜色信息

            2.vertexColors = true  // 通知

            但是particleMaterial.color = new THREE.Color('#ff88cc') 会影响设置的颜色 。有一种混合色的柑橘

       

        动画效果

            控制每个粒子如何做

            关键在于存储的粒子信息  particleGeometry。attribute.position.array

            particleGeometry.attributes.position.needsUpdate = true

            自定义着色器

                更好的性能

            上述进行动画 会有更大的性能消耗 不好

            如果想要正确 必须创建自己的材质 ，创建自己的着色器

一、代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'lil-gui'
import { Mesh } from 'three'


/**
 * Base
 */
// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader()
const particlesTexture = textureLoader.load('/textures/particles/2.png')

/* 
*   Particles 粒子
*/
const particleGeometry = new THREE.BufferGeometry(1,32,32)
const count = 50000

const position = new Float32Array(count * 3)
const color = new Float32Array(count * 3)
for(let i=0;i<count * 3;i++){
    position[i] = (Math.random() - 0.5) * 10
    color[i] = Math.random() 
}
particleGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(position,3)
)
particleGeometry.setAttribute(
    'color',
    new THREE.BufferAttribute(color,3)
)

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true
particleMaterial.color = new THREE.Color('#ff88cc')
// particleMaterial.map = particlesTexture

particleMaterial.transparent = true
particleMaterial.alphaMap = particlesTexture
// particleMaterial.alphaTest = 0.01
// particleMaterial.depthTest = false
particleMaterial.depthWrite = false
particleMaterial.blending = THREE.AdditiveBlending
particleMaterial.vertexColors = true

const particles = new THREE.Points(
    particleGeometry,
    particleMaterial
)

scene.add(particles)

/* 
    cube
*/
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshBasicMaterial()
)
// scene.add(cube)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 3
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update particles
    // particles.rotation.y = elapsedTime * 0.2

    for(let i =0 ;i<count ; i++){
        const i3 = i * 3

        const x = particleGeometry.attributes.position.array[i3] // 粒子 x的位置


        particleGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
    }
    particleGeometry.attributes.position.needsUpdate = true // 告诉three.js设置好了 要更新

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

二、知识点

1.PointsMaterial 点材质

size 大小 ， sizeAttenuation 设置这个可以 可以实现缩放粒子 近处的大 远处小，设置false 远近都一样大

particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true

设置颜色和纹理

particleMaterial.color = new THREE.Color('#ff88cc')
particleMaterial.map = particlesTexture

为什么可以生成多个粒子

Float32Array  获取数组长度 由于一个粒子是 x,y,z 数据 因此在数组中占三位

如果要500个粒子 则 要 500 * 3

其中变量position 的位置 可以设置 然后 每三个数组元素组成一个粒子

然后就需要设置几何体的属性 如 颜色 和 位置

particleGeometry.setAttribute(

    'position',

    new THREE.BufferAttribute(position,3)

)

particleGeometry.setAttribute(

    'color',

    new THREE.BufferAttribute(color,3)

)

同样生成不同颜色的粒子也是这样

不过要设置vertexColors = true 通知 不然不会渲染上去

const particleGeometry = new THREE.BufferGeometry(1,32,32)
const count = 50000

const position = new Float32Array(count * 3)
const color = new Float32Array(count * 3)
for(let i=0;i<count * 3;i++){
    position[i] = (Math.random() - 0.5) * 10
    color[i] = Math.random() 
}
particleGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(position,3)
)
particleGeometry.setAttribute(
    'color',
    new THREE.BufferAttribute(color,3)
)

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true
particleMaterial.color = new THREE.Color('#ff88cc') // 这里颜色可以去掉 不去掉会影响设置的颜色 ，混合色
particleMaterial.vertexColors = true

让我们再把纹理添加上

仔细看有背景 纯黑色的 ，但是我想要去掉，因为这样效果不是很好

这个时候有很多方法可以去除

解决方法

1.aplhaMap  将纹理设置成阿尔法，同时设置alphaTest   

const particleGeometry = new THREE.BufferGeometry(1,32,32)
const count = 50000

const position = new Float32Array(count * 3)
const color = new Float32Array(count * 3)
for(let i=0;i<count * 3;i++){
    position[i] = (Math.random() - 0.5) * 10
    color[i] = Math.random() 
}
particleGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(position,3)
)
particleGeometry.setAttribute(
    'color',
    new THREE.BufferAttribute(color,3)
)

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true
particleMaterial.color = new THREE.Color('#ff88cc')


particleMaterial.transparent = true
particleMaterial.alphaMap = particlesTexture
particleMaterial.alphaTest = 0.01  // 属于缩小 边缘范围 得到类似的效果

 particleMaterial.vertexColors = true

const particles = new THREE.Points(
    particleGeometry,
    particleMaterial
)

scene.add(particles)

效果不是很好 仔细看圆圈重叠处有黑色的边界。

2.同上 不过将阿尔法测试属性 换成 depthTest = false 

particleMaterial.depthTest = false // 深度测试  它会判断当前粒子前方是否有东西 有测渲染 不然不渲染

看起来边缘什么的还可以 ，不过在其他颜色会有问题

可以看到颜色有种透视的感觉！

3.depthWrite 

因此我们可以设置另一个属性深度缓冲区，可以看到在白色后面的颜色没有显示

const particleGeometry = new THREE.BufferGeometry(1,32,32)
const count = 50000

const position = new Float32Array(count * 3)
const color = new Float32Array(count * 3)
for(let i=0;i<count * 3;i++){
    position[i] = (Math.random() - 0.5) * 10
    color[i] = Math.random() 
}
particleGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(position,3)
)
particleGeometry.setAttribute(
    'color',
    new THREE.BufferAttribute(color,3)
)

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true
particleMaterial.color = new THREE.Color('#ff88cc')  // 这里可以去掉

particleMaterial.transparent = true
particleMaterial.alphaMap = particlesTexture

/*

  当绘画这些东西时候 他会判断 在这个物体前还是后 ，会有这些信息
                可以高度网格 不要在深度缓冲区进行绘画
*/
particleMaterial.depthWrite = false  // 这里 


const particles = new THREE.Points(
    particleGeometry,
    particleMaterial
)

scene.add(particles)

     前三个对于性能不会影响

4.blending

const particleGeometry = new THREE.BufferGeometry(1,32,32)
const count = 50000

const position = new Float32Array(count * 3)
const color = new Float32Array(count * 3)
for(let i=0;i<count * 3;i++){
    position[i] = (Math.random() - 0.5) * 10
    color[i] = Math.random() 
}
particleGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(position,3)
)
particleGeometry.setAttribute(
    'color',
    new THREE.BufferAttribute(color,3)
)

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.1
particleMaterial.sizeAttenuation = true
particleMaterial.color = new THREE.Color('#ff88cc')

particleMaterial.transparent = true
particleMaterial.alphaMap = particlesTexture

particleMaterial.depthWrite = false  // 这里 结合depthWrite 使用 效果完美 性能可能有问题
particleMaterial.blending = THREE.AdditiveBlending
particleMaterial.vertexColors = true

const particles = new THREE.Points(
    particleGeometry,
    particleMaterial
)

scene.add(particles)

2.实现波浪

下面代码主要是数学，头大了！ 结合js 和中设置属性的方法

  const elapsedTime = clock.getElapsedTime()

    // Update particles
    particles.rotation.y = elapsedTime * 0.2

    for(let i =0 ;i<count ; i++){
        const i3 = i * 3

        const x = particleGeometry.attributes.position.array[i3] // 粒子 x的位置

           //让x的位置随时间上下波动
        particleGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
    }
    particleGeometry.attributes.position.needsUpdate = true // 告诉three.js设置好了 要更新

波动

总结

点点点。。。

蚕食我的耐心
关注
  • 9
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ShaderParticleEngine:适用于THREE.js的GLSL重型粒子引擎。 最初基于Stemkoski的强大粒子引擎（请参阅自述文件）
05-08
着色器粒子引擎v1.0.6 概述 该库的目的是尽可能简化使用THREE.js和WebGL创建粒子效果的过程。 繁重的工作由GPU完成，从而释放了CPU周期。 通过首先创建SPE.Group的实例来创建发射器。 在该组中应用了ShaderMaterial设置，并且设置了添加到该组的所有发射器的纹理。 可以创建多个组，但是如果效率是高优先级，则应创建尽可能少的组。 该小组负责将发射器数据上传到GPU进行仿真和渲染，因此发送的数据块越少越好。 创建组后，可以将SPE.Emitter实例添加到其中。 每个发射器可以有自己的行为和外观。 有关组和发射器的更多信息，请参见下面的文档： 例子可以在找到 依存关系 THREE.js r72 +（最好是r81 +）。 变更日志 完整的变更日志可以在看到。 可以在找到迁移日志。 文献资料 实际的文档比该库的先前版本有了很大的改进！ 我将致力于制作一些教
jQuery three.js CSS3雪花飘落动画效果.zip
07-11
代码片段： var particle = particles[i]; // 滚动到楼层模块，减少雪花 （自定义） if ($(window).scrollTop() < 1000) { particle.scale.x = particle.scale.y = 1; } else { if (i > particles.length / 5 * 3) { particle.scale.x = particle.scale.y = 0; } else { particle.scale.x = particle.scale.y = 0.8; } }
three.js学习笔记(七)——粒子
hongsir的博客
12-06 2870
粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的。 创建粒子 创建粒子和创建网格很像，不同的是粒子使用的材质是点材质PointsMaterial和点实例Points。 下面代码为例，当实例化球缓冲几何体时，该几何体的每个顶点都将成为粒子。 /** * 粒子 */ const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32) const
three.js学习笔记（1）如何创建一个场景
weixin_39531576的博客
08-28 345
three.js，显而易见，three即3D，js为JavaScript，如果要建立一个3d效果的页面，那么three.js是一个很好地选择，如下图 three.js的简单模型如下图，基础要素如下，包含虚拟场景，虚拟相机，执行渲染操作，投影 直接上代码 这样就可以创建一个基础的3d场景了 ...
【Three.js】第十八章 Particles 粒子
m0_68324632的博客
01-17 1335
粒子。它们非常受欢迎，可用于实现各种效果，如星星、烟、雨、灰尘、火和许多其他东西。粒子的好处是您可以在屏幕上以合理的帧速率显示数十万个粒子。缺点是每个粒子都由一个始终面向相机的平面（两个三角形）组成。
three.js制作星空
ephemeral_x的博客
06-06 1946
three.js制作星空，很简单。来了解一下 three.js 吧
【Three.js】雪花圣诞树
u010726809的博客
12-21 2445
快到圣诞节了，用three.js做个简易版圣诞树送给女朋友。
使用three.js创建粒子火焰效果
凡事有果必有因
05-23 8251
在线地址
three.js之粒子和粒子系统(vue中使用three.js39)
点燃火柴的博客
12-10 953
粒子介绍和使用1.粒子介绍2.如何创建粒子3.demo效果4.demo代码 1.粒子介绍 粒子（particle）可以用来创建出很多小物体，这些小物体可以用来模拟雨滴、雪花和火焰。也可以将某个单一几何体渲染成一组粒子，分别对它们进行控制，达到想要的效果。 2.如何创建粒子 创建粒子的方法很简单，如下 const material = new THREE.SpriteMaterial();//创建粒子材质 const sprite = new THREE.Sprite(material);//创建粒子 thi
Three 之 three.js使用BufferGeometry (CPU) 根据简单粒子particle运动效果代码工程
09-19
本节介绍， three.js （webgl） 中，使用 BufferGeometry ，添加位置和移动方向数据，结合 shader，简单实现类似 particle 的粒子运动效果，这里主要的逻辑在js脚本，而非 shader 中，所以这里算是 cpu 中，使用...
Learning Three.js： The Javascript 3D Library for WebGL
03-08
Create and animate stunning 3D graphics using the open source Three.js JavaScript library Overview Create and animate beautiful 3D graphics directly in the browser using JavaScript without the need ...
Three 之 three.js使用BufferGeometry (GPU) 根据简单粒子particle运动效果代码工程
09-21
本节介绍， three.js （webgl） 中，使用 BufferGeometry ，添加位置和移动方向数据，结合 shader，简单实现类似 particle 的粒子运动效果，这里主要的逻辑在js脚本，而非 shader 中，所以这里算是 cpu 中，使用...
three.js粒子系统-通过加载纹理贴图实现雨滴特效(vue中使用three.js44)
点燃火柴的博客
12-17 1592
通过纹理导入实现雨滴特效1.VUE中纹理导入过程1.1纹理图片存放路径1.2获取环境变量中的BASE_URL1.3通过THREE.TextureLoader加载纹理贴图2.创建雨滴特效2.1用加载的纹理贴图创建雨滴2.2 实现下雨特效动画3.demo效果4.demo代码 1.VUE中纹理导入过程 1.1纹理图片存放路径 vue中导入时默认的public下，所以要使用的纹理图片需要放在该路径下，如下图images文件夹下的raindrop-3.png就是我们要使用的纹理图片 1.2获取环境变量中的BASE_
学习整理 docker
wonder_dog的博客
05-31 316
nexus。
Diffusers代码学习-链式Inpainting
duhaining1976的博客
06-03 1015
AIGC研究及应用系列
Elixir学习笔记——二进制、字符串和字符列表
最新发布
chenxupest的专栏
06-04 664
在“基本类型”中，我们学习了一些关于字符串的知识，并使用 is_binary/1 函数进行检查："hello"true在本章中，我们将明确二进制到底是什么、它们与字符串的关系以及 Elixir 中单引号值“like this”的含义。虽然字符串是计算机语言中最常见的数据类型之一，但它们却非常复杂，经常被误解。要理解 Elixir 中的字符串，我们必须了解 Unicode 和字符编码，特别是 UTF-8 编码。
超大功率光伏并网逆变器学习(三相) 一
我的博客
05-31 377
1.超大功率用的IGBT开关频率通常很低,比如6KHz。2.线电压和相电压的关系。
视觉语言大模型llava学习
csuzhaoqinghui的博客
05-31 401
ViLBERT（Vision-and-Language BERT）是一个专为处理视觉和语言信息而设计的模型，通过双流结构分别处理图像和文本输入，然后在顶层通过共注意力机制（Co-Attention）将两种信息结合起来。与ViLBERT类似，它使用单一的Transformer模型来同时处理视觉和语言信息，通过将图像的区域特征与相应的文字描述一起编码，实现了对图像和文本的联合理解。视觉语言模型的不断发展正在推动人工智能领域向更高层次的理解和创造能力迈进，为创建更智能、更互动的系统打开新的可能性。
three.js例子
07-27
当然，我可以为您提供一些基于Three.js的例子： 1. 立方体（Cube）：这是一个基本的 Three.js 例子，它展示了如何创建和渲染一个简单的立方体。您可以在官方文档中找到这个例子：https://threejs.org/examples/#webgl_geometry_cube 2. 物理引擎（Physics Engine）：这个例子展示了如何使用 Three.js 结合 Ammo.js 物理引擎创建具有物理效果的场景。您可以在以下链接找到这个例子：https://threejs.org/examples/#webgl_physics_ammo_break 3. 粒子系统（Particle System）：这个例子展示了如何使用 Three.js 创建和控制粒子系统，包括粒子的位置、颜色和速度等属性。您可以在以下链接找到这个例子：https://threejs.org/examples/#webgl_particles_sprites 4. 阴影效果（Shadow Effects）：这个例子展示了如何在 Three.js 中实现阴影效果，包括平行光源和阴影投射。您可以在以下链接找到这个例子：https://threejs.org/examples/#webgl_shadowmap 这些只是一小部分 Three.js 的例子，您可以在官方文档的示例页面上找到更多的例子和详细的代码解释。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值