Hero Memories

马黑黑

马黑黑

帖子代码

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/w4/hero.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
   
3.         #btnFs { bottom: 20px; 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=36586597" autoplay loop></audio>
   
9. 
   
10. <script type="module">
    
11.         import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
    
12.         LZ(tz);
    
13. </script>

复制代码

这是使用模块的默认配置。精灵粒子系统预设可配置，将在三楼详细讲解。

马黑黑

ThreeJS Sprite 精灵粒子音画帖模块配置说明：

一、导入 spriteparticle.js 模块

    ① 简单导入 ：适用于只做简单配置的音画帖

    import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';

    ② 复杂导入 ：适用于使用ThreeJS绘制其它图像的音画帖

    import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';

    就是说，导出模块提供的除了 LZ 函数外的 ThreeJS 基本变量量。

二、配置粒子和播放器

不论是简单导入还是复杂导入精灵粒子系统模块，只要不使用或部分不使用模块默认配置，则需要做粒子和播放器的配置。先设计一个变量用来保存自定义配置，比如 config，然后依次配置精灵粒子和播放器：

const config = {
        // 精灵
        sprite: {
                number: 200, // 总数
                scale: 0.4, // 缩放
                pic: 'https://638183.freep.cn/638183/small/hdxk.png', // 纹理贴图
                rotation: [20, 20, 20] // 精灵组在 xyz轴 上旋转速度的除数（正数，数字越大对应轴上的旋转速度越慢）
        },
        // 播放器
        mesh: {
                pic: 'https://638183.freep.cn/638183/small/2025/fl101.png', // 纹理贴图
                color: 0x008800, // 颜色（会与纹理颜色叠加）
                transparent: true, // 是否启用透明（true或false，为真时纹理透明部分透明，为假时纹理透明部分黑色）
                position: [0, 0, 0], // 播放器在 xyz轴 上的位置，浮点数，都为 0 表示在帖子中心，XY轴上负数表示左移、下移，取值范围自行探索
                rotate: [0, 0, 0], // 播放器初始旋转角度，都为 0 表示不旋转，可使用浮点数、Math.PI / 4 等表达方法
                rotation: [-0.5, 0.5, 0] // 播放器自转速度的乘数，浮点数，为 0 表示对应轴上不旋转，正、负数会决定旋转方向
        }
};


然后：

    LZ(tz, config);

完整的配置代码示例：

1. const config = {
   
2.         sprite: {
   
3.                 number: 200,
   
4.                 scale: 0.4,
   
5.                 pic: 'https://638183.freep.cn/638183/small/hdxk.png',
   
6.                 rotation: [20, 20, 20]
   
7.         },
   
8. 
   
9.         mesh: {
   
10.                 pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
    
11.                 color: 0x008800,
    
12.                 transparent: true,
    
13.                 position: [0, 0, 0],
    
14.                 rotate: [0, 0, -Math.PI / 2],
    
15.                 rotation: [-0.5, 0.5, 0]
    
16.         }
    
17. };
    
18. 
    
19. LZ(tz, config);

复制代码

若需要另外绘制其它 ThreeJS 图形，请确保使用复杂方式导入模块，然后，在 LZ() 函数代码之后分行并加入：

1. const cube = new THREE.Mesh(
   
2.                 new THREE.BoxGeometry(),
   
3.                 new THREE.MeshNormalMaterial()
   
4.         );
   
5.         cube.rotateX(0.5);
   
6.         cube.position.set(-2,-3,0);
   
7.         scene.add(cube);

复制代码

上面是绘制一个矩形并设置初始旋转角度（摆pose）、位置。

三、其它配置

    ① 全屏按钮需要自己定位，用CSS实现，请参考帖子代码 03 行；
    ② 为防止 ThreeJS 图像在窗口尺寸动态变更时偏移走位，建议在帖子CSS代码中加入对 canvas 画布的控制代码，请参与帖子代码 04 行;
    ③ 模块支持对帖子内视频的播放、暂停联动管理，视频CSS样式请自行设置。

四、其他说明

    ① 精灵和播放器纹理贴图需要对图片进行相应的数据解析，有些存储图片的服务器可能开放数据解析功能，若此，请更换其它服务器上的图片，确保纹理能被正常渲染；

    ② 精灵和播放器的配置，每一个子项目可以缺省。举例说明：假设粒子只需要自定义贴图、播放器除了贴图外其它统统使用模块的配置，则可以酱紫——

1. const config = {
   
2.         sprite: {
   
3.                 pic: 'https://638183.freep.cn/638183/small/hdxk.png'
   
4.         },
   
5. 
   
6.         mesh: {
   
7.                 pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
   
8.                 color: 0x008800
   
9.         }
   
10. };

复制代码

一般的书写习惯是最后一个子项不要小角逗号，不过按照新JS规范，要也不影响。

【附】简单配置的帖子代码示例（在七楼） ：https://www.huachaowang.com/foru ... 65&fromuid=7130

红影

黑黑这是把精灵粒子做了封装吧，一下子让帖子代码看着那么简洁

红影

精灵的贴图和球体的帖图这个两个是最要紧的。发现黑黑的帖子里球体的贴纸选择都很奇妙，这个帖子里的也是，带着一种奇妙的韵味

红影

马黑黑 发表于 2025-6-12 13:05
ThreeJS Sprite 精灵粒子音画帖模块配置说明：

一、导入 spriteparticle.js 模块

这个封装好，还能导入其他 ThreeJS 图形呢

马黑黑

最后再提供一个本帖的另一个版本的代码，以供大家做配置时有完整的代码样本：

1. <style>
   
2.         #tz { margin: 30px 0; left: 50%; transform: translateX(-50%);  width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/w4/hero.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
   
3.         #btnFs { bottom: 20px; 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=36586597" autoplay loop></audio>
   
9. 
   
10. <script type="module">
    
11.         import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
    
12. 
    
13.         const config = {
    
14.                 sprite: {
    
15.                         number: 200,
    
16.                         scale: 0.4,
    
17.                         pic: 'https://638183.freep.cn/638183/small/hdxk.png',
    
18.                         rotation: [30, 30, 30]
    
19.                 },
    
20.                 mesh: {
    
21.                         pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
    
22.                         color: 0x00ffee,
    
23.                         transparent: true,
    
24.                         position: [0, 2, 0],
    
25.                         rotate: [0, 0, -Math.PI / 2],
    
26.                         rotation: [0.5, -0.5, 0]
    
27.                 }
    
28.         };
    
29. 
    
30.         LZ(tz, config);
    
31. </script>

复制代码

马黑黑

红影 发表于 2025-6-12 14:03
这个封装好，还能导入其他 ThreeJS 图形呢

三楼的文档刚刚更新完毕

马黑黑

红影 发表于 2025-6-12 13:58
精灵的贴图和球体的帖图这个两个是最要紧的。发现黑黑的帖子里球体的贴纸选择都很奇妙，这个帖子里的也是， ...

是有配置的版本： Hero Memories

马黑黑

红影 发表于 2025-6-12 13:53
黑黑这是把精灵粒子做了封装吧，一下子让帖子代码看着那么简洁

模块200多行代码，好像也不多

朵拉

漂亮耶，有空学习下

红影

马黑黑 发表于 2025-6-12 14:05
最后再提供一个本帖的另一个版本的代码，以供大家做配置时有完整的代码样本：

这个版本的效果也有趣，像海星和贝壳

红影

马黑黑 发表于 2025-6-12 14:13
三楼的文档刚刚更新完毕

嗯嗯，就是看了文档说明才知道的

红影

马黑黑 发表于 2025-6-12 14:14
是有配置的版本： Hero Memories

这个里的贴图更好看

红影

马黑黑 发表于 2025-6-12 14:15
模块200多行代码，好像也不多

当然是越简洁越好了

梦江南

好漂亮啊！

樵歌

这个球球是昆仑玉吧，我仔细看了下。那年我路过昆仑山时，道路施工，挖土机从公路边泥沼中挖出了一堆石头，我问那些工人说用来垫路基的，于是我给他们派香烟，就要了一大砣（十几公斤），后来一洗，竟然是一块昆仑玉！一个玉店老板估了下，说值几十W，于是我发了点小财，从此过上了幸福生活。。。

杨帆

深厚的专业功底，精湛的讲授教程，高尚的利他之举，为马老师点赞！

杨帆

以主贴为例试了一下，遇到以下困惑，请老师答疑解惑，谢谢

一、除了原模块，无论  ① 简单导入，还是  ② 复杂导入 ，动画功能无法实现；

二、导入三种模块的任何一种，均无法实现导入这个“矩形”；

三、音、视频可控，但播放按钮移动失灵。

马黑黑

杨帆 发表于 2025-6-12 17:52
以主贴为例试了一下，遇到以下困惑，请老师答疑解惑，谢谢

一、除了原模块，无论  ① 简单导入 ...

使用 ES6 JS模块要求：

第一，js代码标签在使用模块时必须指明 type属性：

<script type="module">
    // 具体代码
</script>

第二，请确保导入 spriteparticle.js 地址的准确性，以及你要导入什么：


    import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';

基于 spriteparticle.js 的简单导入（只导入 LZ），做好配置，将配置作为参数调用 LZ() 函数:

    const myconfig = {
        // 配置代码
    };

    LZ(tz, myconfig); // tz 是 id="tz" 的帖子元素id, id 等于什么它就是什么，不要引号

如果是复杂导入，意味着你想用 ThreeJS 制作其它的图像，你可以在 LZ() 函数之后按 ThreeJS 语法规范制作。