马黑黑 发表于 2025-6-1 18:04

Bana-X

<style>
        #tz { --size: 9vw; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/5/banax.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
        #player { position: absolute; width: var(--size); height: var(--size); cursor: pointer; background: none; border-radius: 50%; }
        #btnFs { bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: red; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1955693518" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
        <div id="player" title="播放/暂停"></div>
</div>

<script type="module">
        import * as THREE from 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';
        import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

        const scene = new THREE.Scene();
        const clock = new THREE.Clock();
        const camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
        camera.position.set(0, 0, 5);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(tz.offsetWidth, tz.offsetHeight);
        tz.appendChild(renderer.domElement);

        let limit= 100, pos = 0, step = 1;
        const ambLight = new THREE.AmbientLight(0xffd700);
        const dirLight = new THREE.DirectionalLight(0xffffff, 2);
        dirLight.position.set(pos, 50, 100);

        const ball = new THREE.Mesh(
                new THREE.SphereGeometry(0.5),
                new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 40 })
        );
        ball.position.z = Math.sin(Math.PI * 0.5);

        const pan = new THREE.Mesh(
                new THREE.CircleGeometry(2, 20),
                new THREE.MeshLambertMaterial({ wireframe: true })
        );
        pan.rotateY(Math.PI / 5);
        scene.add(ball, pan, ambLight, dirLight);

        const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                pos -= 100 * delta * step;
                if (pos > limit || pos < -limit) step = -step;
                dirLight.position.set(pos, 50, 100);
                pan.rotation.z += delta / 2;
                renderer.render(scene, camera);
        };

        window.onresize = () => {
                camera.aspect = tz.offsetWidth / tz.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(tz.offsetWidth, tz.offsetHeight);
        }

        aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

        animate();
        FS(tz, player);
</script>

马黑黑 发表于 2025-6-1 18:05

帖子代码


<style>
        #tz { --size: 9vw; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/5/banax.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
        #player { position: absolute; width: var(--size); height: var(--size); cursor: pointer; background: none; border-radius: 50%; }
        #btnFs { bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: red; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1955693518" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
        <div id="player" title="播放/暂停"></div>
</div>

<script type="module">
        import * as THREE from 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';
        import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

        const scene = new THREE.Scene();
        const clock = new THREE.Clock();
        const camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
        camera.position.set(0, 0, 5);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(tz.offsetWidth, tz.offsetHeight);
        tz.appendChild(renderer.domElement);

        let limit= 100, pos = 0, step = 1;
        const ambLight = new THREE.AmbientLight(0xffd700);
        const dirLight = new THREE.DirectionalLight(0xffffff, 2);
        dirLight.position.set(pos, 50, 100);

        const ball = new THREE.Mesh(
                new THREE.SphereGeometry(0.5),
                new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 40 })
        );
        ball.position.z = Math.sin(Math.PI * 0.5);

        const pan = new THREE.Mesh(
                new THREE.CircleGeometry(2, 20),
                new THREE.MeshLambertMaterial({ wireframe: true })
        );
        pan.rotateY(Math.PI / 5);
        scene.add(ball, pan, ambLight, dirLight);

        const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                pos -= 100 * delta * step;
                if (pos > limit || pos < -limit) step = -step;
                dirLight.position.set(pos, 50, 100);
                pan.rotation.z += delta / 2;
                renderer.render(scene, camera);
        };

        window.onresize = () => {
                camera.aspect = tz.offsetWidth / tz.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(tz.offsetWidth, tz.offsetHeight);
        }

        aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

        animate();
        FS(tz, player);
</script>

马黑黑 发表于 2025-6-1 18:13

本帖：

ThreeJS图形共两个：一是圆球，它使用 Phong 材质制作，可以镜面反射光源；二是2d大圆盘，线框化，使用朗伯特材质制作，该材质对光的反射方式是漫反射。

光源使用了环境光和平行光，前者起改善照明作用，后者照射图像产生反射。

动画两个：其一，大圆盘旋转，其二，平行光在X轴上来回巡视。动画均引入 ThreeJS 的 Clock 提供的关键帧间隔时差作为递增驱动，便于控制动画。

花飞飞 发表于 2025-6-1 18:52

这个最特别的是动画，球体旋转有见过，这个平行光巡视又是一个新的点。。
除了几何体可以动起来，场景随安装的轨道动起来，现在是光源也可以动起来。。
{:4_199:}

花飞飞 发表于 2025-6-1 18:58

球体的Phong 材质怎么这么与众不同，印象中材质都是长长的单词。。
查了下材质汇总表，原来是它。。。MeshPhongMaterial
这个镜面反光太棒了。。可以设置颜色的。灵活又方便{:4_173:}

花飞飞 发表于 2025-6-1 19:04

在这样的青山绿水之间，
两个几何体组合起来成一个风车状的物体不停旋转，
仿佛是带动了视频背景中的线条在舞动。。。
球体颜色与线条颜色协调美观，白老师作品颜值特别高。。
看着赏心悦目。。

花飞飞 发表于 2025-6-1 19:06

球体上因光源移动产生的明暗，看上去好象球体也在转似的。。{:4_173:}
你如果不说是光源在动，就以为是球体设置了摇摆在动。

马黑黑 发表于 2025-6-1 19:37

花飞飞 发表于 2025-6-1 19:06
球体上因光源移动产生的明暗，看上去好象球体也在转似的。。
你如果不说是光源在动，就以为是球 ...

球没有加入动画机制。阴暗变化如果像模拟球在旋转，也是可以的

马黑黑 发表于 2025-6-1 19:38

花飞飞 发表于 2025-6-1 19:04
在这样的青山绿水之间，
两个几何体组合起来成一个风车状的物体不停旋转，
仿佛是带动了视频背景中的线条 ...

谢赞

马黑黑 发表于 2025-6-1 19:39

花飞飞 发表于 2025-6-1 18:58
球体的Phong 材质怎么这么与众不同，印象中材质都是长长的单词。。
查了下材质汇总表，原来是它。。。Mesh ...
Phong 是核心，材质名称为 MeshPhongMaterial，Mess，网格，Phong，有光泽的，Material，物质

马黑黑 发表于 2025-6-1 19:41

花飞飞 发表于 2025-6-1 18:52
这个最特别的是动画，球体旋转有见过，这个平行光巡视又是一个新的点。。
除了几何体可以动起来，场景随安 ...

凡有位置、角度、明暗、大小等等的，都可以开发出动画

杨帆 发表于 2025-6-1 21:39

漂亮！谢谢马老师经典分享{:4_190:}

“平行光在X轴上来回巡视”动画，似乎不太明显

马黑黑 发表于 2025-6-1 21:51

杨帆 发表于 2025-6-1 21:39
漂亮！谢谢马老师经典分享

“平行光在X轴上来回巡视”动画，似乎不太明显

就是光源，比如太阳，从东到西，然后又从西到东

杨帆 发表于 2025-6-1 21:55

马黑黑 发表于 2025-6-1 21:51
就是光源，比如太阳，从东到西，然后又从西到东

是，效果实现了，只是移动速度设置慢了点

马黑黑 发表于 2025-6-1 22:02

杨帆 发表于 2025-6-1 21:55
是，效果实现了，只是移动速度设置慢了点

pos -= 100 * delta * step;

这句，改一下 100 为更大的数

花飞飞 发表于 2025-6-1 22:43

马黑黑 发表于 2025-6-1 19:37
球没有加入动画机制。阴暗变化如果像模拟球在旋转，也是可以的

嗯哪，效果是一样的

花飞飞 发表于 2025-6-1 22:44

马黑黑 发表于 2025-6-1 19:38
谢赞

我看看谢了几个赞{:4_173:}

花飞飞 发表于 2025-6-1 22:45

马黑黑 发表于 2025-6-1 19:39
Phong 是核心，材质名称为 MeshPhongMaterial，Mess，网格，Phong，有光泽的，Material，物质

{:4_173:}之前就是只看中间的，现在明白只看中间是对的。

花飞飞 发表于 2025-6-1 22:46

马黑黑 发表于 2025-6-1 19:41
凡有位置、角度、明暗、大小等等的，都可以开发出动画

好，动画源还是很丰富的

马黑黑 发表于 2025-6-1 23:19

花飞飞 发表于 2025-6-1 22:46
好，动画源还是很丰富的

变色也可以哈
页: [1] 2 3
查看完整版本: Bana-X