学习Three.js——粒子、点云(Sprite,PointCloud)

粒子

使用THREE.SpriteMaterial()和THREE.Sprite()即可创建单个粒子

创建过程

function createSprites() {
            var material = new THREE.SpriteMaterial();

            for (var x = -5; x < 5; x++) {
                for (var y = -5; y < 5; y++) {
                    var sprite = new THREE.Sprite(material);
                    sprite.position.set(x * 10, y * 10, 0);
                    scene.add(sprite);
                }
            }
        }

创建SpriteMaterial后，将SpriteMaterial放入Sprite即可创建单个粒子

点云

创建点云很简单，先创建普通的Geometry对象，再使用PointCloudMaterial点云材质即可

 function createParticles() {


            var geom = new THREE.Geometry();
            var material = new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff});

            for (var x = -5; x < 5; x++) {
                for (var y = -5; y < 5; y++) {
                    var particle = new THREE.Vector3(x * 10, y * 10, 0);
                    geom.vertices.push(particle);
                    geom.colors.push(new THREE.Color(Math.random() * 0x00ffff));
                }
            }

            var cloud = new THREE.PointCloud(geom, material);
            scene.add(cloud);
        }

SpriteMaterial和PointCloudMaterial的一些属性如下：

color:指定所有粒子的颜色

map:粒子使用的纹理

size:粒子的大小

sizeAnnutation:指定为true，那么粒子的大小取决于离摄像机距离的远近

vertexColors:指定为THREE.VertexColors时使用自己定制的颜色而不是color属性指定的颜色，默认为THREE.NoColors

opacity:透明度，和transparent配合使用

transparent:是否使用透明

blending:融合模式

fog:是否受到雾化的影响

粒子和点云的区别：粒子定制化程度高，可以管理到每一个粒子，但资源消耗大；点云统一管理所有粒子，资源消耗小，但是不便于对每一个粒子单独进行处理。

使用纹理

通过HTML5画布画纹理

var getTexture = function () {
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;

            var ctx = canvas.getContext('2d');
            // the body
            ctx.translate(-81, -84);

            ctx.fillStyle = "orange";
            ctx.beginPath();
            ctx.moveTo(83, 116);
            ctx.lineTo(83, 102);
            ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
            ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
            ctx.lineTo(111, 116);
            ctx.lineTo(106.333, 111.333);
            ctx.lineTo(101.666, 116);
            ctx.lineTo(97, 111.333);
            ctx.lineTo(92.333, 116);
            ctx.lineTo(87.666, 111.333);
            ctx.lineTo(83, 116);
            ctx.fill();

            // the eyes
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.moveTo(91, 96);
            ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
            ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
            ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
            ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
            ctx.moveTo(103, 96);
            ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
            ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
            ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
            ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
            ctx.fill();

            // the pupils
            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();


            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        };

通过加载图片作为纹理

var texture = THREE.ImageUtils.loadTexture("texture.png");

纹理图片一般为长宽相等且为2的幂，背景为黑色的图像，如：

从高级几何体创建THREE.PointCloud

很简单，只需要把PointCloud构造函数中的几何体传入一个高级几何体即可

var geom = new THREE.KnotGeometry(...)
var cloud = new THREE.PointCloud(geom,material)