Hakim

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #tz { --size: 15vw; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #cceeff; 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; 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=1886723467" autoplay loop></audio>
    
11.         <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/32/04/video6822f57421ab3.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/web/ku/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(60, 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.         const pic1 = 'https://638183.freep.cn/638183/t24/1/levels.jpg';
    
28.         const pic2 = 'https://638183.freep.cn/638183/web/svg/flower_3s.svg';
    
29. 
    
30.         const texture1 = new THREE.TextureLoader().load(pic1, () => {
    
31.                 texture1.colorSpace = THREE.SRGBColorSpace;
    
32.                 renderer.render(scene, camera);
    
33.         });
    
34. 
    
35.         const texture2 = new THREE.TextureLoader().load(pic2, () => {
    
36.                 texture2.colorSpace = THREE.SRGBColorSpace;
    
37.                 texture2.wrapS = THREE.RepeatWrapping;
    
38.                 texture2.wrapT = THREE.RepeatWrapping;
    
39.                 texture2.repeat.set(6, 4);
    
40.                 renderer.render(scene, camera);
    
41.         });
    
42. 
    
43.         const ball = new THREE.Mesh(
    
44.                 new THREE.SphereGeometry(),
    
45.                 new THREE.MeshBasicMaterial({ map: texture2, transparent: true })
    
46.         );
    
47. 
    
48.         const floor = new THREE.Mesh(
    
49.                 new THREE.PlaneGeometry(15, 15),
    
50.                 new THREE.MeshBasicMaterial({ color: 0xffeeee, map: texture1, side: THREE.DoubleSide })
    
51.         );
    
52. 
    
53.         scene.add(floor, ball);
    
54. 
    
55.         let angle = 0;
    
56.         const animate = () => {
    
57.                 const delta = clock.getDelta();
    
58.                 angle += delta;
    
59.                 ball.rotation.y -= delta / 2;
    
60.                 camera.position.x = 1 * Math.cos(angle);
    
61.                 camera.position.y = 1 * Math.sin(angle);
    
62.                 camera.lookAt(0,0,0);
    
63.                 renderer.render(scene, camera);
    
64.                 requestAnimationFrame(animate);
    
65.         };
    
66. 
    
67.         tz.onclick = (e) => {
    
68.                 if (e.target.id !== 'player') return;
    
69.                 aud.paused ? clock.stop() : clock.start();
    
70.         }
    
71. 
    
72.         window.onresize = () => {
    
73.                 camera.aspect = tz.offsetWidth / tz.offsetHeight;
    
74.                 camera.updateProjectionMatrix();
    
75.                 renderer.setSize(tz.offsetWidth, tz.offsetHeight);
    
76.                 tz.style.setProperty('--size', `${tz.offsetWidth / 5}px`);
    
77.         }
    
78. 
    
79.         animate();
    
80.         FS(tz, player);
    
81. </script>

复制代码

马黑黑

本帖：

一、#tz { ... } 选择器没有使用图片做背景，只设置了一个背景颜色；

二、观赏帖子所看到的帖子背景，使用 ThreeJS 平面缓冲几何体 PlaneGeometry 实现，其材质是 MeshBasicMaterial 基础材质，用 map 参数给它贴背景图，同时使用颜色叠加到纹理形成总体效果。背景贴图需要注意平面矩形的尺寸设置，THREE.PlaneGeometry(15, 15)，略大一些避免背景四周有空缺；

三、正中央的球体用球形缓冲几何体 SphereGeometry 实现，材质也是 MeshBasicMaterial 基础材质，纹理贴个 SVG 图片并开启透明、6*4重复图片形成酱紫的效果。圆球并不接受点击操作，它的上方有一个隐形的 id="player" 的HTML标签，是它接受点击操作，通过 FS 模块实现交互；

四、动态背景的实现，是通过相机动画实现：相机在 x、y 轴上做移动，致使看到的效果貌似平面缓冲几何体（背景）在移动。相机动画需要注意 lookAt 即聚焦方法的设置，位置始终指向 (0, 0, 0)，就是一直盯着场景中心拍摄；

五、泡泡是视频的效果。

杨帆

哇，好漂亮！谢谢马老师经典分享，祝双节愉快

花飞飞

马黑黑 发表于 2025-5-30 18:36
本帖：

一、#tz { ... } 选择器没有使用图片做背景，只设置了一个背景颜色；

原来背景是相机移位产生的动态效果，刚看到还以为是精灵体山水成精了，动来动去的

马黑黑

花飞飞 发表于 2025-5-30 20:32
原来背景是相机移位产生的动态效果，刚看到还以为是精灵体山水成精了，动来动去的

精灵是个平面，相机移动影响不到它的

花飞飞

背景和几何体可以同时使用图片纹理来装饰，太好看了。。
球形几何体的纹理贴图用了重复的四方连续，尺寸设置一下就可控制数量了吧。。
这个设计也是新的。。漂亮

花飞飞

马黑黑 发表于 2025-5-30 20:35
精灵是个平面，相机移动影响不到它的

对，今天看精灵的时候还赞叹她够稳的。咋都不动
不过你这背景效果真的像是成精了。
相机移位产生动态，这个之前就有，不过不是作用于背景，而多是几何体。。

花飞飞

贴图似乎只显示正面，背面部分并没有像往常那样透出来。。
镂空看过去是背景。。
这图案如果换成漂亮的花，那岂不是个花球体。。想想就好看。。

花飞飞

还有看到相机要注意聚焦~~新贴新知识点，看完说明再回头瞅瞅代码。。
反正是要反复看才一次再一次的理解它。
音乐好听，轻柔缓和。。

马黑黑

花飞飞 发表于 2025-5-30 20:44
还有看到相机要注意聚焦~~新贴新知识点，看完说明再回头瞅瞅代码。。
反正是要反复看才一次再一次的理解它 ...

animate 函数那里，基于相机的动画，也就是几句代码

马黑黑

花飞飞 发表于 2025-5-30 20:43
贴图似乎只显示正面，背面部分并没有像往常那样透出来。。
镂空看过去是背景。。
这图案如果换成漂亮的花 ...

当使用透明贴图做纹理，开启 transparent 之后就是这个效果，透明度设置多少没关系，双面渲染与否没关系。ThreeJS有很多东东解释不清。

花飞飞

马黑黑 发表于 2025-5-30 20:46
animate 函数那里，基于相机的动画，也就是几句代码

看到了三行，sin 和cos 你说过XY轴同时动的话要分开写的。现在看到实例了

马黑黑

花飞飞 发表于 2025-5-30 20:41
对，今天看精灵的时候还赞叹她够稳的。咋都不动
不过你这背景效果真的像是成精了。
相机移位 ...

这个帖子是在写精灵章节之前就做过的，只是没法出来。当时写这个帖子是配套相机动画教程，结果相机动画还没写呢，先写了精灵

马黑黑

花飞飞 发表于 2025-5-30 20:49
看到了三行，sin 和cos 你说过XY轴同时动的话要分开写的。现在看到实例了

这个三角函数正余弦的，基于平面的话，就是绕圆运动

花飞飞

马黑黑 发表于 2025-5-30 20:48
当使用透明贴图做纹理，开启 transparent 之后就是这个效果，透明度设置多少没关系，双面渲染与否没关系 ...

明白了。。有这么神奇的效果，
是不是默认没有光源照所以，
背景就跟月背 一样看不到了。。

花飞飞

马黑黑 发表于 2025-5-30 20:49
这个帖子是在写精灵章节之前就做过的，只是没法出来。当时写这个帖子是配套相机动画教程，结果相机动画还 ...

原来这是配套相机动画，是精灵插队了哈。。哈哈。。。

马黑黑

花飞飞 发表于 2025-5-30 21:00
明白了。。有这么神奇的效果，
是不是默认没有光源照所以，
背景就跟月背 一样看不到了。。

这个应该是纹理设置了透明后的特性，估计光照不会影响到双面渲染效果

花飞飞

马黑黑 发表于 2025-5-30 20:51
这个三角函数正余弦的，基于平面的话，就是绕圆运动

好哒。。跟这个正弦余弦听你说过两三次了，有点印象了。

马黑黑

花飞飞 发表于 2025-5-30 21:03
好哒。。跟这个正弦余弦听你说过两三次了，有点印象了。

幼儿园高级数学讲到的知识点