Three.js - 使用 bumpMap 凹凸贴图创建皱纹

最新推荐文章于 2024-11-22 15:49:19 发布

「已注销」

最新推荐文章于 2024-11-22 15:49:19 发布

阅读量2k

点赞数

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/82424066

版权

本文介绍了如何在Three.js中应用bumpMap凹凸贴图来为3D对象增加视觉上的皱纹效果。凹凸贴图通过改变表面光照的法线，使物体表面显得凹凸不平，但不改变其实际形状。文章提供了一个在线示例，展示了一个添加了凹凸贴图的立方体，与未添加的相比，增加了细节。同时，解释了`bumpScale`属性的作用，用于设置凹凸的高度。最后，给出了实现该效果的代码步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

凹凸贴图用于为材质增加厚度，在三维环境中使表面产生凹凸不平的视觉效果。
它主要的原理是通过改变表面光照的法线。凹凸贴图是一种灰度图像素的密集程度定义的是凹凸的程度。凹凸贴图只包含像素的相对高度，不包含倾斜方向的信息，凹凸贴图不会改变物体的形状。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180905/04-bump-texture.html
效果
这里写图片描述
可以看左边添加了凹凸贴图的立方体明显和右边的不一样，左边的墙体看上去多了一些细节。
但是这种细节只是针对于正面，并不包含倾斜效果

倾斜之后二者的效果是一样的。

2、实现步骤

2.1、`bumpMap` 和 `bumpScale` 属性

bumpMap：创建凹凸贴图的纹理，黑色和白色的值映射到与灯光相关的感知深度。bump并不会影响物体的几何形状，只有照明。如果定义了正常的映射，则将忽略它。
bumpScale：凹凸的高度，默认为1，范围在1 - 0之间

2.2、创建实例并设置材质的`bumpMap`属性

let loader = new THREE.TextureLoader();
let bump = loader.load('../../textures/general/' + bumpUrl);
material.bumpMap = bump;

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png">
    <title>使用 凹凸 贴图加载皱纹</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
        }

        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
    </style>
    <script src="../../libs/build/three-r93.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></</