论坛 › 欢乐水吧 › 快乐骑游 （学习黑黑鼠标跟随满星天效果）

小辣椒 发表于 2025-5-4 21:44

快乐骑游 （学习黑黑鼠标跟随满星天效果）

<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>

小辣椒 发表于 2025-5-4 21:45

现在可以看见星星了{:4_205:}

小辣椒 发表于 2025-5-4 21:46

谢谢黑黑源码分享@马黑黑

旧图修改了一下就做出来了，主要看看效果，前面看不见，急的

小辣椒 发表于 2025-5-4 21:49

现在是系统自带浏览器，以前很少用，以后就用这个了{:4_173:}

红影 发表于 2025-5-4 21:50

骑行在满天星斗下，这个漂亮。小播也是骑行图呢，亲爱的构思巧妙{:4_199:}

小辣椒 发表于 2025-5-4 21:53

红影 发表于 2025-5-4 21:50
骑行在满天星斗下，这个漂亮。小播也是骑行图呢，亲爱的构思巧妙

亲爱的，这个本来准备做那个宇宙的，那天做好看不见效果。郁闷S，现在可以了，浏览器问题

红影 发表于 2025-5-4 22:39

小辣椒 发表于 2025-5-4 21:53
亲爱的，这个本来准备做那个宇宙的，那天做好看不见效果。郁闷S，现在可以了，浏览器问题

嗯嗯，这个帖子的满天星斗很正常啊，还能鼠标拖动呢{:4_187:}

梦江南 发表于 2025-5-5 08:28

这个太漂亮了，满天星星会变色，还会跟鼠标变大小。{:4_187:}

梦江南 发表于 2025-5-5 08:30

小辣椒，我自带的浏览被2345压住了，现在看有的帖子看不到。这怎么弄啊？

马黑黑 发表于 2025-5-5 09:28

小辣椒 发表于 2025-5-4 21:46
谢谢黑黑源码分享@马黑黑

旧图修改了一下就做出来了，主要看看效果，前面看不见，急的

其实不用急。能做就做，做不好先放一边。

老谟深虑 发表于 2025-5-5 11:13

            欣赏佳作，学习了。

小辣椒 发表于 2025-5-5 14:18

梦江南 发表于 2025-5-5 08:28
这个太漂亮了，满天星星会变色，还会跟鼠标变大小。

阿姨好，我这个也是只有系统自带浏览器可以看见，我是W10系统

小辣椒 发表于 2025-5-5 14:20

红影 发表于 2025-5-4 22:39
嗯嗯，这个帖子的满天星斗很正常啊，还能鼠标拖动呢

黑黑说浏览器升级可以，但我其他浏览器升级没有效果出来，这个系统自带的浏览器用了直接出来了，我才上个月刚装的系统

小辣椒 发表于 2025-5-5 14:22

梦江南 发表于 2025-5-5 08:30
小辣椒，我自带的浏览被2345压住了，现在看有的帖子看不到。这怎么弄啊？

阿姨我没有2345的，我现在是用W10系统自带浏览器，其他浏览器也是看不见，具体我也是不怎么懂

小辣椒 发表于 2025-5-5 14:22

马黑黑 发表于 2025-5-5 09:28
其实不用急。能做就做，做不好先放一边。

主要没有看见效果有点急，现在可以看见效果了就好了

小辣椒 发表于 2025-5-5 14:23

老谟深虑 发表于 2025-5-5 11:13
欣赏佳作，学习了。

问好老谟，谢谢欣赏{:4_187:}

杨帆 发表于 2025-5-5 16:20

小辣椒 发表于 2025-5-5 14:22
主要没有看见效果有点急，现在可以看见效果了就好了

是，可以看见效果的感觉真好，谢谢小辣椒精彩分享{:4_204:}

马黑黑 发表于 2025-5-5 18:24

小辣椒 发表于 2025-5-5 14:22
主要没有看见效果有点急，现在可以看见效果了就好了

基于 WebGPU 的，由于是试验阶段，浏览器对它的支持度各有不同

红影 发表于 2025-5-5 20:48

小辣椒 发表于 2025-5-5 14:20
黑黑说浏览器升级可以，但我其他浏览器升级没有效果出来，这个系统自带的浏览器用了直接出来了，我才上个 ...

我也不清楚，不懂电脑，不过倒是都能正常看，这个效果特别震撼{:4_187:}

小辣椒 发表于 2025-5-5 21:27

杨帆 发表于 2025-5-5 16:20
是，可以看见效果的感觉真好，谢谢小辣椒精彩分享

谢谢杨帆欣赏{:4_187:}

查看完整版本: 快乐骑游 （学习黑黑鼠标跟随满星天效果）