效果：

MeshLambertMaterial、MeshBasicMaterial没有凹凸、法线贴图属性
MeshStandardMaterial（标准网格材质）、MeshPhysicalMaterial（物理网格材质 ）、
MeshPhongMaterial（高光网格材质）支持法线贴图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>凹凸贴图</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <!-- 如果模型定义了法线贴图，就没有必要在使用凹凸贴图。 -->
  <script>
    // 1, 创建场景对象
    var scene = new THREE.Scene();
    // 2,定义模型
    var geometry = new THREE.PlaneGeometry(300,300);
    geometry.rotateY(Math.PI / 2);
    var texture = new THREE.TextureLoader().load('./qiang.jpg');
     texture.minFilter = THREE.LinearFilter;
    var material = new THREE.MeshPhongMaterial({
      // 用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。
      // 凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。
      bumpMap: texture,
      bumpScale: 3, // 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
      side: THREE.DoubleSide
      // color:0xff00aa
    });
    var mesh = new THREE.Mesh(geometry,material);
    scene.add(mesh);
    // 3,创建光源对象--聚光源
    var spotLight = new THREE.SpotLight(0xAA7355,0.9);
    spotLight.position.set(300,200,200);
    spotLight.angle = Math.PI / 2;
    var spotLight2 = new THREE.SpotLight(0xAA7355,0.9);
    spotLight2.position.set(-300,200,200);
    spotLight2.angle = Math.PI / 2;
    scene.add(spotLight,spotLight2);
    // 4,创建相机
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-1000,1000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
    // 5,创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
      requestAnimationFrame(render);
    }
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    // controls.addEventListener('change',render);
    render();
  </script>
</body>
</html>

# 贴图 # javascript # 开发语言
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

树莓派Pico+MicroPython+MQTT+EMQX物联网数据上报实战

在物联网设备数据上报场景中，轻量级通信协议和高效开发语言至关重要。MQTT基于发布/订阅模型，具有QoS分级、心跳保活和遗嘱消息等机制，特别适合网络不稳定的嵌入式环境；MicroPython让开发者用接近Python的语法快速编写固件，降低嵌入式开发门槛；EMQX作为高性能开源Broker，提供可视化Dashboard和规则引擎，简化设备接入与数据处理。JSON凭借良好的可读性和跨语言解析特性，成

avatar 天工造物局

SmartTube 安装与使用：在 Android 电视上无广告播放的完整设置

SmartTube 是一款面向 Android 电视和电视盒的免费开源播放器，主打无广告播放 YouTube 等公开视频内容。它只跑在电视和盒子上，界面按遥控器设计，适合想把客厅大屏变成一台干净播放器的用户。## 先说清楚它是什么SmartTube 是开源免费的 Android TV 播放器，由一位开发者独立维护，没有公司背景。和官方 YouTube 电视版相比，它没有广告位，界面里不插横

avatar 天工造物局

Atmosphere 定制固件上手：从源码构建到上机启动的 5 个关键点

给 Switch 装完一次系统更新后，你可能发现老游戏开始闪退，或者你一直想玩金手指、跑 homebrew，又不想动真机 eMMC 里的存档。Atmosphere（Atmosphère）就是做这件事的 Switch 定制固件：它逐层替换系统组件，让你可以在 SD 卡上运行虚拟系统、注入自定义系统模块、管理金手指。这篇文章带你把它从源码构建成可运行的产物，并解释几个真正影响日常使用的配置。##

avatar 天工造物局