论坛 › 动画音画 › 神话

马黑黑 发表于 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: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）。

马黑黑 发表于 2025-6-15 12:30

记得很多N年前，花飞飞用 Flash 制作过《神话》，对这个曲子已经受不了了{:4_170:}

这支曲子其实非常不错：箫和埙的配合演奏能如此完美无瑕，颇为神奇。

马黑黑 发表于 2025-6-15 12:33

帖子背景图旧图复用，原来有个帖子用过的：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=65276&highlight=%BB%C3

马黑黑 发表于 2025-6-15 12:35

basic3 模块的更多说明：basic3文档 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

红影 发表于 2025-6-15 13:45

黑黑刚刚讲好 basic3 模块，范例这么快就来了，很赞{:4_199:}

红影 发表于 2025-6-15 13:49

二十面体外漫天飞舞的蒲公英，把一切变得那么玄幻朦胧{:4_187:}

红影 发表于 2025-6-15 13:49

马黑黑 发表于 2025-6-15 12:33
帖子背景图旧图复用，原来有个帖子用过的：

https://www.huachaowang.com/forum.php?mod=viewthread&tid ...

黑黑好记性啊，去看了，那是22年的帖子，隔了那么久你还记得啊{:4_173:}

樵歌 发表于 2025-6-15 14:06

{:4_199:}

马黑黑 发表于 2025-6-15 16:48

樵歌 发表于 2025-6-15 14:06


谢鼓

马黑黑 发表于 2025-6-15 16:48

红影 发表于 2025-6-15 13:49
黑黑好记性啊，去看了，那是22年的帖子，隔了那么久你还记得啊

图片命名一般都是拼音（双拼），一看就知道大概意思

马黑黑 发表于 2025-6-15 16:48

红影 发表于 2025-6-15 13:49
二十面体外漫天飞舞的蒲公英，把一切变得那么玄幻朦胧

好看吧

马黑黑 发表于 2025-6-15 16:51

红影 发表于 2025-6-15 13:45
黑黑刚刚讲好 basic3 模块，范例这么快就来了，很赞

这个昨晚写的模块，极其简单：

一、导出 ThreeJS 核心库5大基本变量；
二、写一个主函数和一个辅助函数，主函数就是 class3()，辅助函数是 click3()。

花飞飞 发表于 2025-6-15 16:55

马黑黑 发表于 2025-6-15 12:30
记得很多N年前，花飞飞用 Flash 制作过《神话》，对这个曲子已经受不了了

这支曲子其实非常不 ...

中午手机看了一眼，听出来了萧，没想到还有埙这么冷 门的乐器。{:4_173:}
那时候玩F的作品，每句歌词都有优美转场，还得跟音乐配着不能关，听了无数遍，你到是还记得我发的牢骚。哈哈。。

花飞飞 发表于 2025-6-15 16:57

马黑黑 发表于 2025-6-15 12:25
本帖：主要演示 basic3 模块在音画帖中的应用

12行 ：导入 basic3 模块，花括号里的变量是模块导出的变 ...

看来手机看时猜得没错，是精灵附体。。
不过basic3 模块是什么，我得去补一下教程。{:4_173:}

马黑黑 发表于 2025-6-15 17:08

花飞飞 发表于 2025-6-15 16:57
看来手机看时猜得没错，是精灵附体。。
不过basic3 模块是什么，我得去补一下教程。

这是自定义封装的模块。这个模块的使用没有 spriteparticle.js 那么便捷，但是它提供更丰富的创作机会

马黑黑 发表于 2025-6-15 17:09

花飞飞 发表于 2025-6-15 16:55
中午手机看了一眼，听出来了萧，没想到还有埙这么冷 门的乐器。
那时候玩F的作品，每句歌词都 ...

俺用笔记本记着{:4_170:}

花飞飞 发表于 2025-6-15 18:15

马黑黑 发表于 2025-6-15 12:25
本帖：主要演示 basic3 模块在音画帖中的应用

12行 ：导入 basic3 模块，花括号里的变量是模块导出的变 ...

你的实例说明太细致了。。二十面体好久没出场，怪好看的。
那个二十面点击事件最有意思，只在这个范围内触发，只在这个范围内有提示。。
难怪之前看到无论小播移动到哪个位置，都一样能控制动态。。原来是设定了触发

花飞飞 发表于 2025-6-15 18:23

马黑黑 发表于 2025-6-15 12:33
帖子背景图旧图复用，原来有个帖子用过的：

https://www.huachaowang.com/forum.php?mod=viewthread&tid ...

去瞅了一下，
很迷幻，要盯得时间长一些，
它能变出各种意想不到的组合形状来{:4_173:}

查看完整版本: 神话