学习threejs，使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.MeshPhongMaterial高光材质
    • 1.2 normalMap 法向量贴图
  • 二、🍀使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

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 normalMap 法向量贴图

概念：
normalMap 法向量贴图‌是一种在3D图形渲染中使用的技术，主要用于增强模型表面的细节和真实感。它通过使用一张特殊的纹理贴图来模拟物体表面的凹凸效果，从而在视觉上增加模型的细节和复杂度。
原理：
法线贴图的基本原理是将物体的法线信息存储在一张RGB纹理中。每个像素的RGB值代表该位置法线的方向，通过这种方式，可以在渲染时利用这些法线信息来模拟表面的凹凸效果。这种方法可以显著降低渲染时需要的面数和计算量，从而优化渲染效果‌。
与Bump Mapping（凹凸贴图）的区别：
法线贴图与Bump Mapping（凹凸贴图）是两种不同的技术，尽管它们在某些情况下可以相互替代。Bump Mapping需要计算每个像素的法线信息，而法线贴图则通过预计算的法线贴图来实现，简化了计算过程。此外，法线贴图能够提供更丰富的细节和更真实的视觉效果‌23。

二、🍀使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

1. ☘️实现思路

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

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn53(使用设置NORMALMAP法向量贴图创建更加细致的凹凸和褶皱)</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><script src="lib/js/ImageUtils.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, pointLightvar angle = 0, radian, r = 5var initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)renderer.setClearColor(0xeeeeee)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, 12, 15)}var initGui = () => {gui = {normalScale: 1,animation: false,changeTexture: () => {var image = new Image()image.src = 'data/texture/normalmap/crate.gif'image.onload = (ev) => {var texture = new THREE.Texture(image)texture.needsUpdate = truecube1.material.map = texturevar normal = new THREE.Texture(THREE.ImageUtils.getNormalMap(image))normal.needsUpdate = truecube1.material.normalMap = normalcube2.material.map = texture}}}var datGui = new dat.GUI()datGui.add(gui, 'normalScale', -2, 30).onChange(e => {cube1.material.normalScale.set(e, e)cube1.material.needsUpdate = true})datGui.add(gui, 'animation')datGui.add(gui, 'changeTexture')}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 10)light.castShadow = truescene.add(light)pointLight = new THREE.PointLight(0x00ffff)pointLight.position.set(0, 5, 0)scene.add(pointLight)// 点光源添加模型，显示位置pointLight.add(new THREE.Mesh(new THREE.SphereGeometry(0.05, 20, 20), new THREE.MeshBasicMaterial({color: 0x00ffff})))}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/normalmap/plaster-normal.jpg')// 正常纹理var normal = new THREE.TextureLoader().load('data/texture/normalmap/plaster.jpg')var material1 = new THREE.MeshPhongMaterial({map: normal})material1.normalMap = bumpvar geometry = new THREE.BoxGeometry(6, 6, 6)cube1 = new THREE.Mesh(geometry, material1)cube1.position.set(-5, 5, 0)cube1.rotation.y += Math.PI / 6scene.add(cube1)var material2 = new THREE.MeshPhongMaterial({map: normal})cube2 = new THREE.Mesh(geometry, material2)cube2.position.set(5, 5, 0)cube2.rotation.y -= Math.PI / 6scene.add(cube2)}var initStats = () => {stats = new Stats()document.body.appendChild(stats.domElement)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.target.set(0, 5, 0)controls.enableDamping = true}var render = () => {if (gui.animation) {cube1.rotation.y += 0.01cube2.rotation.y -= 0.01}angle += 1radian = angle / 180 * Math.PIvar x = Math.sin(radian)var y = Math.cos(radian)if (angle % 720 > 360) {y = -y + 2}pointLight.position.z = x * rpointLight.position.x = y * r - r}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var draw = () => {if (!Detector.webgl) Detector.addGetWebGLMessage()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/478230.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python办公自动化案例：将演示文稿批量导出为图片和PDF文件

Python办公自动化案例：将演示文稿批量导出为图片和PDF文件

案例：将演示文稿批量导出为图片和PDF文件 准备资料：准备好PPT，并起好名称，放在同一目录下。 批量的将ppt，pptx转换为pdf和图片，代码如下： import comtypes.client import osdef init_powerpoint():powerp
阅读更多...
数据结构 ——— 直接选择排序算法的实现

数据结构 ——— 直接选择排序算法的实现

目录 直接选择排序算法的思想 优化直接选择排序算法的思想 代码实现&#xff08;默认升序&#xff09; 直接选择排序算法的思想 直接选择排序算法的思想类似与直接插入排序 区别在于从大到小选择最小的元素或者最大的元素直接放在元素应该停留的位置每次从待排序的元素中选…
阅读更多...
linux从0到1——shell编程9

linux从0到1——shell编程9

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
selinux及防火墙

selinux及防火墙

selinux说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 httpd进程标签&#xff08;/usr/share/nginx/html &#…
阅读更多...
前端：JavaScript （学习笔记）【2】

前端：JavaScript （学习笔记）【2】

目录 一&#xff0c;数组的使用 1&#xff0c;数组的创建 [ ] 2&#xff0c;数组的元素和长度 3&#xff0c;数组的遍历方式 4&#xff0c;数组的常用方法 二&#xff0c;JavaScript中的对象 1&#xff0c;常用对象 &#xff08;1&#xff09;String和java中的Stri…
阅读更多...
QML学习 —— 28、3种等待指示控件（附源码）

QML学习 —— 28、3种等待指示控件（附源码）

效果如下 说明 BusyIndicator应用于指示在加载内容或UI被阻止等待资源可用时的活动。BusyIndicator类似于一个不确定的ProgressBar。两者都可以用来指示背景活动。主要区别在于视觉效果，ProgressBar还可以显示具体的进度（当可以确定时）。由于视觉差异，繁忙指示器和不确定的…
阅读更多...
Java 基于SpringBoot+Vue的家政服务管理平台

Java 基于SpringBoot+Vue的家政服务管理平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
DataGear 5.2.0 发布，数据可视化分析平台

DataGear 5.2.0 发布，数据可视化分析平台

DataGear 企业版 1.3.0 已发布&#xff0c;欢迎体验&#xff01; http://datagear.tech/pro/ DataGear 5.2.0 发布&#xff0c;图表插件支持定义依赖库、严重 BUG 修复、功能改进、安全增强&#xff0c;具体更新内容如下&#xff1a; 重构&#xff1a;各模块管理功能访问路径…
阅读更多...
nature communications论文 解读

nature communications论文 解读

题目《Transfer learning with graph neural networks for improved molecular property prediction in the multi-fidelity setting》 这篇文章主要讨论了如何在多保真数据环境&#xff08;multi-fidelity setting&#xff09;下&#xff0c;利用图神经网络&#xff08;GNNs&…
阅读更多...
Flutter：SlideTransition位移动画，Interval动画延迟

Flutter：SlideTransition位移动画，Interval动画延迟

配置vsync&#xff0c;需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;overridevoid initState() {super.…
阅读更多...
svn 崩溃、 cleanup失败 怎么办

svn 崩溃、 cleanup失败 怎么办

在使用svn的过程中&#xff0c;可能出现整个svn崩溃&#xff0c; 例如cleanup 失败的情况&#xff0c;类似于 这时可以下载本贴资源文件并解压。 或者直接访问网站 SQLite Download Page 进行下载 解压后得到 sqlite3.exe 放到发生问题的svn根目录的.svn路径下 右键呼出pow…
阅读更多...
GPT系列文章

GPT系列文章

GPT系列文章 GPT1 GPT1是由OpenAI公司发表在2018年要早于我们之前介绍的所熟知的BERT系列文章。总结&#xff1a;GPT 是一种半监督学习&#xff0c;采用两阶段任务模型&#xff0c;通过使用无监督的 Pre-training 和有监督的 Fine-tuning 来实现强大的自然语言理解。在 Pre-t…
阅读更多...
Linux线程（Linux和Windows的线程区别、Linux的线程函数、互斥、同步）

Linux线程（Linux和Windows的线程区别、Linux的线程函数、互斥、同步）

Linux线程&#xff08;Linux和Windows的线程区别、Linux的线程函数、互斥、同步&#xff09; 1. 线程介绍 线程的概念&#xff1a; 线程是 CPU 调度的基本单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0…
阅读更多...
Large Spatial Model:End-to-end Unposed Images to Semantic 3D 论文解读

Large Spatial Model:End-to-end Unposed Images to Semantic 3D 论文解读

目录 一、概述 二、相关工作 1、SfM和可微神经表示 2、端到端的Image-to-3D 三、LSM 1、密集几何预测 2、2D信息特征提取 3、点特征融合 4、可微渲染 5、损失函数 四、实验 一、概述 该论文提出一种大型空间模型&#xff08;Larget Spatial Model,LSM&#xff09;…
阅读更多...
Leetcode207. 课程表(HOT100)

Leetcode207. 课程表(HOT100)

链接 题解&#xff1a;先统计入度为0的点&#xff0c;如果一个节点入度为0&#xff0c;说明没有课程指向它&#xff0c;那么你就可以学习它了。反之说明还有先修课。 注意&#xff1a;图存在拓扑排序等价于图不存在环。其实可以想出&#xff1a;如果是一个环&#xff0c;那么…
阅读更多...
JavaScript将至

JavaScript将至

JS是什么&#xff1f; 是一种运行在客户端&#xff08;浏览器&#xff09;的编程语言&#xff0c;实现人机交互效果 作用捏&#xff1f; 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前…
阅读更多...
Centos-stream 9,10 add repo

Centos-stream 9,10 add repo

Centos-stream repo前言 Centos-stream 9，10更换在线阿里云创建一键更换repo 自动化脚本 华为centos-stream 源 , 阿里云centos-stream 源 华为epel 源 , 阿里云epel 源vim /centos9_10_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author: make.h
阅读更多...
网络安全概论

网络安全概论

一、 网络安全是一个综合性的技术。在Internet这样的环境中&#xff0c;其本身的目的就是为了提供一种开放式的交互环境&#xff0c;但是为了保护一些秘密信息&#xff0c;网络安全成为了在开放网络环境中必要的技术之一。网络安全技术是随着网络技术的进步逐步发展的。 网络安…
阅读更多...
【Android】android compat理解

【Android】android compat理解

1&#xff0c;前提 即便是在同一手机上安装的不同apk&#xff0c;其编译的apk不同&#xff0c;也会导致行为上的差异。如SDK34有限制后台启动&#xff0c;但如果安装的apk所依赖的sdk是33&#xff0c;则不会表现出此差异。这是如何实现的呢&#xff1f;其实&#xff0c;本质是…
阅读更多...
《数据结构》学习系列——图（中）

《数据结构》学习系列——图（中）

系列文章目录 目录 图的遍历深度优先遍历递归算法堆栈算法 广度优先搜索 拓扑排序定义定理算法思想伪代码 关键路径基本概念关键活动有关量数学公式伪代码时间复杂性 图的遍历 从给定连通图的某一顶点出发&#xff0c;沿着一些边访问遍图中所有的顶点&#xff0c;且使每个顶点…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023