ThreeJS功能解读——粒子和粒子系统

Posted 2021-04-21 砖人专语

ThreeJS的粒子与粒子系统，可以模拟出细小的物体，或组成三维模型进行变换。

本系列的主要内容有：粒子的创建、粒子系统、用html5画布格式化粒子、使用纹理格式化粒子以及从高级几何体中创建粒子系统。

本期将介绍前两部分内容。

粒子与粒子系统

本期将介绍粒子的创建以及粒子系统，一起来看吧~~~

1.粒子的创建

    举例：

var geom = new THREE.Geometry();var material = new THREE.ParticleBasicMaterial({size:4, vertexColors:true, color: 0xffffff});var particle = new THREE.Vector3(x * 10, y *10, 0);geom.vertices.push(particle);var system = new THREE.ParticleSystem(geom, material); scene.add(system);

 

呈现效果

    Notes：

        若使用CanvasRender渲染器，可直接将创建好的粒子添加进场景中。

2.粒子系统

    特点：ParticleSystem（粒子系统）用来在WebGLRender中显示粒子。

    步骤：先创建对象，然后用THREE.Vector3构建的粒子添加到几何体上，最后添加ParticleBasicMaterial对象，创建ParticleSystem并添加到场景中。

    属性：ParticleBasicMaterial属性

        color（颜色）、map（材质）、size（大小）、sizeAnnutation（false：粒子尺寸相同；true：大小取决于相机的远近）、vetexColors（true：粒子使用color数组中的值）、opacity（透明度）、transparent（透明，与opacity一起使用）、blending（融合模式）、fog（雾化效果）。

    举例：

function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {     var geom = new THREE.Geometry();     var material = new THREE.PointCloudMaterial({           size: size,           transparent: transparent,           opacity: opacity,           vertexColors: vertexColors,           sizeAttenuation: sizeAttenuation,           color: color      });    var range = 500;    for (var i = 0; i < 15000; i++) {         var particle = new THREE.Vector3(Math.random() * range - range / 2,Math.random() * range - range / 2,Math.random() * range - range / 2);        geom.vertices.push(particle);        var color = new THREE.Color(0x00ff00);        color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);        geom.colors.push(color);    }    cloud = new THREE.PointCloud(geom, material);    cloud.name = "particles";    scene.add(cloud); }

呈现效果

未完待续，下期见~

没看够？网页输入www.bos.xyz进入小红砖首页→示例库，更多BIM示例等你去发现~~

-END-

在看点这里