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

embedded/2024/11/26 15:07:51/

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

文章目录

  • 一、🍀前言
  • 二、🍀使用设置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。

bumpMap__43">1.2 bumpMap 凹凸贴图

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

bumpMap_46">二、🍀使用设置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, cube2var initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xeeeeee)renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truedocument.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 = truescene.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.PImesh.receiveShadow = truescene.add(mesh)// 加载地板割线var grid = new THREE.GridHelper(200, 50, 0x000000, 0x000000)grid.material.opacity = 0.2grid.material.transparent = truescene.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 = bumpmaterial1.bumpScale = 0.03var 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.01cube2.rotation.y -= 0.01}controls.update()}var animate = () => {render()stats.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.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>

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


http://www.ppmy.cn/embedded/140646.html

相关文章

IDEA怎么定位java类所用maven依赖版本及引用位置

IDEA怎么定位java类所用maven依赖版本及引用位置

在实际开发中&#xff0c;我们可能会遇到需要搞清楚代码所用依赖版本号及引用位置的场景&#xff0c;便于排查问题&#xff0c;怎么通过IDEA实现呢&#xff1f; 可以在IDEA中打开项目&#xff0c;右键点击maven的pom.xml文件&#xff0c;或者在maven窗口下选中项目&#xff0c;…
阅读更多...
“理-工-医-信”跨学科协同合作，第五届“医疗大数据学术交流及Datathon活动”圆满落幕！

“理-工-医-信”跨学科协同合作，第五届“医疗大数据学术交流及Datathon活动”圆满落幕！

“AI 不能代替医生&#xff0c;但是掌握了 AI 技术的医生一定能代替那些没掌握 AI 的医生。” 人工智能在卫生健康行业的应用将为医疗产业带来深刻变革&#xff0c;推动医疗行业向更智能、更高效、更个性化的方向发展。基于此&#xff0c;2024 年 11 月 14 日至 17 日&#xff…
阅读更多...
结合Gitee、PicGo和Typora构建一个免费的个人笔记工具

结合Gitee、PicGo和Typora构建一个免费的个人笔记工具

文章目录 &#x1f4dd;小引言&#x1f4dd;步骤与内容&#x1f4dd;简单使用Typora&#x1f4dd;Gitee和GitHub&#x1f4dd;使用GiteePicGo打造自己的图床Gitee建仓库Node环境配置PicGo软件安装及配置Typora测试 &#x1f4dd;美化Typora &#x1f4dd;小引言 不知道大家在写…
阅读更多...
【CSP CCF记录】201809-2第14次认证 买菜

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点&#xff1a;仅考虑所给样例&#xff0c;会误以为H和W两人的装车时间是一一对应的&#xff0c;那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…
阅读更多...
NVR管理平台EasyNVR多个NVR同时管理：全方位安防监控视频融合云平台方案

NVR管理平台EasyNVR多个NVR同时管理：全方位安防监控视频融合云平台方案

EasyNVR是基于端-边-云一体化架构的安防监控视频融合云平台&#xff0c;具有简单轻量的部署方式与多样的功能&#xff0c;支持多种协议&#xff08;如GB28181、RTSP、Onvif、RTMP&#xff09;和设备类型&#xff08;IPC、NVR等&#xff09;&#xff0c;提供视频直播、录像、回放…
阅读更多...
鱼眼相机模型-MEI

鱼眼相机模型-MEI

参考文献&#xff1a; Single View Point Omnidirectional Camera Calibration from Planar Grids 1. 相机模型如下&#xff1a; // 相机坐标系下的点投影到畸变图像// 输入&#xff1a;相机坐标系点坐标cam 输出&#xff1a; 畸变图像素点坐标disPtvoid FisheyeCamAdapter::…
阅读更多...
设计模式之结构型模式

设计模式之结构型模式

设计模式是软件开发中常见的解决方案&#xff0c;它们提供了一种在特定情况下解决常见问题的模板或框架。设计模式可以分为三大类&#xff1a;创建型模式、结构型模式和行为型模式。本文将重点介绍结构型模式&#xff08;Structural Design Patterns&#xff09;&#xff0c;并…
阅读更多...
【6.10】位运算-实现四则运算

【6.10】位运算-实现四则运算

前言 从我们开始上学起就了解到&#xff0c;若要进行加减乘除就要使用对应的运算符号…… 甚至在如今的计算机中也是如此。我们通常只知道如何使用这些运算符号&#xff0c;却很少去关注其底层是如何实现的。假如某天在面试中遇到一道题&#xff0c;要求不使用 “&#xff0c;-…
阅读更多...
最新文章

Copyright @ 2022~2023