Bana-X

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #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; }
   
3.         #player { position: absolute; width: var(--size); height: var(--size); cursor: pointer; background: none; border-radius: 50%; }
   
4.         #btnFs { bottom: 20px; color: #eee; text-align: center; }
   
5.         #btnFs:hover { color: red; }
   
6.         #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; }
   
7. </style>
   
8. 
   
9. <div id="tz">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1955693518" autoplay loop></audio>
    
11.         <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
    
12.         <div id="player" title="播放/暂停"></div>
    
13. </div>
    
14. 
    
15. <script type="module">
    
16.         import * as THREE from 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';
    
17.         import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    
18. 
    
19.         const scene = new THREE.Scene();
    
20.         const clock = new THREE.Clock();
    
21.         const camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
    
22.         camera.position.set(0, 0, 5);
    
23.         const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    
24.         renderer.setSize(tz.offsetWidth, tz.offsetHeight);
    
25.         tz.appendChild(renderer.domElement);
    
26. 
    
27.         let limit= 100, pos = 0, step = 1;
    
28.         const ambLight = new THREE.AmbientLight(0xffd700);
    
29.         const dirLight = new THREE.DirectionalLight(0xffffff, 2);
    
30.         dirLight.position.set(pos, 50, 100);
    
31. 
    
32.         const ball = new THREE.Mesh(
    
33.                 new THREE.SphereGeometry(0.5),
    
34.                 new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 40 })
    
35.         );
    
36.         ball.position.z = Math.sin(Math.PI * 0.5);
    
37. 
    
38.         const pan = new THREE.Mesh(
    
39.                 new THREE.CircleGeometry(2, 20),
    
40.                 new THREE.MeshLambertMaterial({ wireframe: true })
    
41.         );
    
42.         pan.rotateY(Math.PI / 5);
    
43.         scene.add(ball, pan, ambLight, dirLight);
    
44. 
    
45.         const animate = () => {
    
46.                 requestAnimationFrame(animate);
    
47.                 const delta = clock.getDelta();
    
48.                 pos -= 100 * delta * step;
    
49.                 if (pos > limit || pos < -limit) step = -step;
    
50.                 dirLight.position.set(pos, 50, 100);
    
51.                 pan.rotation.z += delta / 2;
    
52.                 renderer.render(scene, camera);
    
53.         };
    
54. 
    
55.         window.onresize = () => {
    
56.                 camera.aspect = tz.offsetWidth / tz.offsetHeight;
    
57.                 camera.updateProjectionMatrix();
    
58.                 renderer.setSize(tz.offsetWidth, tz.offsetHeight);
    
59.         }
    
60. 
    
61.         aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
    
62. 
    
63.         animate();
    
64.         FS(tz, player);
    
65. </script>

复制代码

马黑黑

本帖：

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

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

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

花飞飞

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

花飞飞

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

花飞飞

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

花飞飞

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

马黑黑

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

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

马黑黑

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

谢赞

马黑黑

花飞飞 发表于 2025-6-1 18:58
球体的Phong 材质怎么这么与众不同，印象中材质都是长长的单词。。
查了下材质汇总表，原来是它。。。Mesh ...

Phong 是核心，材质名称为 MeshPhongMaterial，Mess，网格，Phong，有光泽的，Material，物质

马黑黑

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

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

杨帆

漂亮！谢谢马老师经典分享

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

马黑黑

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

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

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

杨帆

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

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

马黑黑

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

pos -= 100 * delta * step;

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

花飞飞

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

嗯哪，效果是一样的

花飞飞

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

我看看谢了几个赞

花飞飞

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

之前就是只看中间的，现在明白只看中间是对的。

花飞飞

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

好，动画源还是很丰富的

马黑黑

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

变色也可以哈