shader02-仿星空粒子

需要电子档书籍或者源码可以Q群：828202939 希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！

玩游戏的时候我们或多或少会发现那些特效很漂亮！很多产品里面也喜欢用粒子效果！

下面群主分享一篇去年写好的仿星空的粒子案例！

主要讲shader与geometry.attributes的一些知识点

录屏：

代码：

<html><head><title>shader02-仿星空粒子</title><style>body {background-color: #000;margin: 0px;overflow: hidden;}#WebGL {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 999;}</style>
</head><body><div id="WebGL"></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script src="../../../build/three.js"></script><script src="../../js/controls/OrbitControls.js"></script><script type="x-shader/x-vertex" id="vertexshader">attribute float size;varying vec3 vColor;void main() {vColor = color;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = size * ( 300.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}</script><script type="x-shader/x-fragment" id="fragmentshader">uniform sampler2D texture;varying vec3 vColor;void main() {gl_FragColor = vec4( vColor, 1.0 );gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );}</script><script>'use strict';var container, camera, scene, renderer, material, animate, controls; //常用变量var  mesh; //自定义对象变量var particleSystem, uniforms, geometry;var particles = 200;var target = new THREE.Vector3(0, 30, 0);var webGLW = $('#WebGL').width();var webGLH = $('#WebGL').height();init();animate();function init() {container = document.getElementById('WebGL');scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 4000);camera.position.set(0, 60, 300);camera.lookAt(target);addSperite();rendererScene(); //场景渲染OrbitControls(camera, renderer); window.addEventListener('resize', onWindowResize, false); //监听屏幕变化}function plane() {// 地面let grid_mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({color: 0x999999,depthWrite: false}));grid_mesh.rotation.x = -Math.PI / 2;grid_mesh.receiveShadow = true;scene.add(grid_mesh);var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);grid.material.opacity = 0.2;grid.material.transparent = true;scene.add(grid);}function addSperite(params) {uniforms = {texture: {value: new THREE.TextureLoader().load("../../textures/sprites/2.png")}};var shaderMaterial = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: document.getElementById('vertexshader').textContent,fragmentShader: document.getElementById('fragmentshader').textContent,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});var radius = 200;geometry = new THREE.BufferGeometry();var positions = [];var colors = [];var sizes = [];var color = new THREE.Color();for (var i = 0; i < particles; i++) {//范围内位置随机positions.push((Math.random() * 2 - 1) * radius);positions.push((Math.random() * 2 - 1) * radius);positions.push((Math.random() * 2 - 1) * radius);// 随机设置粒子的颜色color.setHSL(i / particles, 1.0, 0.5);colors.push(color.r, color.g, color.b);sizes.push(10);;}geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));geometry.addAttribute('size', new THREE.Float32BufferAttribute(sizes, 1).setDynamic(true));particleSystem = new THREE.Points(geometry, shaderMaterial);scene.add(particleSystem);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function rendererScene() {renderer = new THREE.WebGLRenderer({antialias: true,});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.gammaInput = true;renderer.gammaOutput = true;container.appendChild(renderer.domElement);}function OrbitControls(camera, renderer) {//OrbitControls控件操作模块controls = new THREE.OrbitControls(camera, renderer.domElement);controls.target = target; //控制的target// controls.autoRotate = true; //是否自动旋转controls.autoRotateSpeed = 0.5; //自动旋转速度，正比}function animate() {requestAnimationFrame(animate);var time = Date.now() * 0.004;// 让粒子旋转，看起来好看一点particleSystem.rotation.x  = particleSystem.rotation.y = 0.001 * time;var sizes = geometry.attributes.size.array;//sin周期，改变粒子的大小，让粒子看起来有闪烁的效果，当然，效果并没闪烁的好//后期会发布发光渐变的粒子for (var i = 0; i < particles; i++) {sizes[i] = 10 * (1 + Math.sin(0.5 * i + time));}geometry.attributes.size.needsUpdate = true;render();}function render() {renderer.render(scene, camera);}</script>
</body></html>

shader02-仿星空粒子相关推荐

unity怎么制作云飘动_Unity 如何制作星空粒子效果?
本经验介绍在Unity游戏引擎中使用Particle System,如何使用自带资源,快速制作星空的粒子特效. 工具/原料 Unity 方法/步骤1: 首先,新建一个场景,如果有自己的天空盒资源的话, ...
Unity 如何制作星空粒子效果?
本经验介绍在Unity游戏引擎中使用Particle System,如何使用自带资源,快速制作星空的粒子特效. 工具/原料 Unity 方法/步骤1: 首先,新建一个场景,如果有自己的天空盒资源的话, ...
html5 3d引擎星空,使用3D引擎threeJS实现星空粒子移动效果
three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等 ...
html5 3d引擎星空,使用3D引擎threeJS实现星空粒子移动
three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等 ...
制作放射冲击星空粒子海报图片的PS教程
今天刚刚做好一个小效果,方法不难但是效果很棒,素材就不提供了,因为这个素材非常好找,也不难,大家找到一张高清图片,最好层次分明,色彩饱和度高些,不同的图片最后的效果差异很大. 效果图: 操作步骤如下: ...
vue好看的星空粒子背景
效果图完整代码 xk.vue <template><div class="course"><div class="stars"& ...
android+粒子星空动画,HTML5 Canvas星空粒子动画压力测试
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var mycode = function() { 'use strict'; var testTicker ...
4月24日云栖精选夜读 | 阿里云POLARDB如何助力轻松筹打造5亿用户信赖的大病筹款平台？...
[点击订阅云栖夜读周刊] 轻松筹首创了"大病救助"模式,帮助了众多病患在第一时间解決了医疗资金等问题,为了从源头解决了医疗资金问题.而在轻松筹这样全球5.5亿用户信赖的大病筹款平台 ...
【千纸诗书】—— PHP/MySQL二手书网站后台开发之功能实现
[千纸诗书]-- PHP/MySQL二手书网站后台开发之功能实现前言:前一篇温习了网站开发需要掌握的基础知识,这一篇重点梳理一下各个功能模块的[详细设计与实现].项目github地址:https:/ ...
JS实现最美的3D宇宙特效
好久没更新文章了.算下来大概有五个多月了吧.之前本人更新的比较频繁是因为疫情在家,不能出门,所以有充足的时间来更新文章.之后随着疫情越来越好转,本人就出去找工作了,毕竟本人的经济条件不允许本人闲着,哈 ...

shader02-仿星空粒子

shader02-仿星空粒子相关推荐

最新文章

热门文章