学习threejs，使用设置lightMap光照贴图创建阴影效果

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.MeshLambertMaterial漫反射材质
    • 1.2 ☘️光照贴图（Lightmap）
  • 二、🍀使用设置lightMap光照贴图创建阴影效果
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中设置lightMap光照贴图创建阴影效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.MeshLambertMaterial漫反射材质

THREE.MeshLambertMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的漫反射效果。这种材质遵循 Lambertian 反射模型，这意味着它会均匀地将接收到的光照散射到各个方向，从而产生较为自然的光照效果。THREE.MeshLambertMaterial 适用于需要模拟漫反射材质的场景，如墙面、木头、纸张等非金属材料。
常用属性：
THREE.MeshLambertMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：
color：材质的颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111），但在 THREE.MeshLambertMaterial 中不会生效。
shininess：高光强度，默认为 30，但在 THREE.MeshLambertMaterial 中不会生效。
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。

1.2 ☘️光照贴图（Lightmap）

光照贴图（Lightmap）是计算机图形学中用于存储场景中光照信息的纹理贴图。它们通常用于预计算静态光照，以提高实时渲染的性能。光照贴图的数据格式和解析方法可能因具体的渲染引擎和工具而异，但一般来说，光照贴图的数据格式和解析方法可以概括如下：
数据格式
光照贴图通常存储为图像文件，常见的格式包括：
PNG：无损压缩格式，适合存储高质量的光照信息。
JPEG：有损压缩格式，文件较小，但可能会丢失一些细节。
HDR：高动态范围图像格式，适合存储高精度的光照信息。
EXR：一种常用于电影和视觉特效的高动态范围图像格式。
光照贴图的每个像素通常存储光照信息，可能包括以下内容：
RGB值：表示光照的颜色和强度。
Alpha通道：有时用于存储额外的信息，如光照的透明度或遮挡信息。

二、🍀使用设置lightMap光照贴图创建阴影效果

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.PlaneGeometry平面几何体groundGeom，scene场景中加入坐标辅助工具。创建光照纹理贴图lightMap和地板贴图map，传入lightMap和map参数创建THREE.MeshLambertMaterial漫反射材质material，传入groundGeom和material参数创建THREE.Mesh网格对象groudMesh，设置groudMesh的旋转角度，scene场景中加入groudMesh对象。
  • 6、加入controls、gui控制（控制创建的两个立方体是否显示、以及光照贴图的光照强度，具体实现参考下面代码样例），加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn54(使用设置LIGHTMAP光照贴图创建阴影效果，不能随着模型位置变化而变化)</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/91/three.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/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, mesh, materialvar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)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, 50, 500)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 12, 15)}var initGui = () => {gui = {showBox: () => {var material = new THREE.MeshPhongMaterial({color: 0x00ffff})// 创建大的立方体var geometry = new THREE.BoxGeometry(1.2, 1.2, 1.2)var cubeBig = new THREE.Mesh(geometry, material)cubeBig.position.y += 0.6scene.add(cubeBig)var geometrySm = new THREE.BoxGeometry(0.7, 0.7, 0.7)var cubeSm = new THREE.Mesh(geometrySm, material)cubeSm.position.set(-1.4, 0.35, 0)scene.add(cubeSm)},lightMapIntensity: 1}var datGui = new dat.GUI()datGui.add(gui, 'showBox')datGui.add(gui, 'lightMapIntensity', 0, 5).onChange(e => {material.lightMapIntensity = e})}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(-20, 20, -20)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var groundGeom = new THREE.PlaneGeometry(10, 10, 1, 1)var lightMap = new THREE.TextureLoader().load('data/texture/lightMap/lm-1.png')var map = new THREE.TextureLoader().load('data/texture/lightMap/floor-wood.jpg')material = new THREE.MeshLambertMaterial({color: 0x777777,lightMap: lightMap,map: map})groundGeom.faceVertexUvs[1] = groundGeom.faceVertexUvs[0]var groudMesh = new THREE.Mesh(groundGeom, material)groudMesh.rotation.x = -0.5 * Math.PIscene.add(groudMesh)}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()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/481706.html

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

相关文章

AIGC--------AIGC在医疗健康领域的潜力

AIGC--------AIGC在医疗健康领域的潜力

AIGC在医疗健康领域的潜力 引言 AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;人工智能生成内容&#xff09;是一种通过深度学习和自然语言处理&#xff08;NLP&#xff09;等技术生成内容的方式。近年来&#xff0c;AIGC在医疗健康领域展现出了极…
阅读更多...
【Flink-scala】DataStream编程模型之窗口计算-触发器-驱逐器

【Flink-scala】DataStream编程模型之窗口计算-触发器-驱逐器

DataStream API编程模型 1.【Flink-Scala】DataStream编程模型之数据源、数据转换、数据输出 2.【Flink-scala】DataStream编程模型之 窗口的划分-时间概念-窗口计算程序 文章目录 DataStream API编程模型前言1.触发器1.1 代码示例 2.驱逐器2.1 代码示例 总结 前言 本小节我想…
阅读更多...
【Maven】依赖冲突如何解决？

【Maven】依赖冲突如何解决？

准备工作 1、创建一个空工程 maven_dependency_conflict_demo&#xff0c;在 maven_dependency_conflict_demo 创建不同的 Maven 工程模块&#xff0c;用于演示本文的一些点。 什么是依赖冲突&#xff1f; 当引入同一个依赖的多个不同版本时&#xff0c;就会发生依赖冲突。…
阅读更多...
yolo辅助我们健身锻炼

yolo辅助我们健身锻炼

使用软件辅助健身能够大大提升运动效果并帮助你更轻松地达成健身目标。确保每次锻炼都更加高效且针对性强，精确记录你的训练进度，帮助你更清晰地看到自己的进步，避免无效训练。 借助YOLO11的尖端计算机视觉技术，跟踪和分析锻炼变得异常简单。它可以无缝检测和监控多种锻炼…
阅读更多...
YOLO系列论文综述（从YOLOv1到YOLOv11）【第3篇：YOLOv1——YOLO的开山之作】

YOLO系列论文综述（从YOLOv1到YOLOv11）【第3篇：YOLOv1——YOLO的开山之作】

YOLOv1 1 摘要2 YOLO: You Only Look Once2.1 如何工作2.2 网络架构2.3 训练2.4 优缺点 YOLO系列博文&#xff1a; 【第1篇&#xff1a;概述物体检测算法发展史、YOLO应用领域、评价指标和NMS】【第2篇&#xff1a;YOLO系列论文、代码和主要优缺点汇总】【第3篇&#xff1a;YOL…
阅读更多...
基于Java Springboot学生信息管理系统

基于Java Springboot学生信息管理系统

一、作品包含 源码数据库设计文档全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库&…
阅读更多...
基于Pytorch的CIFAR100数据集上从ResNet50到VGG16的知识蒸馏实验记录

基于Pytorch的CIFAR100数据集上从ResNet50到VGG16的知识蒸馏实验记录

知识蒸馏的概念 可以参照NeurIPS2015的论文“Distilling the Knowledge in a Neural Network”了解知识蒸馏的概念。 知识蒸馏的狭义概念就是从复杂模型中迁移知识来提升简单模型的性能。复杂模型称之为教师模型&#xff0c;简单模型称之为学生模型。最近&#xff0c;笔者重温…
阅读更多...
#Java-JDK7、8的时间相关类，包装类

#Java-JDK7、8的时间相关类，包装类

1. JDK7-Date类 我们先来看时间的相关知识点 世界标准时间: 格林尼治时间/格林威治时间(Greenwich Mean Time)简称GMT。目前世界标准时间(UTC)已经替换为:原子钟中国标准时间: 世界标准时间8小时 时间单位换算: 1秒1000毫秒 1毫秒1000微秒 1微秒1000纳秒 Date类 Date类…
阅读更多...
glog在vs2022 hello world中使用

glog在vs2022 hello world中使用

准备工作 设置dns为阿里云dns 223.5.5.5&#xff0c;下载cmake&#xff0c;vs2022&#xff0c;git git clone https://github.com/google/glog.git cd glog mkdir build cd build cmake .. 拷贝文件 新建hello world并设置 设置预处理器增加GLOG_USE_GLOG_EXPORT;GLOG_NO_AB…
阅读更多...
深度学习：梯度下降法

深度学习：梯度下降法

损失函数 L&#xff1a;衡量单一训练样例的效果。 成本函数 J&#xff1a;用于衡量 w 和 b 的效果。 如何使用梯度下降法来训练或学习训练集上的参数w和b &#xff1f; 成本函数J是参数w和b的函数&#xff0c;它被定义为平均值&#xff1b; 损失函数L可以衡量你的算法效果&a…
阅读更多...
半桥LLC谐振变换器及同步整流MATLAB仿真（二）

半桥LLC谐振变换器及同步整流MATLAB仿真（二）

在上文《半桥LLC谐振变换器及同步整流MATLAB仿真&#xff08;一&#xff09;》讲解了半桥LLC谐振变换器的工作原理&#xff0c;本文将利用MATLAB搭建电路模型进行仿真。 参数&#xff1a;输入电压&#xff1a;400Vdc&#xff1b;输出电压范围&#xff1a;36-50V &#xff1b;输…
阅读更多...
利用若依代码生成器实现课程管理模块开发

利用若依代码生成器实现课程管理模块开发

目录 前言1. 环境准备1.1 数据库表设计与导入 2. 使用若依代码生成器生成模块代码2.1 导入数据库表2.2 配置生成规则2.2.1 基本信息配置2.2.2 字段信息配置2.2.3 生成信息配置 3. 下载与集成生成代码3.1 解压与集成3.2 启动项目并验证 4. 优化与扩展4.1 前端优化4.2 后端扩展 结…
阅读更多...
AI前景分析展望——GPTo1 SoraAI

AI前景分析展望——GPTo1 SoraAI

引言 人工智能&#xff08;AI&#xff09;领域的飞速发展已不仅仅局限于学术研究&#xff0c;它已渗透到各个行业&#xff0c;影响着从生产制造到创意产业的方方面面。在这场技术革新的浪潮中&#xff0c;一些领先的AI模型&#xff0c;像Sora和OpenAI的O1&#xff0c;凭借其强大…
阅读更多...
springboot359智慧草莓基地管理系统(论文+源码)_kaic

springboot359智慧草莓基地管理系统(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;智慧草莓基地管理系统 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本智慧草莓基地管理系统就…
阅读更多...
排序算法之插入排序篇

排序算法之插入排序篇

插入排序 思路&#xff1a; 就是将没有排序的元素逐步地插入到已经排好序的元素后面&#xff0c;保持元素的有序 视频的实现过程如下&#xff1a; 插入排序全过程 代码实现过程如下&#xff1a; public static void Insertion(int[] arr) { for (int i 1; i < arr.length…
阅读更多...
【机器学习】支持向量机SVR、SVC分析简明教程

【机器学习】支持向量机SVR、SVC分析简明教程

关于使用SVM进行回归分析的介绍很少&#xff0c;在这里&#xff0c;我们讨论一下SVR的理论知识&#xff0c;并对该方法有一个简明的理解。 1. SVC简单介绍 SVR全称是support vector regression&#xff0c;是SVM&#xff08;支持向量机support vector machine&#xff09;对回…
阅读更多...
SpringMVC-08-json

SpringMVC-08-json

8. Json 8.1. 什么是Json JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式&#xff0c;目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写&#xf…
阅读更多...
APM32使用I2C驱动OLED

APM32使用I2C驱动OLED

实验效果 本次实验主要讲APM32的I2C外设的初始化和APM32作为主机如何发送数据&#xff0c;OLED的驱动写起来较难本次实验不涉及。由于条件有限本次只能讲主机发送&#xff0c;接收也没有涉及。 硬件原理图 源代码 I2C初始化部分 #ifndef __BSP__IIC_H__ #define __BSP__IIC_…
阅读更多...
QT布局详解

QT布局详解

ui设计器设计界面很方便&#xff0c;为什么还要手写代码? (1)更好的控制布局 (2)更好的设置qss (3)代码复用 创建水平布局 包含头文件 #include<QHBoxLayout> 创建水平布局QHBoxLayout *pHLay new QHBoxLayout(父窗口指针);//一般填this QPushButton *pBtn1 n…
阅读更多...
宏集eXware物联网网关在水务管理系统上的应用

宏集eXware物联网网关在水务管理系统上的应用

一、前言 水务管理系统涵盖了对城市水网、供水、排水、污水处理等多个环节的监控与管理。随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;物联网网关逐渐成为水务管理系统中的关键组成部分。 宏集物联网网关以其高效的数据采集、传输和管理功能&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023