太空

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.         #papa { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://638183.freep.cn/638183/small/tdks.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; }
   
3. #player { position: absolute; z-index: 9; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
   
4.         #player:hover { filter: hue-rotate(90deg); }
   
5.         #btnFs { bottom: 30px; color: #eee; }
   
6.         #btnFs:hover { color: red; }
   
7.         @keyframes rot { to { transform: rotate(360deg); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1393476199" autoplay loop></audio>
    
12.         <img id="player" src="https://638183.freep.cn/638183/small/mufuz2.jpg" width="10%" title="播放/暂停" />
    
13. </div>
    
14. 
    
15. <script type="importmap">
    
16.         {
    
17.                 "imports": {
    
18.                         "three": "https://esm.sh/three/build/three.webgpu.js",
    
19.                         "three/tsl": "https://esm.sh/three@0.176.0/es2022/build/three.tsl.mjs"
    
20.                 }
    
21.         }
    
22. </script>
    
23. 
    
24. <script type="module">
    
25. 
    
26. import * as THREE from 'three';
    
27. import {uniform, time, instanceIndex, instancedBufferAttribute} from 'three/tsl';
    
28. import {FS} from 'https://638183.freep.cn/638183/web/ku/fscreen.js';
    
29. 
    
30. let camera, scene, renderer, material;
    
31. let mouseX = 0, mouseY = 0;
    
32. let width = papa.offsetWidth, height = papa.offsetHeight;
    
33. let windowHalfX = width / 2;
    
34. let windowHalfY = height / 2;
    
35. 
    
36. const init = () => {
    
37.         camera = new THREE.PerspectiveCamera(55, width / height, 2, 2000);
    
38.         camera.position.z = 1000;
    
39.         scene = new THREE.Scene();
    
40.         scene.fog = new THREE.FogExp2(0x000000, 0.001);
    
41.         const count = 6000;
    
42.         const positions = [];
    
43.         for (let i = 0; i < count; i ++) {
    
44.                 positions.push( 2000 * Math.random() - 1000, 2000 * Math.random() - 1000, 2000 * Math.random() - 1000 );
    
45.         }
    
46.         const positionAttribute = new THREE.InstancedBufferAttribute(new Float32Array(positions), 3);
    
47.         const map = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/star.png');
    
48.         map.colorSpace = THREE.SRGBColorSpace;
    
49.         material = new THREE.SpriteNodeMaterial({sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1});
    
50.         material.color.setHSL(1.0, 0.3, 0.7, THREE.SRGBColorSpace);
    
51.         material.positionNode = instancedBufferAttribute(positionAttribute);
    
52.         material.rotationNode = time.add(instanceIndex).sin();
    
53.         material.scaleNode = uniform(15);
    
54.         const particles = new THREE.Sprite(material);
    
55.         particles.count = count;
    
56.         scene.add(particles);
    
57.         renderer = new THREE.WebGPURenderer();
    
58.         renderer.setPixelRatio(window.devicePixelRatio);
    
59.         renderer.setSize(width, height);
    
60.         renderer.setAnimationLoop(render);
    
61.         papa.appendChild(renderer.domElement);
    
62.         papa.style.touchAction = 'none';
    
63.         papa.addEventListener('pointermove', onPointerMove);
    
64.         window.addEventListener('resize', onWindowResize);
    
65. };
    
66. 
    
67. const onWindowResize = () => {
    
68.         width = papa.offsetWidth;
    
69.         height = papa.offsetHeight;
    
70.         windowHalfX = width / 2;
    
71.         windowHalfY = height / 2;
    
72.         camera.aspect = width / height;
    
73.         camera.updateProjectionMatrix();
    
74.         renderer.setSize(width, height);
    
75. };
    
76. 
    
77. const onPointerMove = (event) => {
    
78.         if (event.isPrimary === false) return;
    
79.         mouseX = event.clientX - windowHalfX;
    
80.         mouseY = event.clientY - windowHalfY;
    
81. };
    
82. 
    
83. const render = () => {
    
84.         const time = Date.now() * 0.00005;
    
85.         camera.position.x += (mouseX - camera.position.x) * 0.05;
    
86.         camera.position.y += (- mouseY - camera.position.y) * 0.05;
    
87.         camera.lookAt(scene.position);
    
88.         const h = ( 360 * (1.0 + time ) % 360) / 360;
    
89.         material.color.setHSL(h, 0.5, 0.5);
    
90.         renderer.render(scene, camera);
    
91. };
    
92. 
    
93. init();
    
94. FS(papa, player);
    
95. 
    
96. </script>

复制代码

花飞飞

沙发又被我抢了。

马黑黑

本帖基于 three.js 的 webGPU API，仅为测试。

WebGPU 相对于 WebGL 更为强大，但是目前它的兼容性还做得不好，three.js 对此采用了一个回退机制，所以在非 https 协议的网站中，控制台会有一个警告级别的提示。

花飞飞

鼠标跟随能互动的超级好玩。。。
这个星星是彩色的，鼠标移动的方向跟星星运动方向不同
空间感绝了，能感觉到太空深处。。

马黑黑

花飞飞 发表于 2025-5-3 17:42
沙发又被我抢了。

你坐的是高端板凳，材质和沙发一样，舒适度也和沙发无异

花飞飞

星星居然是个可以替换的图片，我的天，那岂不是可以有无限种可能。。。。
之前你说那个扑面粒子有5000个，这个是有6000个么。

花飞飞

马黑黑 发表于 2025-5-3 17:45
你坐的是高端板凳，材质和沙发一样，舒适度也和沙发无异

才不是，江湖默认第一个回复坐的都是沙发。

花飞飞

马黑黑 发表于 2025-5-3 17:43
本帖基于 three.js 的 webGPU API，仅为测试。

WebGPU 相对于 WebGL 更为强大，但是目前它的兼容性还做 ...

能运行，能互动，目前并没收到警告提示

马黑黑

花飞飞 发表于 2025-5-3 17:52
能运行，能互动，目前并没收到警告提示

警告是无关紧要的。错误才是致命的：运行不了。

另外，论坛是 https 协议，没问题的

马黑黑

花飞飞 发表于 2025-5-3 17:50
才不是，江湖默认第一个回复坐的都是沙发。

第一个回复是我呀，二楼

马黑黑

花飞飞 发表于 2025-5-3 17:49
星星居然是个可以替换的图片，我的天，那岂不是可以有无限种可能。。。。
之前你说那个扑面粒子 ...

但是非常复杂，没有 css + HTML + CSS 那么一目了然

马黑黑

花飞飞 发表于 2025-5-3 17:44
鼠标跟随能互动的超级好玩。。。
这个星星是彩色的，鼠标移动的方向跟星星运动方向不同
空间感绝了，能感 ...

星星是变色的

花飞飞

马黑黑 发表于 2025-5-3 17:55
警告是无关紧要的。错误才是致命的：运行不了。

另外，论坛是 https 协议，没问题的

没见过警告，。。。
开始学代码时整过不能运行的，这个见过
论坛应该能兼容多数效果吧。。不然它会被用的人淘汰的

花飞飞

马黑黑 发表于 2025-5-3 17:55
第一个回复是我呀，二楼

你发的贴子啊，有补充说明是正常的。你总 不能把东西放在沙发上。。
所以回复的第一个人坐的就是沙发。

花飞飞

马黑黑 发表于 2025-5-3 17:56
但是非常复杂，没有 css + HTML + CSS 那么一目了然

看到引用了两个JS，还有这么大一群代码，每个代码都是一颗星星的节奏。

花飞飞

马黑黑 发表于 2025-5-3 17:57
星星是变色的

各种颜色随机出现，这个色更好看些。。

马黑黑

花飞飞 发表于 2025-5-3 18:06
看到引用了两个JS，还有这么大一群代码，每个代码都是一颗星星的节奏。

第一个JS是引路用的，用来构造资源对象。three.js 需要引入太多资源，这些资源目前来源于那个 esm.sh 中转站，目前是比较好用的

马黑黑

花飞飞 发表于 2025-5-3 18:06
各种颜色随机出现，这个色更好看些。。

五色令人目盲

马黑黑

花飞飞 发表于 2025-5-3 18:03
没见过警告，。。。
开始学代码时整过不能运行的，这个见过
论坛应该能兼容多数效果吧。。不然它会被用 ...

这个不是论坛的问题，是网站的协议，http 和 https ，前者现在被认为是不安全的，用个 WebGPU 接口也会警告有危险。