世界的尽头

马黑黑

马黑黑

<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 src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script-->

<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 || [0.5, 0.8]
	};

	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[i*3] = (Math.random() - 0.5) * 50;
		positions[i*3+1] = (Math.random() - 0.5) * 50;
		positions[i*3+2] = -50 + Math.random() * 150;
		velocities[i] = config.speedRange[0] + Math.random() * (config.speedRange[1] - config.speedRange[0]);
		const color = new THREE.Color(
			config.colors.length > 1 ?
			config.colors[Math.floor(Math.random()*config.colors.length)] :
			'#'+(Math.random()*0xFFFFFF<<0).toString(16)
		);
		colors[i*3] = color.r;
		colors[i*3+1] = color.g;
  		colors[i*3+2] = 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[zIdx] += velocities[i] * delta * 60;
			if (positions[zIdx] > 100) {
				positions[zIdx-2] = (Math.random() - 0.5) * 50;
				positions[zIdx-1] = (Math.random() - 0.5) * 50;
				positions[zIdx] = -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: [0.02, 0.2]
});

</script>

花飞飞

咦？今天居然评到没分后面补上吧。。

马黑黑

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:29
咦？今天居然评到没分后面补上吧。。

抢楼了

花飞飞

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

花飞飞

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

花飞飞

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

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

马黑黑

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

马黑黑

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

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

花飞飞

话说这个小粒子支持图片不呢？

花飞飞

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

送花啊，你想栽在我手里呀

马黑黑

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

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

花飞飞

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

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

马黑黑

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

马黑黑

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

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

花飞飞

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

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

花飞飞

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

这个新梗，忍不住要拿来用用，多好玩。。
大不了回送你一个

马黑黑

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