花间事（To花飞飞）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #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; }
   
3.         #btnFs { top: 30px; color: #eee; }
   
4.         #tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
   
5. </style>
   
6. 
   
7. <div id="tz"></div>
   
8. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=497289498" autoplay loop></audio>
   
9. 
   
10. <script type="module">
    
11.         import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
    
12.         //import { THREE, scene, camera, renderer, clock, LZ } from './spriteparticle.js';
    
13. 
    
14.         const config = {
    
15.                 sprite: {
    
16.                         number: 500,
    
17.                         scale: [0.5, 0.5, 0.25],
    
18.                         pic: 'https://638183.freep.cn/638183/small/780.png',
    
19.                         rotation: [-20, -20, -30]
    
20.                 },
    
21.                 mesh: {
    
22.                         pic: 'https://638183.freep.cn/638183/small/rose.jpg',
    
23.                         color: 0xff66ff,
    
24.                         transparent: true,
    
25.                         position: [0, 2, 0],
    
26.                         rotate: [0, 0, 0],
    
27.                         rotation: [0.5, -0.25, -0.3]
    
28.                 }
    
29.         };
    
30. 
    
31.         LZ(tz, config);
    
32. 
    
33.         new THREE.TextureLoader().load(
    
34.                 'https://638183.freep.cn/638183/small/2025/24g.webp',
    
35.                 (texture) => {
    
36.                         texture.colorSpace = THREE.SRGBColorSpace;
    
37.                         const girl = new THREE.Sprite(
    
38.                                 new THREE.SpriteMaterial({ map: texture })
    
39.                         );
    
40.                         girl.position.set(0, -1.6, 0);
    
41.                         girl.scale.set(3, 5, 1);
    
42.                         scene.add(girl);
    
43.                 }
    
44.         );
    
45. </script>

复制代码

马黑黑

本帖：

主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。

帖子背景图有一菇凉，另一菇凉是 ThreeJS 绘制（使用纹理贴图的精灵）。通过观察可以看出：飞舞的花儿不论大小，在背景菇凉身上经过时，均在其身前经过；ThreeJS 菇凉呢，有的花朵在她前面经过，有的在她身后经过。这就是区别。

花飞飞

周末了，休闲时刻收到白老师这么漂亮的礼物，真是开心。。乐一个先

马黑黑

花飞飞 发表于 2025-6-13 20:18
周末了，休闲时刻收到白老师这么漂亮的礼物，真是开心。。乐一个先

花飞飞

马黑黑 发表于 2025-6-13 19:58
本帖：

主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。

背景菇凉这个可以理解，之前粒子视频啥的效果都在背景图片之上的。。
这个ThreeJS 菇凉是真好，粒子可以围绕旋转了，
记得之前要整个绕到背后的，需要把人物重新做一番处理。

这个效果下午看到的时候就觉得惊艳。。。
哈哈，不过那个头发属杀马特造型，这个比较正常

花飞飞

我下午做了一张图，试图换成雪花型状，需要色彩变成单一的白色或浅蓝色。。。不过研究半天还没找到换色的地方。。
还有就是粒子大小控制，昨天的两个版本，花版本粒子分明比海星版本的大很多。
而我需要雪花像海星那么小小的。。
也还没试成哈。。。感觉粒子大小不可更改

花飞飞

这个是复杂导入的模板，得记下来了，现在知道之前说的添加别的图形是什么意思了。。
所以么，这个范例还是很必要的。。

花飞飞

舒缓美妙音乐中，飞花就这样缓缓飘落，特别好看。。
大爱大赞

花飞飞

马黑黑 发表于 2025-6-13 20:19

先喝一杯，留一杯明天一起喝。。

马黑黑

花飞飞 发表于 2025-6-13 20:55
先喝一杯，留一杯明天一起喝。。

今朝有酒今朝醉

红影

这么多缤纷的花朵，简直是进入花儿的世界了。
三维空间里飘飞的花朵，很有立体感，带给人魔幻的感觉

马黑黑

红影 发表于 2025-6-13 21:09
这么多缤纷的花朵，简直是进入花儿的世界了。
三维空间里飘飞的花朵，很有立体感，带给人魔幻的感觉{:4_19 ...

晚上嚎

马黑黑

花飞飞 发表于 2025-6-13 20:24
背景菇凉这个可以理解，之前粒子视频啥的效果都在背景图片之上的。。
这个ThreeJS 菇凉是真好，粒子可以 ...

头发事小，好看就行

马黑黑

花飞飞 发表于 2025-6-13 20:43
舒缓美妙音乐中，飞花就这样缓缓飘落，特别好看。。
大爱大赞

花飞飞

马黑黑 发表于 2025-6-13 21:08
今朝有酒今朝醉

一半清醒一半醉呗

红影

这个礼物送给飞飞太合适了，真正的花儿满天飞飞啊

红影

马黑黑 发表于 2025-6-13 19:58
本帖：

主要演示 spriteparticle.js 模块绘制 ThreeJS 图像功能。

还专门弄了两个姑娘做对比呢，嗯嗯，这样更清楚了

花飞飞

马黑黑 发表于 2025-6-13 21:12
头发事小，好看就行

特别好看，你选的图么

花飞飞

马黑黑 发表于 2025-6-13 21:13

感觉3D对数量比较宽容。。500可以做常规数据