devbox
数据可视化灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Three 之 three.js （webgl）使用BufferGeometry (CPU) 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果_更新 buffergeometry中的position

作者：数据可视化灵魂 | 2024-02-04 14:06:58

赞

踩

更新 buffergeometry中的position

Three 之 three.js （webgl）使用 BufferGeometry 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果

目录

Three 之 three.js （webgl）使用 BufferGeometry 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

 六、关键代码

七、源码

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three.js （webgl） 中，使用 BufferGeometry ，添加位置和移动方向数据，结合 shader，简单实现类似 particle 的粒子运动效果，这里主要的逻辑在js脚本，而非 shader 中，所以这里算是 cpu 中，使用BufferGeometry 实现简单粒子效果，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

BufferGeometry 官网相关介绍：three.js docs

BufferGeometry 官网使用案例：three.js examples

二、实现原理

1、把位置和移动向量等数据，首先会重新把数据整理成两波数据，以便于模拟粒子一波波出现的效果

2、然后把数据传入给 BufferGeometry 对应的 setAttribute 属性中

3、并结合 ShaderMaterial 控制显示粒子大小旋转等数据显示

4、在 Animation 中结合 Clock 的 time 来控制 BufferGeometry  每个点的移动和 alpha 透明度，从而实现粒子效果的持续生成运动

  1.  // 位置更新
  2.      const positionArray = this.geometry.attributes.position.array;
  3.      const translateArray = this.geometry.attributes.windDirection.array;
  4.       const pointTimeArray = this.geometry.attributes.pointTime.array;
  5.      const ss = 0.03
  6.       for (var i = 0,j=0; i < positionArray.length,j<pointTimeArray.length; i+=3,j++) {
  7.         var useTime = pointTimeArray[j] > 0.1 ? time2 : time;
  8.         // console.log("useTime ", useTime)
  9.         positionArray[i] =
  10.       this.positions[i]+ translateArray[i] * useTime * ss
  11.         positionArray[i+1] = this.positions[i+1]+ translateArray[i+1] * useTime * ss
  12.         positionArray[i+2] = this.positions[i+2]+ translateArray[i+2] * useTime * ss
  13.       }
  14.     this.geometry.attributes.position.needsUpdate = true;
  15.  
  16.     // 更新颜色 Alpha
  17.     const colorArray = this.geometry.attributes.color.array;
  18.     const colorLenght = colorArray.length;
  19.     const halfcolorLenght = colorLenght/2
  20.     for (var i = 0; i < colorLenght; i+=4) {
  21.       if(i < halfcolorLenght){
  22.         if(time < this.maxRecordTime/2){
  23.           colorArray[i+3] = time/this.maxRecordTime *2
  24.         }else if(time > this.maxRecordTime * 2 / 3){
  25.           colorArray[i+3] = (this.maxRecordTime - time)/this.maxRecordTime * 3
  26.         }
  27.       }else{
  28.         if(time2 < this.maxRecordTime/2){
  29.           colorArray[i+3] = time2/this.maxRecordTime * 3
  30.         }else if(time2 > this.maxRecordTime * 2 / 3){
  31.           colorArray[i+3] = (this.maxRecordTime - time2)/this.maxRecordTime * 3
  32.         }
  33.       }
  34.     }
  35.  
  36.     this.geometry.attributes.color.needsUpdate = true;
  37.  
  38. 	// 旋转更新
  39.     const rotAngArray = this.geometry.attributes.rotAngle.array;
  40.     const rotAngLenght = rotAngArray.length;
  41.     for (var i = 0; i < rotAngArray.length; i++) {
  42.       rotAngArray[i] += (Math.random()) * 0.04
  43.     }
  44.      this.geometry.attributes.rotAngle.needsUpdate = true;

三、注意事项

1、这里只进行了两波数据来模拟粒子效果的不断生成效果，可能根据需要自行拓展三波及以上的不断生成效果，达到使用吧

2、这里传入不同 png 图片可以简单实现不同的粒子效果，比如绿叶、红花、雪花、气泡等

3、其中，粒子的大小和颜色、旋转等也能自行控制

四、效果预览

五、实现步骤

1、为了方便学习，这里是基于 Github 代码，进行开发的，大家可以下载官网代码，很多值得学习的案例

GitHub - mrdoob/three.js: JavaScript 3D Library.

gitcode：mirrors / mrdoob / three.js · GitCode

 2、创建 BufferGeometry 模拟粒子效果的脚本，来管理粒子效果的生成

3、在上面的基础上，添加一个 html ，用来实现案例效果，引入相关包 

4、创建基础场景

5、构建 位置、移动向量、粒子大小、颜色、旋转等数据，并传入粒子图片，创建 BufferGeometryCpuParticleEffect

6、完成其他的基础代码编写，运行脚本，效果如下

六、关键代码

1、TestBufferGeometryCpuParticleEffect.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<title>TestBufferGeometryCpuParticleEffect</title>
  5. 		<meta charset="utf-8">
  6. 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. 		<link type="text/css" rel="stylesheet" href="main.css">
  8. 	</head>
  9. 	<body>
  10.  
  11. 		<!-- Import maps polyfill -->
  12. 		<!-- Remove this when import maps will be widely supported -->
  13. 		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  14.  
  15. 		<script type="importmap">
  16. 			{
  17. 				"imports": {
  18. 					"three": "../../../build/three.module.js"
  19. 				}
  20. 			}
  21. 		</script>
  22.  
  23. 		<script type="module">
  24. 			// 引入 three 基础库
  25. 			import * as THREE from 'three';
  26. 			import Stats from '../../jsm/libs/stats.module.js';
  27. 			import { OrbitControls } from './../../jsm/controls/OrbitControls.js';
  28. 			
  29. 			import { BufferGeometryCpuParticleEffect } from './BufferGeometryParticle/BufferGeometryCpuParticleEffect.js'
  30.  
  31. 			let camera, renderer, scene,controls;
  32. 			let object;
  33. 			let stats;
  34. 			let mBufferGeometryCpuParticleEffect;
  35. 			
  36. 			const params = {
  37. 				enableFpsRender: false,
  38. 				enableRightNowRender: false
  39. 			
  40. 			};
  41.  
  42. 			init();
  43. 			animate();
  44.  
  45. 			function init() {
  46.  
  47. 				// 渲染器
  48. 				renderer = new THREE.WebGLRenderer();
  49. 				renderer.setPixelRatio( window.devicePixelRatio );
  50. 				renderer.setSize( window.innerWidth, window.innerHeight );
  51. 				renderer.setClearColor('#cccccc');
  52. 				document.body.appendChild( renderer.domElement );
  53.  
  54. 				// camera
  55. 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  56. 				camera.position.z = 8;
  57.  
  58. 				// 场景
  59. 				scene = new THREE.Scene();
  60.  
  61. 			
  62.  
  63. 				// 添加环境光
  64. 				scene.add( new THREE.AmbientLight( 0x222222 ) );
  65.  
  66. 				// 添加方向光
  67. 				const light = new THREE.DirectionalLight( 0xffffff );
  68. 				light.position.set( 1, 1, 1 );
  69. 				scene.add( light );
  70.  
  71. 				// 窗口尺寸变化监听
  72. 				window.addEventListener( 'resize', onWindowResize );
  73. 				
  74. 				
  75. 				
  76. 				stats = new Stats();
  77. 				document.body.appendChild( stats.dom );
  78.  
  79. 				controls = new OrbitControls( camera, renderer.domElement );
  80. 	
  81. 				createParticle(scene)
  82. 			}
  83. 			
  84. 			function createParticle(scene){
  85. 				const pointCount = 30
  86. 				const positions = []	// 点的位置
  87. 				const colors = []	// 点的颜色
  88. 				const moveDirs = []	// 点的运动方向
  89. 				const sizes = [];	// 点的大小
  90. 				const rotAngles = [];	// 点的方向
  91. 				
  92. 				for (var i = 0; i < pointCount; i++) {
  93. 					positions[3 * i] = Math.random() *4-2
  94. 					positions[3 * i +1] = Math.random() *4-2
  95. 					positions[3 * i+2] = Math.random() *4-2
  96. 				
  97. 					colors[4 * i] = Math.random()*4-2
  98. 					colors[4 * i +1] = Math.random()*4-2
  99. 					colors[4 * i+2] = Math.random()
  100. 					colors[4 * i+3] = 0.0
  101. 				
  102. 					moveDirs[3 * i] = Math.random() *2 -1
  103. 					moveDirs[3 * i +1] = Math.random()*2 -1
  104. 					moveDirs[3 * i+2] = Math.random()*2 -1
  105. 					
  106. 					sizes[i] = Math.random() * 1.0
  107. 					
  108. 					rotAngles[i] = Math.random() * Math.PI
  109. 				}
  110. 				
  111. 				mBufferGeometryCpuParticleEffect = new BufferGeometryCpuParticleEffect(positions,moveDirs,colors,sizes,rotAngles,'textures/left.png')
  112. 				mBufferGeometryCpuParticleEffect.addWindGeometry(scene)
  113. 			}
  114.  
  115. 			function onWindowResize() {
  116.  
  117. 				// camera 更新 aspect
  118. 				camera.aspect = window.innerWidth / window.innerHeight;
  119. 				camera.updateProjectionMatrix();
  120.  
  121. 				// 渲染器更新大小
  122. 				renderer.setSize( window.innerWidth, window.innerHeight );
  123.  
  124. 			}
  125. 			
  126.  
  127. 			function animate() {
  128.  
  129. 				requestAnimationFrame( animate );
  130.  
  131. 				renderer.render( scene, camera );
  132. 				mBufferGeometryCpuParticleEffect.instancingGeometryUpdate()
  133. 				stats.update();
  134. 				controls.update()
  135. 			}
  136.  
  137. 		</script>
  138. 	</body>
  139. </html>

2、BufferGeometryCpuParticleEffect

  1. import {
  2.   BufferGeometry,
  3.   InstancedBufferAttribute,
  4.   Mesh,
  5.   CircleGeometry,
  6.   ShaderMaterial,
  7.   NormalBlending,
  8.   DoubleSide,
  9.   Clock,
  10.   Points,
  11.   Float32BufferAttribute,TextureLoader,Color,DynamicDrawUsage,Object3D
  12.  
  13. } from 'three'
  14.  
  15.  
  16. export class BufferGeometryCpuParticleEffect {
  17. 	/**
  18. 	 * @param {Object} positions
  19. 	 * @param {Object} moveDirs
  20. 	 * @param {Object} colors
  21. 	 * @param {Object} pngUrl
  22. 	 */
  23. 	constructor(positions,moveDirs,colors,sizes,rotAngles,pngUrl){
  24.  
  25. 		this.oriPositions = positions
  26. 		this.oriMoveDirs = moveDirs
  27. 		this.oriColors = colors
  28. 		this.oriSizes = sizes
  29. 		this.oriRotAngles = rotAngles
  30. 		this.pngUrl = pngUrl
  31.  
  32. 		this.mInstancedBufferMesh = null
  33. 		this.shaderMaterial = null
  34. 		this.clock = null
  35.  
  36. 		// 是否被对比占用（比较的时候用来缓存）
  37. 		this.mIsCompUsed = false
  38.  
  39. 		this.recordTimeScale = 6.0// 6.0 //时间记录间隔
  40. 		this.maxRecordTime = 10.0 * Math.PI// 4.0 * Math.PI // 最大时间间隔
  41. 		this.halfMaxTime = this.maxRecordTime / 2.0
  42.  
  43. 		this.isMeshVisible = false
  44.  
  45. 		this.uniforms = null
  46. 		this.geometry = null
  47.   }
  48.   /**
  49.    * 风速效果
  50.    * @param scene
  51.    * @returns {null}
  52.    */
  53.   addWindGeometry(
  54.     scene
  55.   ){
  56.  
  57.     this.uniforms = {
  58.  
  59.     	pointTexture: { value: new TextureLoader().load( this.pngUrl ) },
  60.       time:{value: 0.0},
  61.       timeTwo:{value: 0.0},
  62.       maxTime: { value: this.maxRecordTime },
  63.     };
  64.  
  65. 	const pointCount = this.oriPositions.length / 3
  66.     this.positions = []	// 点的位置
  67.     const colors = []	// 点的颜色
  68.     const translateArray = []	// 点的运动方向
  69.     const pointTime = []	// 点的波数
  70.     const sizes = [];	// 点的大小
  71.     const rotAngles = [];	// 点的方向
  72.  
  73. 	const createPointTimeParticel = (n)=>{
  74. 		for (var i = 0; i < pointCount; i++) {
  75. 			this.positions.push(
  76. 				this.oriPositions[3*i],
  77. 				this.oriPositions[3*i+1],
  78. 				this.oriPositions[3*i+2],
  79. 			)
  80.  
  81. 			colors.push(
  82. 				this.oriColors[4*i],
  83. 				this.oriColors[4*i+1],
  84. 				this.oriColors[4*i+2],
  85. 				this.oriColors[4*i+3],
  86. 			)
  87.  
  88. 			translateArray.push(
  89. 				this.oriMoveDirs[3*i],
  90. 				this.oriMoveDirs[3*i+1],
  91. 				this.oriMoveDirs[3*i+2],
  92. 			)
  93.  
  94. 			sizes.push(
  95. 				this.oriSizes[i]
  96. 			)
  97.  
  98. 			rotAngles.push(
  99. 				this.oriRotAngles[i]
  100. 			)
  101.  
  102. 			pointTime.push(n)
  103. 		}
  104.  
  105. 	}
  106.  
  107. 	createPointTimeParticel(0.0)
  108. 	createPointTimeParticel(1.0)
  109.  
  110.     const shaderMaterial = new ShaderMaterial( {
  111.  
  112. 					uniforms: this.uniforms,
  113. 					vertexShader: `
  115.           attribute float size;
  116.           attribute vec4 windDirection;
  117.           attribute float pointTime;
  118.           attribute float rotAngle;
  120.           varying vec4 vColor;
  121.           varying float vRotAngle;
  123.           void main() {
  125.           	vColor = color;
  126.             vRotAngle = rotAngle;
  128.           	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  130.           	gl_PointSize = size * ( 300.0 / - mvPosition.z );
  132.           	gl_Position = projectionMatrix * mvPosition;
  134.           }
  135.           `,
  136. 					fragmentShader: `
  137.             uniform sampler2D pointTexture;
  139.             varying vec4 vColor;
  140.             varying float vRotAngle;
  142.             void main() {
  144.             	gl_FragColor = vec4( vColor);
  145.               // gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
  147.             // uv 旋转
  148.              vec2 uv = gl_PointCoord.xy - vec2(0.5, 0.5);
  149.              float angle = vRotAngle;
  150.               uv = vec2(uv.x *cos(angle) - uv.y * sin(angle),uv.x *sin(angle) + uv.y*cos(angle));
  151.               uv += vec2(0.5, 0.5);
  152.               gl_FragColor = gl_FragColor * texture2D( pointTexture, uv );
  154.             }
  155.           `,
  156.  
  157. 					blending: NormalBlending,
  158. 					depthTest: false,
  159. 					transparent: true,
  160. 					vertexColors: true,
  161.  
  162. 				} );
  163.  
  164. 				this.geometry = new BufferGeometry();
  165.  
  166. 				this.geometry.setAttribute( 'position', new Float32BufferAttribute(
  167.         this.positions, 3 ).setUsage( DynamicDrawUsage ) );
  168. 				this.geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 4 ).setUsage( DynamicDrawUsage ) );
  169. 				this.geometry.setAttribute( 'size', new Float32BufferAttribute( sizes, 1 ).setUsage( DynamicDrawUsage ) );
  170.         this.geometry.setAttribute(
  171.           'windDirection',
  172.           new InstancedBufferAttribute(new Float32Array(translateArray), 3)
  173.         )
  174.         this.geometry.setAttribute(
  175.           'pointTime',
  176.           new InstancedBufferAttribute(new Float32Array(pointTime), 1)
  177.         )
  178.  
  179.         this.geometry.setAttribute(
  180.           'rotAngle',
  181.           new Float32BufferAttribute(new Float32Array(rotAngles), 1).setUsage( DynamicDrawUsage )
  182.         )
  183.  
  184.     var particleSystem = new Points( this.geometry, shaderMaterial );
  185.     this.mInstancedBufferMesh = particleSystem
  186.     scene.add( particleSystem );
  187.     if (this.clock == null) {
  188.       this.clock = new Clock()
  189.     }
  190.     this.timeRecord = this.clock.getElapsedTime() * this.recordTimeScale //第一波风速时间记录
  191.     this.timeRecord2 = 0.0 //第二波风速时间记录
  192.  
  193.     this.shaderMaterial = shaderMaterial
  194.     return this.mInstancedBufferMesh
  195.   }
  196.  
  197.   instancingGeometryUpdate(){
  198.       if(this.clock === null){
  199.         return
  200.       }
  201.  
  202.  
  203.       if (this.mInstancedBufferMesh != null && this.shaderMaterial != null) {
  204.  
  205.         if(this.mInstancedBufferMesh.visible === false ){
  206.  
  207.           return
  208.         }
  209.         if( this.isMeshVisible === false){
  210.           this.timeRecord = this.clock.getElapsedTime() * this.recordTimeScale //第一波风速时间记录
  211.           this.timeRecord2 = 0.0 //第二波风速时间记录
  212.           this.startTime2 = false
  213.           this.isMeshVisible = true
  214.         }
  215.  
  216.         const current = this.clock.getElapsedTime() * this.recordTimeScale
  217.         const time = current - this.timeRecord
  218.  
  219.         if (!this.startTime2 && time > this.halfMaxTime) {
  220.           this.startTime2 = true
  221.           this.timeRecord2 = this.timeRecord + this.halfMaxTime
  222.         }
  223.         const time2 = current - this.timeRecord2
  224.         if (time > this.maxRecordTime) {
  225.           this.timeRecord = current
  226.  
  227.         }
  228.         if (time2 > this.maxRecordTime) {
  229.           this.timeRecord2 = this.timeRecord + this.halfMaxTime
  230.  
  231.         }
  232.  
  233.         this.shaderMaterial.uniforms['time'].value = time
  234.  
  235.         if (this.startTime2) {
  236.           this.shaderMaterial.uniforms['timeTwo'].value = time2
  237.         }
  238.  
  239.         this.updatePostionAndColorAlpha(time,time2)
  240.       }
  241.   }
  242.  
  243. 	/**
  244. 	 * 更新对应波数的粒子
  245. 	 * @param {Object} time
  246. 	 * @param {Object} time2
  247. 	 */
  248.   updatePostionAndColorAlpha(time,time2){
  249.     // 位置更新
  250.      const positionArray = this.geometry.attributes.position.array;
  251.      const translateArray = this.geometry.attributes.windDirection.array;
  252.       const pointTimeArray = this.geometry.attributes.pointTime.array;
  253.      const ss = 0.03
  254.       for (var i = 0,j=0; i < positionArray.length,j<pointTimeArray.length; i+=3,j++) {
  255.         var useTime = pointTimeArray[j] > 0.1 ? time2 : time;
  256.         // console.log("useTime ", useTime)
  257.         positionArray[i] =
  258.       this.positions[i]+ translateArray[i] * useTime * ss
  259.         positionArray[i+1] = this.positions[i+1]+ translateArray[i+1] * useTime * ss
  260.         positionArray[i+2] = this.positions[i+2]+ translateArray[i+2] * useTime * ss
  261.       }
  262.     this.geometry.attributes.position.needsUpdate = true;
  263.  
  264.     // 更新颜色
  265.     const colorArray = this.geometry.attributes.color.array;
  266.     const colorLenght = colorArray.length;
  267.     const halfcolorLenght = colorLenght/2
  268.     for (var i = 0; i < colorLenght; i+=4) {
  269.       if(i < halfcolorLenght){
  270.         if(time < this.maxRecordTime/2){
  271.           colorArray[i+3] = time/this.maxRecordTime *2
  272.         }else if(time > this.maxRecordTime * 2 / 3){
  273.           colorArray[i+3] = (this.maxRecordTime - time)/this.maxRecordTime * 3
  274.         }
  275.       }else{
  276.         if(time2 < this.maxRecordTime/2){
  277.           colorArray[i+3] = time2/this.maxRecordTime * 3
  278.         }else if(time2 > this.maxRecordTime * 2 / 3){
  279.           colorArray[i+3] = (this.maxRecordTime - time2)/this.maxRecordTime * 3
  280.         }
  281.       }
  282.     }
  283.  
  284.     this.geometry.attributes.color.needsUpdate = true;
  285.  
  286. 	// 旋转更新
  287.     const rotAngArray = this.geometry.attributes.rotAngle.array;
  288.     const rotAngLenght = rotAngArray.length;
  289.     for (var i = 0; i < rotAngArray.length; i++) {
  290.       rotAngArray[i] += (Math.random()) * 0.04
  291.     }
  292.      this.geometry.attributes.rotAngle.needsUpdate = true;
  293.   }
  294. }

七、源码

根据需要可下载工程代码，地址：Three之three.js使用BufferGeometry(CPU)根据简单粒子particle运动效果代码工程

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58936
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号