Three.js学习07

提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。

---

前言

本篇主要介绍精灵模型Sprite，模拟了森林和下雨场景。

---

一、精灵模型Sprite

精灵模型Sprite的基类是Object3D，Object3D类里可以使用的属性方法精灵模型都可以使用。以雨滴为例。
效果如下：

1.设置纹理贴图

给精灵模型Sprite加载纹理贴图的图片（以雨滴为例）。

var texture = new THREE.TextureLoader().load("rain.png");

2.精灵材质对象SpriteMaterial

精灵材质对象 SpriteMaterial 的基类是材质Material，Material 里的属性方法 SpriteMaterial 里都可以使用。SpriteMaterial 不需要创建几何体，直接使用就行。

// 创建精灵材质对象SpriteMaterial
    var spriteMaterial = new THREE.SpriteMaterial({
        color:0xffffff,//设置精灵矩形区域颜色
        rotation:Math.PI/4,//旋转精灵对象45度，弧度值
        map: texture,//设置精灵纹理贴图
    });

3.创建精灵模型对象

创建精灵模型对象加入到场景中，和以前的几何体一样。

// 创建精灵模型对象，不需要几何体geometry参数
    var sprite = new THREE.Sprite(spriteMaterial);
    scene.add(sprite);

4.scale.set() 方法设置精灵大小

使用 精灵模型对象名.scale.set() 方法设置精灵大小。

// 控制精灵大小，比如可视化中精灵大小表征数据大小
    sprite.scale.set(20, 20, 1);  只需要设置x、y两个分量就可以

二、精灵模型模拟森林场景

效果如下：

1.创建草坪

先创建一个草坪地面，在矩形平面上利用阵列将纹理贴图草的图片进行重复。

/**
     * 创建一个地面
     */
    var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面
    // 加载树纹理贴图
    var texture = new THREE.TextureLoader().load("grass.jpg");
    // 设置阵列
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;

    /*// 偏移效果
    texture.offset = new THREE.Vector2(0.5, 0.5)*/

    // uv两个方向纹理重复数量
    texture.repeat.set(30, 30);
    var material = new THREE.MeshLambertMaterial({
        map: texture,
    });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    mesh.rotateX(-Math.PI / 2);

2.利用for循环设置一定数量的雨滴精灵模型

将纹理贴图利用for循环设置一定数量的雨滴精灵模型，设置大小后利用 random() 函数在xoz平面上随机分布。

/**
     * 精灵创建树林效果
     */
    // 加载树纹理贴图
    var textureTree = new THREE.TextureLoader().load("tree.png");
    // 批量创建表示一个树的精灵模型
    for (let i = 0; i < 100; i++) {
        var spriteMaterial = new THREE.SpriteMaterial({
            map:textureTree,//设置精灵纹理贴图
        });
        // 创建精灵模型对象
        var sprite = new THREE.Sprite(spriteMaterial);
        scene.add(sprite);
        // 控制精灵大小,
        sprite.scale.set(30, 30, 1);  只需要设置x、y两个分量就可以
        var k1 = Math.random() - 0.5;
        var k2 = Math.random() - 0.5;
        // 设置精灵模型位置，在xoz平面上随机分布
        sprite.position.set(300 * k1, 30, 300 * k2)
    }

三、精灵模型模拟下雨场景

效果如下：

1.创建草坪

先创建一个草坪地面，在矩形平面上利用阵列将纹理贴图草的图片进行重复。

/**
     * 创建一个地面
     */
    var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面
    // 加载树纹理贴图
    var texture = new THREE.TextureLoader().load("grass.jpg");
    // 设置阵列
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;

    /*// 偏移效果
    texture.offset = new THREE.Vector2(0.5, 0.5)*/

    // uv两个方向纹理重复数量
    texture.repeat.set(30, 30);
    var material = new THREE.MeshLambertMaterial({
        map: texture,
    });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    mesh.rotateX(-Math.PI / 2);

2.创建group群组里放入一定数量的雨滴

// 创建一个组表示所有的雨滴
    var group = new THREE.Group();
    // 加载雨滴理贴图
    var texture = new THREE.TextureLoader().load("rain2.png");
    // 创建精灵材质对象SpriteMaterial

    for(let i=0;i<3000;i++){
        var spriteMaterial = new THREE.SpriteMaterial({
            color:0xffffff,//设置精灵矩形区域颜色
            /*rotation:Math.PI/4,//旋转精灵对象45度，弧度值*/
            map: texture,//设置精灵纹理贴图
        });
        // 创建精灵模型对象，不需要几何体geometry参数
        var sprite = new THREE.Sprite(spriteMaterial);
        scene.add(sprite);
        group.add(sprite);
        // 控制精灵大小，比如可视化中精灵大小表征数据大小
        sprite.scale.set(6, 6, 1);  只需要设置x、y两个分量就可以
        var k1 = Math.random() - 0.5;
        var k2 = Math.random() - 0.5;
        var k3 = Math.random() - 0.5;
        // 设置精灵模型位置，在整个空间上上随机分布
        sprite.position.set(300 * k1, 300*k3, 300 * k2);


    }
    scene.add(group);

3.利用函数让渲染器渲染遍历雨滴群组，控制刷新频率产生动画效果，然后执行渲染操作。

在设置渲染对象和执行渲染操作间加入函数，每次渲染遍历雨滴群组。

function render() {
        // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
        // 每次渲染都会更新雨滴的位置，进而产生动画效果
        group.children.forEach(sprite => {
            // 雨滴的y坐标每次减1
            sprite.position.y -= 1;
        if (sprite.position.y < 0) {
            // 如果雨滴落到地面，重置y，从新下落
            sprite.position.y = 200;
        }
        });

---