神话

马黑黑 · 发表于 2025-6-15 12:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-6-15 12:11

帖子代码

<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/t22/webp/huan.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { top: 30px; color: silver; }
#player { position: absolute; left: -1000px; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35437604" 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';
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
basic3(papa);
var group = new THREE.Group(), angle = 0;
var texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/texture/pgy.png');
var icosahedron = new THREE.Mesh(
new THREE.IcosahedronGeometry(2.4),
new THREE.MeshNormalMaterial()
);
for (var i = 0; i < 160; i ++) {
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture }));
sprite.scale.set(1, 1, 0.5);
sprite.position.set(
THREE.MathUtils.randFloatSpread(20),
THREE.MathUtils.randFloatSpread(20),
THREE.MathUtils.randFloatSpread(25)
);
group.add(sprite);
}
scene.add(icosahedron, group);
var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
angle = (angle + delta / 5) % 360;
camera.position.x = 20 * Math.sin(angle);
camera.position.z = 20 * Math.cos(angle);
group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
camera.lookAt(0, 0, 0);
renderer.render(scene, camera);
};
animate();
FS(papa, player);
papa.onclick = (e) => {if (click3(icosahedron, e)) player.click()};
papa.onmousemove = (e) => {
papa.title = click3(icosahedron, e) ? '播放/暂停' : '';
papa.style.cursor = click3(icosahedron, e) ? 'pointer' : 'default';
};
aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
</script>

复制代码

马黑黑 · 发表于 2025-6-15 12:25

本帖：主要演示 basic3 模块在音画帖中的应用

12行：导入 basic3 模块，花括号里的变量是模块导出的变量，应全部导入；

15行：启动 basic3() 函数，这样，就可以制作 ThreeJS 图像及相关内容；

17、18行：定义精灵的相关变量、动画角度变量；

19~22行：绘制二十面体；

23~32行：绘制精灵；

33行：将二十面体和精灵组加入场景；

35~44行：制作动画，这是相机动画 + 精灵贴图动画（42行）。相机绕圈的速度控制在 38 行，delta 的除数越大，速度越慢。39、40行的乘数（20）会改变精灵的尺寸；

49行：二十面体点击事件。其实是在 papa div 上的点击，若范围在二十面体内，则触发 player div 的点击（player div躲起来了）；

51~54行：鼠标经过二十面体。其实是鼠标在 papa div 上的移动时间，若范围在二十面体内，则显示 title 提示语（未做只能处理，其实支持 ALT+X 组合键操作）、出现手型指针图标。

56行：通过监听 audio 标签两个事件控制 ThreeJS 时钟（clock）。