厦门茶叶公司 网站建设,郑州网站开发招聘,wordpress蜜蜂采集,全球最受欢迎的网站#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.Points简介1.11 ☘️…
⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.Points简介1.11 ☘️THREE.PointCloudMaterial材质 二、使用THREE.Points批量管理粒子1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中使用粒子实现雨滴特效亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.Points简介
当我们大量使用粒子时会很快遇到性能问题导致页面卡顿这是因为每添加一个粒子就是一个模型因为每个粒子对象分别由THREE.js进行管理所以three.js提供了另一种方式来处理大量粒子那就是使用THREE.Points。通过THREE.Pointsthree.js不再需要管理大量的单个粒子对象而只需管理THREE.Points实例即可。 创建方法 var cloud new THREE.Points(geom, material); geomTHREE.Geometry对象用于创建粒子对象 materialTHREE.PointCloudMaterial 粒子云材质
1.11 ☘️THREE.PointCloudMaterial材质
概念 设置所有粒子的大小颜色顶点颜色透明度是否根据相机距离的远近改变大小等属性。 var material new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff}); 属性 color PointCloud中所有的粒子的颜色都相同除非设置了vertexColors且该几何体的colors属性不为空才会使用colors颜色否则都使用该属性。 map在粒子上应用某种材质。 size粒子的大小。 sizeAnnutationfalse无论相机的位置所有的粒子大小一致true离相机近的粒子更大一些离相机越远越小。 vetexColorstrue且该几何体的colors属性有值则该粒子会舍弃第一个属性–color而应用该几何体的colors属性的颜色。 opacity粒子透明度。 transparent是否透明。 blending渲染粒子时的融合模式。 fog是否受场景的雾化影响。
二、使用THREE.Points批量管理粒子
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set定义相机方向lookAt。4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.DirectionalLight平行光源设置平行光源位置scene添加平行光源。5、加载几何模型添加THREE.AxesHelper坐标辅助工具scene场景中加入坐标辅助工具。6、加入controls控制加入gui控制定义gui的redraw重绘方法方法中生成15000个随机粒子使用THREE.PointCloudMaterial点云材质该材质使用“rain.png”图片作为纹理创建render下雨动画使用requestAnimationFrame执行下雨动画。加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn31(使用粒子实现雨滴特效)/titlescript srclib/threejs/91/three.js/scriptscript srchttps://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js/scriptscript srchttps://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/script
/head
stylehtml, body {margin: 0;height: 100%;}canvas {display: block;}
/style
body onloaddraw()
/body
scriptvar renderervar initRender function () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(new THREE.Color(0xffffff))renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene () {scene new THREE.Scene()}var cameravar initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200)camera.position.set(0, 20, 100)camera.lookAt(new THREE.Vector3(0, 0, 0))}var lightvar initLight () {scene.add(new THREE.AmbientLight(0x404040))light new THREE.DirectionalLight(0xffffff)light.position.set(1, 1, 1)scene.add(light)}var initModel () {var helper new THREE.AxesHelper(500)scene.add(helper)}var controlsvar initControls () {controls new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping truecontrols.autoRotate false}var gui, cloudvar initGui () {gui {size: 2,transparent: true,opacity: 0.6,vertexColors: true,color: 0xffffff,sizeAttenuation: true,rotateSystem: false,redraw: function () {if (cloud) {scene.remove(cloud)}createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color)//设置是否自动旋转controls.autoRotate gui.rotateSystem}}var datGui new dat.GUI()//将设置属性添加到gui当中gui.add(对象属性最小值最大值gui.add(controls, size, 0, 10).onChange(controls.redraw);datGui.add(gui, size, 0.1, 10).onChange(gui.redraw)datGui.add(gui, transparent).onChange(gui.redraw)datGui.add(gui, opacity, 0, 1).onChange(gui.redraw)datGui.add(gui, vertexColors).onChange(gui.redraw)datGui.addColor(gui, color).onChange(gui.redraw)datGui.add(gui, sizeAttenuation).onChange(gui.redraw)datGui.add(gui, rotateSystem).onChange(gui.redraw)gui.redraw()}var createParticles (size, transparent, opacity, vertexColors, sizeAttenuation, color) {var texture new THREE.TextureLoader().load(data/img/rain.png)var geom new THREE.Geometry()var material new THREE.PointCloudMaterial({size: size,transparent: transparent,opacity: opacity,vertexColors: vertexColors,sizeAttenuation: sizeAttenuation,color: color,map: texture,depthTest: false //设置解决透明度有问题的情况})var range 120for (var i 0; i 15000; i) {var particle new THREE.Vector3(range * Math.random() - range / 2, range * Math.random() - range / 2, range * Math.random() - range / 2)particle.velocityY 0.1 Math.random() / 5particle.velocityX (Math.random() - 0.5) / 3geom.vertices.push(particle)geom.colors.push(new THREE.Color(0xffffff))}cloud new THREE.Points(geom, material)cloud.verticesNeedUpdate truescene.add(cloud)}var statsvar initStats () {stats new Stats()document.body.appendChild(stats.dom)}var render () {//产生雨滴动画效果var vertices cloud.geometry.verticesvertices.forEach(function (v) {v.y v.y - (v.velocityY) * 3v.x v.x - (v.velocityX) * .5if (v.y -60) v.y 60;if (v.x -20 || v.x 20) v.velocityX v.velocityX * -1})//设置实时更新网格的顶点信息cloud.geometry.verticesNeedUpdate truerenderer.render(scene, camera)}var onWindowResize () {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate () {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw () {initRender()initScene()initCamera()initLight()initModel()initStats()initControls()initGui()animate()window.onresize onWindowResize}
/script
/html效果如下
