Electric Romeo
<style>#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; }
#btnFs { bottom: 30px; color: #eee; }
#player { position: absolute; left: -1000px; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33471594" autoplay loop></audio>
<div id="player"></div>
</div>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
basic3(papa, aud.paused);
// 直管道
const path = new THREE.LineCurve3(new THREE.Vector3(-0.5, 0, 0), new THREE.Vector3(0.5, 0, 0));
const geometry = new THREE.TubeGeometry(path, 32, 1, 8, false);
const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateZ(Math.PI / 2);
mesh.rotateY(Math.PI / 2.5);
mesh.position.set(0, -1.5, -1);
// 精灵
const group = new THREE.Group();
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/bl01.png');
for (var i = 0; i < 200; i ++) {
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: Math.random() * 0xffffff, map: texture }));
sprite.scale.set(0.25, 0.25, 1);
sprite.position.set(
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(20)
);
group.add(sprite);
}
scene.add(mesh, group);
// 动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y += delta;
group.rotation.x += delta / 10;
group.rotation.y += delta / 10;
group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
renderer.render(scene, camera);
};
papa.onclick = (e) => {if (click3(mesh, e)) player.click()};
papa.onmousemove = (e) => {
papa.title = click3(mesh, e) ? '播放/暂停' : '';
papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
};
aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
animate();
FS(papa, player);
</script> 帖子代码
<style>
#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; }
#btnFs { bottom: 30px; color: #eee; }
#player { position: absolute; left: -1000px; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33471594" autoplay loop></audio>
<div id="player"></div>
</div>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
basic3(papa, aud.paused);
// 直管道
const path = new THREE.LineCurve3(new THREE.Vector3(-0.5, 0, 0), new THREE.Vector3(0.5, 0, 0));
const geometry = new THREE.TubeGeometry(path, 32, 1, 8, false);
const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateZ(Math.PI / 2);
mesh.rotateY(Math.PI / 2.5);
mesh.position.set(0, -1.5, -1);
// 精灵
const group = new THREE.Group();
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/bl01.png');
for (var i = 0; i < 200; i ++) {
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: Math.random() * 0xffffff, map: texture }));
sprite.scale.set(0.25, 0.25, 1);
sprite.position.set(
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(20)
);
group.add(sprite);
}
scene.add(mesh, group);
// 动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y += delta;
group.rotation.x += delta / 10;
group.rotation.y += delta / 10;
group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
renderer.render(scene, camera);
};
papa.onclick = (e) => {if (click3(mesh, e)) player.click()};
papa.onmousemove = (e) => {
papa.title = click3(mesh, e) ? '播放/暂停' : '';
papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
};
aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
animate();
FS(papa, player);
</script>
帖子使用直管道几何体绘制播放器。更详细的直管道绘制说明请查阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=84192 新的管道播放器，启动 basic3之后管道绘制没几行代码，很简洁的样子，我去瞅瞅教程说明 又是讲解后直接就有实例呢。这个直管道有趣，比较短，而且不两头不封堵，直接成了八面体了{:4_187:} 又这样贴图的精灵也很漂亮。看着它们在时空中穿梭着{:4_187:} 红影 发表于 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
还没瞅过吗都
白天的回复都以打卡为主，没办法细看的。{:4_173:} 马黑黑 发表于 2025-6-17 19:46
这个不是这么理解。
两点成线，还是这个原理。但是，这两个点是三维上的点，每一个点都用 (x,y,z) 去 ...
{:4_173:}
好哒，两点成直线，它没有第三个点的作用引力就没弯。。。
三维点这个好记。。看数据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设计一个类似酱紫的图片，这会产生符合自己需求的效果
老想找现成的{:4_173:}实在不行就背景图上截一块，色彩比较协调 马黑黑 发表于 2025-6-17 19:53
x, y, z 三个轴上的数字写在括号里，中间用小角逗号隔开
哈哈，好哒。代码写法好严谨的，我总是想随意简化{:4_173:} 马黑黑 发表于 2025-6-17 19:53
额，酱紫
特别是说明文或者教程，我一眼也看不出什么来{:4_173:}