世界的尽头

马黑黑 发表于 2025-5-1 20:21

马黑黑 发表于 2025-5-1 20:22

<div id="hEdiv"><pre id="hEpre">
<style>
#papa { --state: running; 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/webp3/u1.webp') no-repeat center/cover; display: grid; place-items: center; box-shadow: 2px 2px 10px rgba(0,0,0,.65); z-index: 1; position: relative; }
#papa canvas { display: block; position: absolute; }
#player { position: absolute; top: 20%; width: 10%; cursor: pointer; opacity: 0.5; transition: width .75s; z-index: 9; animation: rot 10s linear infinite var(--state); }
#player:hover { opacity: .8; width: 12%; filter: drop-shadow(0 0 30px yellow); }
#btnFs { bottom: 20px; color: lightblue; border-color: lightblue !important; background: gray; }
#btnFs:hover { color: gold; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2616432338" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/small/002_133507167677724892.png" alt="" />
</div>



<script type="module">

import * as THREE from 'https://esm.sh/three';
import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';
FS(papa, player);

function createParticles(options = {}) {
var isPaused = false;
const config = {
count: options.count || 3000,
size: options.size || 0.2,
colors: options.colors || ['purple', 'cyan', 'orange'],
speedRange: options.speedRange ||
};

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, papa.offsetWidth/papa.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(papa.offsetWidth, papa.offsetHeight);
renderer.setClearAlpha(0);
papa.appendChild(renderer.domElement);

const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(config.count * 3);
const velocities = new Float32Array(config.count);
const colors = new Float32Array(config.count * 3);

for (var i = 0; i < config.count; i++) {
positions = (Math.random() - 0.5) * 50;
positions = (Math.random() - 0.5) * 50;
positions = -50 + Math.random() * 150;
velocities = config.speedRange + Math.random() * (config.speedRange - config.speedRange);
const color = new THREE.Color(
config.colors.length > 1 ?
config.colors :
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
);
colors = color.r;
colors = color.g;
colors = color.b;
}

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
size: config.size,
vertexColors: THREE.VertexColors || true,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);
camera.position.z = 50;

const clock = new THREE.Clock();

function animate() {
if (isPaused) return;
const delta = clock.getDelta();
const positions = particles.geometry.attributes.position.array;
const velocities = particles.geometry.attributes.velocity.array;

for (var i = 0; i < config.count; i++) {
const zIdx = i * 3 + 2;
positions += velocities * delta * 60;
if (positions > 100) {
positions = (Math.random() - 0.5) * 50;
positions = (Math.random() - 0.5) * 50;
positions = -50 - Math.random() * 50;
}
}

particles.geometry.attributes.position.needsUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', () => {
renderer.setSize(papa.offsetWidth, papa.offsetHeight);
});

document.addEventListener('click', () => {
isPaused = aud.paused;
animate();
});
}

createParticles({
count: 3000,
colors: ['red', 'blue', 'green', 'yellow'],
speedRange:
});

</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>

花飞飞 发表于 2025-5-1 20:29

咦？今天居然评到没分{:4_170:}后面补上吧。。

马黑黑 发表于 2025-5-1 20:32

three.js 使用了 esm.sh 提供的ES6模块化资源，酱紫引用方便。esm.sh 若不能使用，16行注释掉的代码是替代方案，但这个在 discuz! 论坛不合适，需要用 append 的方式添加，这里只是做个备忘。

如果需要本地测试，建议使用备忘的资源，这样它就无需本地静态虚拟服务器的支持，若此，将第 20 行代码注释或删掉。

源码第 21 行引用我重新封装的全屏模块，它实际上还集成对音频控制按钮的封装，只要指定按钮标识，代码在第 22 行：

FS(papa, player);

其中的 player 就是按钮的 id 标识。此外，如果启用了按钮管理，该模块还封装对视频的管理。

若需要启用全屏模块的附加功能，请在CSS设置相关的CSS，具体代码请参考第 4、5、6、7、8 这几行。

绿叶清舟 发表于 2025-5-1 20:35

这个效果漂亮，这是在哪个球上了

马黑黑 发表于 2025-5-1 20:35

花飞飞发表于 2025-5-1 20:29
咦？今天居然评到没分后面补上吧。。

抢楼了{:4_170:}

花飞飞 发表于 2025-5-1 20:36

这个不是花潮，是粒子潮{:4_173:}
开篇可看到远远的一团从小到大扑面而来。。。。
那是世界的尽头么。。
那个飞轮的小播放在粒子中心转动时带起粒子风。。

花飞飞 发表于 2025-5-1 20:37

小播加了个黄色的光晕，触碰有变化。。
全屏按纽也给了个触碰变黄的效果，更加显眼了
每次看白老师的作品都能看到各种不同的细微改进{:4_173:}

花飞飞 发表于 2025-5-1 20:40

马黑黑发表于 2025-5-1 20:35
抢楼了

这几天攒的贴子刚回完，转眼就看到你发新贴。
前排看得清，好容易抢到的{:4_173:}

马黑黑 发表于 2025-5-1 20:40

花飞飞发表于 2025-5-1 20:40
这几天攒的贴子刚回完，转眼就看到你发新贴。
前排看得清，好容易抢到的

{:4_187:}

马黑黑 发表于 2025-5-1 20:41

花飞飞发表于 2025-5-1 20:37
小播加了个黄色的光晕，触碰有变化。。
全屏按纽也给了个触碰变黄的效果，更加显眼了
每次看白老师的作 ...

这个也看到了。FS是昨天修改好的

花飞飞 发表于 2025-5-1 20:41

话说这个小粒子支持图片不呢？{:4_173:}

花飞飞 发表于 2025-5-1 20:42

马黑黑发表于 2025-5-1 20:40

{:4_170:}送花啊，你想栽在我手里呀

马黑黑 发表于 2025-5-1 20:43

花飞飞发表于 2025-5-1 20:41
话说这个小粒子支持图片不呢？

目前不支持。我刚刚接触 three.js，能画个矩形出来就已经相当不错了，可以自己给自己奖励两包华子

花飞飞 发表于 2025-5-1 20:43

马黑黑发表于 2025-5-1 20:41
这个也看到了。FS是昨天修改好的

代码一排排看过去时发现的。。。还给粒子整了画布{:4_173:}

马黑黑 发表于 2025-5-1 20:44

花飞飞发表于 2025-5-1 20:42
送花啊，你想栽在我手里呀

{:4_203:}

马黑黑 发表于 2025-5-1 20:45

花飞飞发表于 2025-5-1 20:43
代码一排排看过去时发现的。。。还给粒子整了画布

three.js 就是使用canvas画布渲染最终结果的。当然，可以不管这些，一样可以运行。

花飞飞 发表于 2025-5-1 20:46

马黑黑发表于 2025-5-1 20:43
目前不支持。我刚刚接触 three.js，能画个矩形出来就已经相当不错了，可以自己给自己奖励两包华子

华子容易，这个我可以包了。。{:4_173:}
three.js又是个什么好东东，能做这么炫的效果
我的天，你一手设计出来的，这么大工程。。。。
赞个。。。

花飞飞 发表于 2025-5-1 20:46

马黑黑发表于 2025-5-1 20:44

{:4_170:}这个新梗，忍不住要拿来用用，多好玩。。
大不了回送你一个{:4_204:}

马黑黑 发表于 2025-5-1 20:47

花飞飞发表于 2025-5-1 20:46
这个新梗，忍不住要拿来用用，多好玩。。
大不了回送你一个

{:4_199:}

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

世界的尽头