Hakim

马黑黑 发表于 2025-5-30 18:35

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

帖子代码

<style>
#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; }
#player { position: absolute; width: var(--size); height: var(--size); cursor: pointer; background: none; border-radius: 50%; }
#btnFs { bottom: 20px; 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=1886723467" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/32/04/video6822f57421ab3.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>

<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/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(60, 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);

const pic1 = 'https://638183.freep.cn/638183/t24/1/levels.jpg';
const pic2 = 'https://638183.freep.cn/638183/web/svg/flower_3s.svg';

const texture1 = new THREE.TextureLoader().load(pic1, () => {
texture1.colorSpace = THREE.SRGBColorSpace;
renderer.render(scene, camera);
});

const texture2 = new THREE.TextureLoader().load(pic2, () => {
texture2.colorSpace = THREE.SRGBColorSpace;
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set(6, 4);
renderer.render(scene, camera);
});

const ball = new THREE.Mesh(
new THREE.SphereGeometry(),
new THREE.MeshBasicMaterial({ map: texture2, transparent: true })
);

const floor = new THREE.Mesh(
new THREE.PlaneGeometry(15, 15),
new THREE.MeshBasicMaterial({ color: 0xffeeee, map: texture1, side: THREE.DoubleSide })
);

scene.add(floor, ball);

let angle = 0;
const animate = () => {
const delta = clock.getDelta();
angle += delta;
ball.rotation.y -= delta / 2;
camera.position.x = 1 * Math.cos(angle);
camera.position.y = 1 * Math.sin(angle);
camera.lookAt(0,0,0);
renderer.render(scene, camera);
requestAnimationFrame(animate);
};

tz.onclick = (e) => {
if (e.target.id !== 'player') return;
aud.paused ? clock.stop() : clock.start();
}

window.onresize = () => {
camera.aspect = tz.offsetWidth / tz.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.style.setProperty('--size', `${tz.offsetWidth / 5}px`);
}

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

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

本帖最后由马黑黑于 2025-5-30 19:57 编辑

本帖：

一、#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 19:44

哇，好漂亮！谢谢马老师经典分享，祝双节愉快{:4_191:}

花飞飞 发表于 2025-5-30 20:32

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

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

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

马黑黑 发表于 2025-5-30 20:35

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

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

花飞飞 发表于 2025-5-30 20:38

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

花飞飞 发表于 2025-5-30 20:41

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

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

花飞飞 发表于 2025-5-30 20:43

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

花飞飞 发表于 2025-5-30 20:44

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

马黑黑 发表于 2025-5-30 20:46

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

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

马黑黑 发表于 2025-5-30 20:48

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

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

花飞飞 发表于 2025-5-30 20:49

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

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

马黑黑 发表于 2025-5-30 20:49

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

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

马黑黑 发表于 2025-5-30 20:51

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

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

花飞飞 发表于 2025-5-30 21:00

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

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

花飞飞 发表于 2025-5-30 21:01

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

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

马黑黑 发表于 2025-5-30 21:02

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

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

花飞飞 发表于 2025-5-30 21:03

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

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

马黑黑 发表于 2025-5-30 21:03

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

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

页: [1] 2 3 4 5

花潮论坛's Archiver

Hakim