花间事（To花飞飞）
<style>#tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/webp2/flover.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { top: 30px; color: #eee; }
#tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
</style>
<div id="tz"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=497289498" autoplay loop></audio>
<script type="module">
import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
//import { THREE, scene, camera, renderer, clock, LZ } from './spriteparticle.js';
const config = {
sprite: {
number: 500,
scale: ,
pic: 'https://638183.freep.cn/638183/small/780.png',
rotation: [-20, -20, -30]
},
mesh: {
pic: 'https://638183.freep.cn/638183/small/rose.jpg',
color: 0xff66ff,
transparent: true,
position: ,
rotate: ,
rotation:
}
};
LZ(tz, config);
new THREE.TextureLoader().load(
'https://638183.freep.cn/638183/small/2025/24g.webp',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
const girl = new THREE.Sprite(
new THREE.SpriteMaterial({ map: texture })
);
girl.position.set(0, -1.6, 0);
girl.scale.set(3, 5, 1);
scene.add(girl);
}
);
</script> 帖子代码
<style>
#tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/webp2/flover.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { top: 30px; color: #eee; }
#tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
</style>
<div id="tz"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=497289498" autoplay loop></audio>
<script type="module">
import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
//import { THREE, scene, camera, renderer, clock, LZ } from './spriteparticle.js';
const config = {
sprite: {
number: 500,
scale: ,
pic: 'https://638183.freep.cn/638183/small/780.png',
rotation: [-20, -20, -30]
},
mesh: {
pic: 'https://638183.freep.cn/638183/small/rose.jpg',
color: 0xff66ff,
transparent: true,
position: ,
rotate: ,
rotation:
}
};
LZ(tz, config);
new THREE.TextureLoader().load(
'https://638183.freep.cn/638183/small/2025/24g.webp',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
const girl = new THREE.Sprite(
new THREE.SpriteMaterial({ map: texture })
);
girl.position.set(0, -1.6, 0);
girl.scale.set(3, 5, 1);
scene.add(girl);
}
);
</script>
本帖：
主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。
帖子背景图有一菇凉，另一菇凉是 ThreeJS 绘制（使用纹理贴图的精灵）。通过观察可以看出：飞舞的花儿不论大小，在背景菇凉身上经过时，均在其身前经过；ThreeJS 菇凉呢，有的花朵在她前面经过，有的在她身后经过。这就是区别。 周末了，休闲时刻收到白老师这么漂亮的礼物，真是开心。。{:4_173:}乐一个先 花飞飞 发表于 2025-6-13 20:18
周末了，休闲时刻收到白老师这么漂亮的礼物，真是开心。。乐一个先
{:4_191:} 马黑黑 发表于 2025-6-13 19:58
本帖：
主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。
背景菇凉这个可以理解，之前粒子视频啥的效果都在背景图片之上的。。
这个ThreeJS 菇凉是真好，粒子可以围绕旋转了，
记得之前要整个绕到背后的，需要把人物重新做一番处理。
这个效果下午看到的时候就觉得惊艳。。。
哈哈，不过那个头发属杀马特造型，这个比较正常 {:4_173:} 我下午做了一张图，试图换成雪花型状，需要色彩变成单一的白色或浅蓝色。。。不过研究半天还没找到换色的地方。。{:4_173:}
还有就是粒子大小控制，昨天的两个版本，花版本粒子分明比海星版本的大很多。
而我需要雪花像海星那么小小的。。
也还没试成哈。。。感觉粒子大小不可更改 这个是复杂导入的模板，得记下来了，现在知道之前说的添加别的图形是什么意思了。。{:4_173:}
所以么，这个范例还是很必要的。。 舒缓美妙音乐中，飞花就这样缓缓飘落，特别好看。。
{:4_204:}大爱大赞 马黑黑 发表于 2025-6-13 20:19
先喝一杯，留一杯明天一起喝。。{:4_173:} 花飞飞 发表于 2025-6-13 20:55
先喝一杯，留一杯明天一起喝。。
今朝有酒今朝醉 这么多缤纷的花朵，简直是进入花儿的世界了。
三维空间里飘飞的花朵，很有立体感，带给人魔幻的感觉{:4_199:} 红影 发表于 2025-6-13 21:09
这么多缤纷的花朵，简直是进入花儿的世界了。
三维空间里飘飞的花朵，很有立体感，带给人魔幻的感觉{:4_19 ...
晚上嚎 花飞飞 发表于 2025-6-13 20:24
背景菇凉这个可以理解，之前粒子视频啥的效果都在背景图片之上的。。
这个ThreeJS 菇凉是真好，粒子可以 ...
头发事小，好看就行 花飞飞 发表于 2025-6-13 20:43
舒缓美妙音乐中，飞花就这样缓缓飘落，特别好看。。
大爱大赞
{:4_172:} 马黑黑 发表于 2025-6-13 21:08
今朝有酒今朝醉
{:4_173:}一半清醒一半醉呗 这个礼物送给飞飞太合适了，真正的花儿满天飞飞啊{:4_199:}{:4_173:} 马黑黑 发表于 2025-6-13 19:58
本帖：
主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。
还专门弄了两个姑娘做对比呢，嗯嗯，这样更清楚了{:4_187:} 马黑黑 发表于 2025-6-13 21:12
头发事小，好看就行
{:4_173:}特别好看，你选的图么 马黑黑 发表于 2025-6-13 21:13
感觉3D对数量比较宽容。。500可以做常规数据{:4_173:}