老板花一万大洋让我写的艺术工作室官网？！ HeroSection 再度来袭！(Three.js)

前端大全 · 公众号 · 前端 · 2025-03-28 09:13

正文

请到「今天看啥」查看全文

GIF 压缩太多了内容了，实际要好看很多）。

PC端在线预览地址: https://fluid-light.vercel.appDebug调试界面: https://fluid-light.vercel.app/#debug源码地址: https://github.com/hexianWeb/fluid-light

基础场景搭建

首先我来为你解读一下这个场景里面有什么，他非常简单。只有一个 「可以接受光照影响的平面几何体」 以及 「数个点光源」 构成，仅此而已。让我去掉后处理以及一些页面文本元素展示给你看构建这样的一个基础场景不难。

构建平面几何体

让我们先来解决平面几何体值得注意的是，为了让显示效果更好，我使用了正交相机并让平面覆盖整个视窗大小

    this.geometry = new THREE.PlaneGeometry(2 * 屏幕宽高比, 2);

然后构建相应的物理材质，可以去 polyhaven 下载一些自己喜欢的 texture 并下载下来。根据右边的分类选择纹理大类细分，随后选择想要下载的纹理点击下载。因为我们本质是需要 Displacement Texture 置换贴图 & Normal Texture 法线贴图所以不需要太在意这个纹理是作用在什么物件上面的随后将纹理导入后赋予材质相应的属性，并对部分参数进行调整。通常直接赋予 displacementMap 后 Threejs 中显示平面的凹凸会特别明显。所以记得通过 displacementScale 来调整相应的大小。

    this.material = new THREE.MeshPhysicalMaterial({
      color: '#121423',
      metalness: 0.59,
      roughness: 0.41,
      displacementMap: 下载的纹理贴图,
      displacementScale: 0.1,
      normalMap: 下载的法线贴图,
      normalScale: new THREE.Vector2(0.68, 0.75),
      side: THREE.FrontSide
    });

最后将物体加入场景即可

    this.mesh = new THREE.Mesh(this.geometry, this.material);
    scene.add(this.mesh);

(tips: 「MeshStandardMaterial」 和 「MeshPhysicalMaterial」 适合需要真实感光照和复杂物理特性的场景，但性能消耗较高。如果您的电脑出现卡顿可以选择消耗较少性能的物理材质)

灯光加入战场

在本案例中，高级感的来源之一就是灯光的变换。如果您足够细心，可能会注意到一些更微妙的细节：场景中的灯光并不是简单地从 A Color 切换到 B Color ，而是同时存在多个光源，并且它们的强度也在动态变化。这种设计使得场景的光影效果更加丰富和立体。如果场景中只有一个光源，效果可能会显得单调。而本案例中，灯光的变化呈现出一种层次感： 「中间是白色，周围还有一层类似年轮的光圈，最后逐渐扩散为纯色背景」 。这种效果的关键在于 「同一时间场景中存在多个点光源」 。虽然多个光源会显著增加性能消耗，但为了实现唯美的视觉效果，这是值得的。让我们逐步分析灯光是如何实现的。