快乐骑游（学习黑黑鼠标跟随满天星效果）
<style>
#papa { --state: running; margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://upfile.mp3.wf/view.php/b3c06ee691459f8287528321f995a603.jpg') no-repeat center/cover; box-shadow: 2px 2px 10px rgba(0,0,0,.65); z-index: 1; display: grid; place-items: center; position: relative; }
#player { position: absolute;left: 120px; top: 80px; z-index: 9; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#player:hover { filter: hue-rotate(90deg); }
#btnFs { bottom: 30px; color: #eee; }
#btnFs:hover { color: red; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/60e49cd06a95c1c37e47f306c74165cb.mp3" autoplay loop></audio>
<img id="player" src="https://upfile.mp3.wf/view.php/998207b8a640768ef2cf54dabcca9b34.png" width="10%" title="播放/暂停" />
</div>
<script type="importmap">
{
"imports": {
"three": "https://esm.sh/three/build/three.webgpu.js",
"three/tsl": "https://esm.sh/three@0.176.0/es2022/build/three.tsl.mjs"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import {uniform, time, instanceIndex, instancedBufferAttribute} from 'three/tsl';
import {FS} from 'https://638183.freep.cn/638183/web/ku/fscreen.js';
let camera, scene, renderer, material;
let mouseX = 0, mouseY = 0;
let width = papa.offsetWidth, height = papa.offsetHeight;
let windowHalfX = width / 2;
let windowHalfY = height / 2;
const init = () => {
camera = new THREE.PerspectiveCamera(55, width / height, 2, 2000);
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.001);
const count = 6000;
const positions = [];
for (let i = 0; i < count; i ++) {
positions.push( 2000 * Math.random() - 1000, 2000 * Math.random() - 1000, 2000 * Math.random() - 1000 );
}
const positionAttribute = new THREE.InstancedBufferAttribute(new Float32Array(positions), 3);
const map = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/star.png');
map.colorSpace = THREE.SRGBColorSpace;
material = new THREE.SpriteNodeMaterial({sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1});
material.color.setHSL(1.0, 0.3, 0.7, THREE.SRGBColorSpace);
material.positionNode = instancedBufferAttribute(positionAttribute);
material.rotationNode = time.add(instanceIndex).sin();
material.scaleNode = uniform(15);
const particles = new THREE.Sprite(material);
particles.count = count;
scene.add(particles);
renderer = new THREE.WebGPURenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.setAnimationLoop(render);
papa.appendChild(renderer.domElement);
papa.style.touchAction = 'none';
papa.addEventListener('pointermove', onPointerMove);
window.addEventListener('resize', onWindowResize);
};
const onWindowResize = () => {
width = papa.offsetWidth;
height = papa.offsetHeight;
windowHalfX = width / 2;
windowHalfY = height / 2;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
};
const onPointerMove = (event) => {
if (event.isPrimary === false) return;
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
};
const render = () => {
const time = Date.now() * 0.00005;
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (- mouseY - camera.position.y) * 0.05;
camera.lookAt(scene.position);
const h = ( 360 * (1.0 + time ) % 360) / 360;
material.color.setHSL(h, 0.5, 0.5);
renderer.render(scene, camera);
};
init();
FS(papa, player);
</script> {:5_150:}{:5_150:}{:5_150:} {:5_152:}{:5_152:} 鼠标跟随星星满屏飞舞 感谢小辣椒分享{:5_124:} {:5_152:}{:5_152:} liumang 发表于 2025-5-5 15:02
你可以做一次试试效果，
页:
[1]