Hero Memories

马黑黑 发表于 2025-6-12 13:03

马黑黑 发表于 2025-6-12 13:05

帖子代码

<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/w4/hero.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { bottom: 20px; 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=36586597" autoplay loop></audio>

<script type="module">
import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
LZ(tz);
</script>这是使用模块的默认配置。精灵粒子系统预设可配置，将在三楼详细讲解。

马黑黑 发表于 2025-6-12 13:05

本帖最后由马黑黑于 2025-6-12 17:54 编辑

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

然后：

LZ(tz, config);

完整的配置代码示例：
const config = {
   sprite: {
            number: 200,
            scale: 0.4,
            pic: 'https://638183.freep.cn/638183/small/hdxk.png',
            rotation:
   },

   mesh: {
            pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
            color: 0x008800,
            transparent: true,
            position: ,
            rotate: ,
            rotation: [-0.5, 0.5, 0]
   }
};

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

const cube = new THREE.Mesh(
            new THREE.BoxGeometry(),
            new THREE.MeshNormalMaterial()
   );
   cube.rotateX(0.5);
   cube.position.set(-2,-3,0);
   scene.add(cube);
上面是绘制一个矩形并设置初始旋转角度（摆pose）、位置。

三、其它配置

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

四、其他说明

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

② 精灵和播放器的配置，每一个子项目可以缺省。举例说明：假设粒子只需要自定义贴图、播放器除了贴图外其它统统使用模块的配置，则可以酱紫——
const config = {
   sprite: {
            pic: 'https://638183.freep.cn/638183/small/hdxk.png'
   },

   mesh: {
            pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
            color: 0x008800
   }
};一般的书写习惯是最后一个子项不要小角逗号，不过按照新JS规范，要也不影响。

【附】简单配置的帖子代码示例（在七楼）：https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=84097&pid=2321765&fromuid=7130

红影发表于 2025-6-12 13:53

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

红影发表于 2025-6-12 13:58

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

红影发表于 2025-6-12 14:03

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

一、导入 spriteparticle.js 模块

这个封装好，还能导入其他 ThreeJS 图形呢{:4_187:}

马黑黑 发表于 2025-6-12 14:05

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

<style>
#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; }
#btnFs { bottom: 20px; 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=36586597" autoplay loop></audio>

<script type="module">
import { LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';

const config = {
sprite: {
number: 200,
scale: 0.4,
pic: 'https://638183.freep.cn/638183/small/hdxk.png',
rotation:
},
mesh: {
pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
color: 0x00ffee,
transparent: true,
position: ,
rotate: ,
rotation:
}
};

LZ(tz, config);
</script>

马黑黑 发表于 2025-6-12 14:13

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

三楼的文档刚刚更新完毕

马黑黑 发表于 2025-6-12 14:14

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

是有配置的版本： Hero Memories

马黑黑 发表于 2025-6-12 14:15

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

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

朵拉发表于 2025-6-12 14:49

漂亮耶，有空学习下{:4_178:}

红影发表于 2025-6-12 15:12

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

这个版本的效果也有趣，像海星和贝壳{:4_187:}

红影发表于 2025-6-12 15:14

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

嗯嗯，就是看了文档说明才知道的{:4_173:}

红影发表于 2025-6-12 15:15

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

这个里的贴图更好看{:4_187:}

红影发表于 2025-6-12 15:16

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

当然是越简洁越好了{:4_187:}

梦江南 发表于 2025-6-12 15:49

好漂亮啊！

樵歌发表于 2025-6-12 16:13

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

杨帆发表于 2025-6-12 17:38

本帖最后由杨帆于 2025-6-12 17:40 编辑

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

杨帆发表于 2025-6-12 17:52

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

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

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

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

马黑黑 发表于 2025-6-12 18:07

杨帆发表于 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 语法规范制作。

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

Hero Memories