用three.js创建点云粒子贴图

野性酷女 2022-05-15 06:04 317阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

点云可以用来模拟各种各样的场景，如下雨、下雪和火焰燃烧等；点云在THREE.JS中也称为精灵(sprites)；接下来将介绍THREE.JS中点云的两种创建方式：

**1.运用于少量点云粒子场景:**

代码如下例：

let material = new THREE.SpriteMaterial()
    for (let i = -3; i < 3; i++) {
         for (let j = -3; j < 3; j++) {
              let sprite = new THREE.Sprite(material);//新建精灵
              sprite.scale.set(8, 8, 0);//缩放
              sprite.position.set(i * 10 - 30, j * 10 + 30, 0);//位置
              scene.add(sprite);
          }
      }

**2.运用于大量点云粒子场景：**

代码如下例：

当需要处理大量的点云粒子时，运用方法1会遇到性能问题，这个时候可以用方法2；

**3 点云贴图**

为点云贴图我们使用THREE.TextureLoader()方法首先加载图片，以方法1为例实现代码如下：

为点云粒子贴上雪花形状的图片，最后实现效果如下：

![70][]

**4 整个demo代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>particles-01</title>
        <script type="text/javascript" src="../build/three.js"></script>
        <script type="text/javascript" src="../js/libs/stats.min.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                background-color: #000000;
            }
        </style>
    </head>
    <body>
        <script>
            let container1 = document.createElement('div');
            document.body.appendChild(container1);
            let container2 = document.createElement('div');
            document.body.appendChild(container2);
            let scene, camera, renderer;
            let stats;
    
            main();
            render();
    
            function initScene() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0x000000);
            }
    
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.set(0, 0, 150);
                camera.lookAt(new THREE.Vector3());
            }
    
            function initRenderer(container) {
                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(new THREE.Color(0x000000, 1.0));
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);
            }
    
            function main() {
                stats = initStats(container2);
                initScene();
                initCamera();
                initRenderer(container1);
                createSprites();
                createPointCloud();
            }
    
            function createSprites() {
                let spriteMap = new THREE.TextureLoader().load( "snowflake1.png");
                for (let i = -3; i < 3; i++) {
                    for (let j = -3; j < 3; j++) {
                        let sprite = new THREE.Sprite(new THREE.SpriteMaterial({map: spriteMap, color: 0x009966}));
                        sprite.scale.set(8, 8, 0);
                        sprite.position.set(i * 10 - 30, j * 10 + 30, 0);
                        scene.add(sprite);
                    }
                }
            }
    
            function createPointCloud() {
                let geom = new THREE.Geometry();
                let spriteMap = new THREE.TextureLoader().load( "snowflake2.png");
                let material = new THREE.PointsMaterial({map: spriteMap, size: 15, vertexColors: true, color: 0xffffff});
                for (let x = -3; x < 3; x++) {
                    for (let y = -3; y < 3; y++) {
                        let particle = new THREE.Vector3(x * 10 + 28, y * 10 - 28, 0);
                        geom.vertices.push(particle);
                        geom.colors.push(new THREE.Color(0xffffff));
                    }
                }
    
                let cloud = new THREE.Points(geom, material);
                scene.add(cloud);
            }
    
            function render() {
                stats.update();
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
    
            function initStats(container) {
    
                let stats = new Stats();
                stats.setMode(0); // 0: fps, 1: ms
    
                // Align top-left
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
    
                container.appendChild(stats.domElement);
    
                return stats;
            }
        </script>
    </body>
    </html>

[70]: /images/20220515/42678a5c5e39440692c36f1ca72c3206.png