Electric Romeo

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #papa { 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/w4/e.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
   
3.         #btnFs { bottom: 30px; color: #eee; }
   
4.         #player { position: absolute; left: -1000px; }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33471594" autoplay loop></audio>
   
9.         <div id="player"></div>
   
10. </div>
    
11. 
    
12. <script type="module">
    
13.         import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
    
14.         import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    
15. 
    
16.         basic3(papa, aud.paused);
    
17. 
    
18.         // 直管道
    
19.         const path = new THREE.LineCurve3(new THREE.Vector3(-0.5, 0, 0), new THREE.Vector3(0.5, 0, 0));
    
20.         const geometry = new THREE.TubeGeometry(path, 32, 1, 8, false);
    
21.         const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
    
22.         const mesh = new THREE.Mesh(geometry, material);
    
23.         mesh.rotateZ(Math.PI / 2);
    
24.         mesh.rotateY(Math.PI / 2.5);
    
25.         mesh.position.set(0, -1.5, -1);
    
26. 
    
27.         // 精灵
    
28.         const group = new THREE.Group();
    
29.         const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/bl01.png');
    
30.         for (var i = 0; i < 200; i ++) {
    
31.                 var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: Math.random() * 0xffffff, map: texture }));
    
32.                 sprite.scale.set(0.25, 0.25, 1);
    
33.                 sprite.position.set(
    
34.                         THREE.MathUtils.randFloatSpread(10),
    
35.                         THREE.MathUtils.randFloatSpread(10),
    
36.                         THREE.MathUtils.randFloatSpread(20)
    
37.                 );
    
38.                 group.add(sprite);
    
39.         }
    
40.         scene.add(mesh, group);
    
41. 
    
42.         // 动画
    
43.         const animate = () => {
    
44.                 requestAnimationFrame(animate);
    
45.                 const delta = clock.getDelta();
    
46.                 mesh.rotation.y += delta;
    
47.                 group.rotation.x += delta / 10;
    
48.                 group.rotation.y += delta / 10;
    
49.                 group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
    
50.                 renderer.render(scene, camera);
    
51.         };
    
52. 
    
53.         papa.onclick = (e) => {if (click3(mesh, e)) player.click()};
    
54. 
    
55.         papa.onmousemove = (e) => {
    
56.                 papa.title = click3(mesh, e) ? '播放/暂停' : '';
    
57.                 papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
    
58.         };
    
59. 
    
60.         aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
    
61. 
    
62.         animate();
    
63.         FS(papa, player);
    
64. </script>

复制代码

马黑黑

帖子使用直管道几何体绘制播放器。更详细的直管道绘制说明请查阅：

https://www.huachaowang.com/foru ... hread&tid=84192

花飞飞

新的管道播放器，启动 basic3之后管道绘制没几行代码，很简洁的样子，我去瞅瞅教程说明

红影

又是讲解后直接就有实例呢。这个直管道有趣，比较短，而且不两头不封堵，直接成了八面体了

红影

又这样贴图的精灵也很漂亮。看着它们在时空中穿梭着

马黑黑

红影 发表于 2025-6-17 19:26
又这样贴图的精灵也很漂亮。看着它们在时空中穿梭着

谢花

马黑黑

花飞飞 发表于 2025-6-17 19:13
新的管道播放器，启动 basic3之后管道绘制没几行代码，很简洁的样子，我去瞅瞅教程说明

还没瞅过吗都

马黑黑

红影 发表于 2025-6-17 19:23
又是讲解后直接就有实例呢。这个直管道有趣，比较短，而且不两头不封堵，直接成了八面体了

这个需要仔细看看几何体构造器里的各个参数，这是重点

花飞飞

把原来的三个点，去掉中间一个变成了两个点，new THREE.Vector3(-0.5, 0, 0), new THREE.Vector3(0.5, 0, 0)，就直直的了。。材质跟弯的可以替换通用

马黑黑

花飞飞 发表于 2025-6-17 19:43
把原来的三个点，去掉中间一个变成了两个点，new THREE.Vector3(-0.5, 0, 0), new THREE.Vector3(0.5, 0, 0 ...

这个不是这么理解。

两点成线，还是这个原理。但是，这两个点是三维上的点，每一个点都用 (x,y,z) 去记录点的位置，(-0.5, 0, 0) 是一个三维点，(0.5, 0, 0) 是另外一个三维点

花飞飞

精灵中间三个小圆是透明的，渲染成各种颜色后跟小播颜色搭配协调，很漂亮。。

马黑黑

花飞飞 发表于 2025-6-17 19:47
精灵中间三个小圆是透明的，渲染成各种颜色后跟小播颜色搭配协调，很漂亮。。

可以用ps设计一个类似酱紫的图片，这会产生符合自己需求的效果

花飞飞

马黑黑 发表于 2025-6-17 19:39
还没瞅过吗都

白天的回复都以打卡为主，没办法细看的。

花飞飞

马黑黑 发表于 2025-6-17 19:46
这个不是这么理解。

两点成线，还是这个原理。但是，这两个点是三维上的点，每一个点都用 (x,y,z) 去 ...

好哒，两点成直线，它没有第三个点的作用引力就没弯。。。
三维点这个好记。。看数据0.0.0就是了

马黑黑

花飞飞 发表于 2025-6-17 19:52
好哒，两点成直线，它没有第三个点的作用引力就没弯。。。
三维点这个好记。。看数据0.0.0就 ...

x, y, z 三个轴上的数字写在括号里，中间用小角逗号隔开

马黑黑

花飞飞 发表于 2025-6-17 19:49
白天的回复都以打卡为主，没办法细看的。

额，酱紫

花飞飞

马黑黑 发表于 2025-6-17 19:48
可以用ps设计一个类似酱紫的图片，这会产生符合自己需求的效果

老想找现成的实在不行就背景图上截一块，色彩比较协调

花飞飞

马黑黑 发表于 2025-6-17 19:53
x, y, z 三个轴上的数字写在括号里，中间用小角逗号隔开

哈哈，好哒。代码写法好严谨的，我总是想随意简化

花飞飞

马黑黑 发表于 2025-6-17 19:53
额，酱紫

特别是说明文或者教程，我一眼也看不出什么来