学习threejs，使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

🕗 发布于 2024-11-23 12:59 threejs bumpMap 凹凸贴图

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.MeshPhongMaterial高光材质
- 1.2 bumpMap 凹凸贴图
二、🍀使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.MeshPhongMaterial高光材质

THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的光照效果，包括漫反射（diffuse）和镜面反射（specular）。这种材质遵循 Phong 反射模型，可以模拟出光滑表面的高光效果，因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。
常用属性：
THREE.MeshPhongMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：

color：材质的基本颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111）。高光颜色定义了镜面反射的颜色。
shininess：高光强度，默认为 30。高光强度定义了高光区域的锐度，数值越高，高光越集中。
opacity：材质的全局透明度，默认为 1（不透明）。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
reflectivity：环境光反射率，默认为 1。
refractionRatio：折射率，默认为 0.98。
combine：环境贴图的组合方式，默认为 THREE.MixOperation。
bumpMap：凹凸贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
bumpScale：凹凸贴图的比例，默认为 1。
normalMap：法线贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
normalScale：法线贴图的比例，默认为 Vector2(1, 1)。
displacementMap：置换贴图，可以用来改变表面的高度。可以是一个 THREE.Texture 对象。
displacementScale：置换贴图的比例，默认为 1。
displacementBias：置换贴图的偏移，默认为 0。

1.2 bumpMap 凹凸贴图

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

二、🍀使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt
4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.PlaneBufferGeometry平面几何体、THREE.GridHelper地板割线，scene场景中加入创建的平面几何体和地板割线。创建墙纹理贴图对象normal和墙纹理凹凸贴图对象bump，根据创建的墙纹理创建两个THREE.MeshPhongMaterial高光材质对象material1、material2，创建立方体THREE.BoxGeometry对象geometry，根据立方体geometry和材质THREE.MeshPhongMaterial对象创建两个THREE.Mesh网格对象cube1、cube2并设置位置，scene场景中加入cube1和cube2。具体实现参考代码样例。
6、加入gui、controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn52(使用设置BUMPMAP凹凸贴图创建褶皱,实现贴图厚度效果)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
    <script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }

    canvas {
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer, camera, scene, gui, light, stats, controls, cube1, cube2
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setClearColor(0xeeeeee)
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.shadowMap.enabled = true
    document.body.appendChild(renderer.domElement)
  }
  var initScene = () => {
    scene = new THREE.Scene()
    scene.backgroundColor = new THREE.Color(0xa0a0a0)
    scene.fog = new THREE.Fog(0xa0a0a0, 5, 50)
  }
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)
    camera.position.set(0, 5, 15)
  }
  var initGui = () => {
    gui = {
      bump: 0.03,
      animation: false
    }
    var datGui = new dat.GUI()
    datGui.add(gui, 'bump', -1, 1).onChange(e => {
      cube1.material.bumpScale = e
    })
    datGui.add(gui, 'animation')
  }
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x444444))
    light = new THREE.DirectionalLight(0xffffff)
    light.position.set(0, 20, 10)
    light.castShadow = true
    scene.add(light)
  }
  var initModel = () => {
    var helper = new THREE.AxesHelper(50)
    scene.add(helper)

    // 地板
    var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({
      color: 0xffffff,
      depthWrite: false
    }))
    mesh.rotation.x = -0.5 * Math.PI
    mesh.receiveShadow = true
    scene.add(mesh)

    // 加载地板割线
    var grid = new THREE.GridHelper(200, 50, 0x000000, 0x000000)
    grid.material.opacity = 0.2
    grid.material.transparent = true
    scene.add(grid)

    var bump = new THREE.TextureLoader().load('data/texture/wall/brick_bump.jpg')
    var normal = new THREE.TextureLoader().load('data/texture/wall/brick_diffuse.jpg')

    var material1 = new THREE.MeshPhongMaterial({
      map: normal
    })
    material1.bumpMap = bump
    material1.bumpScale = 0.03
    var geometry = new THREE.BoxGeometry(8, 8, 4)
    cube1 = new THREE.Mesh(geometry, material1)
    cube1.position.set(-5, 5, 0)
    scene.add(cube1)

    var material2 = new THREE.MeshPhongMaterial({
      map: normal
    })
    cube2 = new THREE.Mesh(geometry, material2)
    cube2.position.set(5, 5, 0)
    scene.add(cube2)
  }
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
  }
  var render = () => {
    if (gui.animation) {
      cube1.rotation.y += 0.01
      cube2.rotation.y -= 0.01
    }
    controls.update()
  }
  var animate = () => {
    render()
    stats.update()
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var draw = () => {
    if (!Detector.webgl) Detector.addGetWebGLMessage()
    initGui()
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initStats()
    initControls()

    animate()
    window.onresize = onWindowResize
  }
</script>
</html>

效果如下：
在这里插入图片描述

原文地址：https://blog.csdn.net/qq_28419035/article/details/143974126

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MATLAB GUI设计（基础）
下一篇：没有了

分布式数据库
随着互联网的快速发展，数据量和访问量呈现爆炸式增长，单机数据库逐渐难以满足高并发、大规模数据存储和处理的需求。分布式数据库应运而生，成为解决这些问题的重要技术。分布式数据库不仅能够处理大规模数据，
阅读更多2024-11-23
【手写一个spring】spring源码的简单实现--初始化机制,回调机制
这个操作符返回一个布尔值：如果对象是指定类型的实例，或者是指定类型子类的实例，则返回 true；初始化时自动调用相应的回调方法，并将相关的上下文或资源对象传递给。接口:如果实现,直接强制类型转换后,对
阅读更多2024-11-23
HTML常用表格与标签
【代码】HTML常用表格与标签。
阅读更多2024-11-23
云服务器部署WebSocket项目
5.上传war包到tomcat文件夹的webapp目录下。先执行clean，再执行install。（2）解压后进入到文件目录，启动。3.在服务器上安装tomcat。6.重新启动tomcat，访问。2.
阅读更多2024-11-23
TESSY单元测试工具详解与操作演示：ISO 26262合规性、自定义测试用例、详细测试报告等
单元测试工具TESSY，符合ISO 26262等汽车软件安全标准，简化和自动化测试流程，基本操作演示请查收↓创建新模块、定义测试用例输入测试数据、执行与评估测试生成详细的测试报告...
阅读更多2024-11-23
【深入学习大模型之：微调 GPT 使其自动生成测试用例及自动化用例】
训练深度学习模型自动生成测试用例、自动化代码和文本小说的步骤：数据准备：收集并清洗目标任务所需的数据集。模型选择：选择合适的预训练模型（如GPT系列、T5等），并对其进行微调。模型训练：使用训练框架（
阅读更多2024-11-23
python语言基础
【代码】python语言基础。
阅读更多2024-11-23
Linux麦克风录音实战
在 Linux 上使用麦克风进行录音可以通过多种方式实现，包括使用命令行工具、图形界面应用程序以及编程接口。下面我将介绍几种常见的方法，从简单的命令行工具到使用 PortAudio 库进行编程。
阅读更多2024-11-23
Cesium的ClearCommand的流程
ClearCommand是在每帧渲染前可以将显存的一些状态置为初始值，就如同把擦黑板。当然也包括在绘制过程中擦掉部分的数据，就如同画家在开始绘制的时候会画导览线（如透视线），轮廓出来后这些导览线就会被
阅读更多2024-11-23
集成金蝶云星空数据至MySQL的完整案例解析
在本次集成方案中，我们利用了轻易云数据集成平台的强大功能，实现了从金蝶云星空获取物料数据并同步至MySQL数据库的全过程管理。综上所述，通过合理配置元数据，构建合适的SQL语句，并结合异常处理和实时监
阅读更多2024-11-23