开启Three.js之旅（四）之精灵图（Sprite）

Sprite是模型对象，父类是Object3D

基础

创造精灵模型材质（SpriteMaterial）

const spriteMaterial = new THREE.SpriteMaterial({
    color: 0xffffff,
  rotation:Math.PI/4,//旋转精灵对象45度，弧度值
});
// 创建精灵模型对象，不需要几何体geometry参数
const sprite = new THREE.Sprite(spriteMaterial);

这里是不需要geometry参数的 精灵模型默认是一个矩形 值得注意的是，Sprite矩形平面会始终平行于Canvas画布（屏幕）

code

// 精灵图
import * as THREE from 'three'
export default function setSprite(target, state) {
    // 根据不同的状态创建不同的精灵
    console.log(state);
    // 创建精灵材质对象SpriteMaterial
    const spriteMaterial = new THREE.SpriteMaterial({
        color: 0xffffff,  // 设置精灵纹理的颜色
        // rotation: Math.PI / 4, // 旋转精灵的角度
        // map: new THREE.TextureLoader().load('/textures/star.png'), // 设置精灵纹理贴图
        // transparent: true, //开启透明度
        // opacity: 0.5 //设置透明度
    })
    const sprite = new THREE.Sprite(spriteMaterial)
    sprite.position.set(10, 10, 10) // 相对位置
    sprite.scale.set(10, 10, 10)
    target.add(sprite)
}

效果

Sprite 模拟天气效果

雨滴图片

code

// 精灵图---模拟天气效果
import * as THREE from 'three'
export default function setSprite(target) {
    const texture = new THREE.TextureLoader().load('/img/rain.png')
    const spriteMaterial = new THREE.SpriteMaterial({
        map: texture,
    });
    // 创建Group,生成16000个精灵模型，模拟下雨效果，随机位置
    const group = new THREE.Group();
    for (let i = 0; i < 16000; i++) {
        const sprite = new THREE.Sprite(spriteMaterial);
        group.add(sprite);
        sprite.scale.set(1, 1, 1);
        const x = 1000 * (Math.random() - 0.5);
        const y = 600 * Math.random();
        const z = 1000 * (Math.random() - 0.5);
        sprite.position.set(x, y, z)
    }
    target.add(group);
    function loop() {
        group.children.forEach(sprite => {
            sprite.position.y -= 1;
            if (sprite.position.y < 0) {
                // 如果雨滴落到地面，重置y，从新下落
                sprite.position.y = 600;
            }
        });
        requestAnimationFrame(loop);
    }
    loop();
}

效果

参考文章

Three.js中文网 精灵模型Sprite