three.js进击版火焰动画
原理很简单,跟之前做雨雪效果一样,只不过换成往上移动。
·
const texture = new THREE.TextureLoader().load('/public/fire.png');
const smokeTexture = new THREE.TextureLoader().load('/public/smoke.png');
const smokeMaterial = new THREE.SpriteMaterial({
color: 0x000000,
map: smokeTexture,
transparent: true,
opacity: 0.1,
});
let smokeGroup = new THREE.Group();
const spriteMaterial = new THREE.SpriteMaterial({
map: texture,
transparent: true,
opacity: 0.3,
blending: THREE.AddOperation
});
let fireGroup = new THREE.Group();
//添加火焰
function addFire() {
for (let i = 0; i < 500; i++) {
// 精灵模型共享材质
const sprite = new THREE.Sprite(smokeMaterial);
smokeGroup.add(sprite);
sprite.scale.set(2, 2, 2);
// 设置精灵模型位置,在长方体空间上上随机分布
const x = 15 * (Math.random() - 0.5);
const y = 3 * Math.random();
const z = 8 * (Math.random() - 0.5);
sprite.position.set(x, y, z)
};
for (let i = 0; i < 500; i++) {
// 精灵模型共享材质
const sprite = new THREE.Sprite(spriteMaterial);
fireGroup.add(sprite);
sprite.scale.set(2, 2, 2);
// 设置精灵模型位置,在长方体空间上上随机分布
const x = 15 * (Math.random() - 0.5);
const y = 3 * Math.random();
const z = 8 * (Math.random() - 0.5);
sprite.position.set(x, y, z)
};
fireGroup.position.set(-8, 0, -6);
smokeGroup.position.set(-8, 0, -6);
innerModel.add(fireGroup, smokeGroup);
function loop() {
fireGroup.children.forEach(sprite => {
// 火焰的y坐标每次
sprite.position.y += 0.1;
if (sprite.position.y > 3) {
sprite.position.y = Math.random();
// sprite.material.opacity = 1;
}
});
smokeGroup.children.forEach(sprite => {
// 火焰的y坐标每次
sprite.position.y += 0.1;
if (sprite.position.y > 6) {
sprite.position.y = Math.random() + 3;
}
});
requestAnimationFrame(loop);
}
loop();
}
原理很简单,跟之前做雨雪效果一样,只不过换成往上移动
更多推荐
已为社区贡献1条内容
所有评论(0)