当前位置： 首页 > news >正文

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

news 2025/9/15 14:04:01

👨‍⚕️ 主页： 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>

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

相关文章：

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

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshLambertMaterial…...

编程日记 2024/11/27 6:20:35

一，SQL注入解题（猫舍）

封神台 第一章&#xff1a;为了女神小芳&#xff01; Tips: 通过sql注入拿到管理员密码&#xff01; 尤里正在追女神小芳&#xff0c;在得知小芳开了一家公司后&#xff0c;尤里通过whois查询发现了小芳公司网站 学过一点黑客技术的他&#xff0c;想在女神面前炫炫技。于是他…...

编程日记 2024/11/27 6:19:34

海康大华宇视视频平台EasyCVR私有化部署视频平台海康ISUP是什么？如何接入到EasyCVR？

在现代安防领域&#xff0c;随着技术的发展和需求的增加&#xff0c;对于视频监控系统的远程管理和互联互通能力提出了更高的要求。海康威视的ISUP协议&#xff08;以及功能相似的EHOME协议&#xff09;因此应运而生&#xff0c;它们为不具备固定IP接入的设备提供了一种有效的中…...

编程日记 2024/11/27 6:18:33

Java ArrayList 与顺序表：在编程海洋中把握数据结构的关键之锚

我的个人主页 我的专栏&#xff1a;Java-数据结构&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞❤ 收藏❤ 前言&#xff1a;在 Java编程的广袤世界里&#xff0c;数据结构犹如精巧的建筑蓝图&#xff0c;决定着程序在数据处理与存储时的效率、灵活性以…...

编程日记 2024/11/27 6:16:31

windows下安装wsl的ubuntu，同时配置深度学习环境

写在前面&#xff0c;本次文章只是个人学习记录&#xff0c;不具备教程的作用。个别信息是网上的&#xff0c;我会标注&#xff0c;个人是gpt生成的 安装wsl 直接看这个就行&#xff1b;可以不用备份软件源。 https://blog.csdn.net/weixin_44301630/article/details/1223900…...

编程日记 2024/11/27 6:15:30

开展网络安全成熟度评估：业务分析师的工具和技术

想象一下，您坐在飞机驾驶舱内。起飞前，您需要确保所有系统（从发动机到导航工具）均正常运行。现在，将您的业务视为飞机，将网络安全视为飞行前必须检查的系统。就像飞行员依赖检查表一样，业务分析师使用网络安全成熟度评估来评估组织对网络威胁的准备程度。这些评估可帮助…...

编程日记 2024/11/27 6:14:28

Maven Surefire 插件简介

Maven Surefire 插件是 Maven 构建系统中的一个关键组件&#xff0c;专门用于在构建生命周期中执行单元测试。 它通常与 Maven 构建生命周期的测试阶段绑定&#xff0c;确保所有单元测试在项目编译后和打包前被执行。 最新版本 Maven Surefire 插件的最新版本为 3.5.2。 使…...

编程日记 2024/11/27 6:13:27

基于微信小程序的平价药房管理系统+LW参考示例

1.项目介绍 系统角色&#xff1a;管理员、医生、普通用户功能模块&#xff1a;用户管理、医生管理、药品分类管理、药品信息管理、在线问诊管理、生活常识管理、日常提醒管理、过期处理、订单管理等技术选型&#xff1a;SpringBoot&#xff0c;Vue&#xff0c;uniapp等测试环境…...

编程日记 2024/11/27 6:10:24

react 前端最后阶段静态服务器启动命令

这个错误是因为你还没有安装 serve 工具。让我们一步步解决&#xff1a; 首先全局安装 serve&#xff1a; npm install -g serve如果上面的命令报错&#xff0c;可能是因为权限问题&#xff0c;可以尝试&#xff1a; 安装完成后&#xff0c;再运行&#xff1a; Windows 下使用…...

编程日记 2024/11/27 6:09:24

Flink中普通API的使用

本篇文章从Source、Transformation&#xff08;转换因子&#xff09;、sink这三个地方进行讲解 Source&#xff1a; 创建DataStream本地文件SocketKafka Transformation&#xff08;转换因子&#xff09;&#xff1a; mapFlatMapFilterKeyByReduceUnion和connectSide Outpu…...

编程日记 2024/11/27 6:08:22

高性能 ArkUI 应用开发：复杂 UI 场景中的内存管理与 XML 优化

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。 主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。 本文为原创内容，任何形式的转载必须注明出处及原作者。 在开发高性能 ArkUI 应…...

编程日记 2024/11/27 6:07:18

用天翼云搭建一个HivisionIDPhoto证件照处理网站

世人不必记我&#xff0c;我不记世人。 HivisionIDPhoto证件照处理网站 世人不必记我&#xff0c;我不记世人。项目地址项目搭建与修改前端后端遇到的坑 成果图 前段时间工作需要频繁处理证件照&#xff0c;当时同事推荐一个证件照小程序&#xff08;要看广告&#xff09;&…...

编程日记 2024/11/27 6:06:16

【算法一周目】滑动窗口（2）

目录 水果成篮 解题思路 代码实现 找到字符串中所有字母异位词 解题思路 代码实现 串联所有单词的子串 解题思路 代码实现 最小覆盖子串 解题思路 代码实现 水果成篮 题目链接&#xff1a;904. 水果成篮 题目描述&#xff1a; 你正在探访一家农场&#xff0c;农场…...

编程日记 2024/11/27 6:05:15

Zustand：一个轻量级的React状态管理库

文章目录 前言一、安装Zustand二、使用Zustand三、实际案例结语 前言 在现代Web开发中&#xff0c;状态管理是一个常见的需求&#xff0c;特别是在构建大型或复杂的单页面应用程序&#xff08;SPA&#xff09;时。React等框架虽然提供了基本的状态管理功能&#xff0c;但对于复…...

编程日记 2024/11/27 6:04:14

C++练级计划-＞《单例模式》懒汉和饿汉

目录 单例模式是什么&#xff1f; 单例模式的应用&#xff1a; 饿汉单例模式&#xff1a; 1.实现&#xff1a; 2.理解&#xff1a; 懒汉单例模式&#xff1a; 1.实现&#xff1a; 2.理解&#xff1a; 懒汉和饿汉的优缺点 饿汉模式的优点&#xff1a; 饿汉模式的缺点&a…...

编程日记 2024/11/27 6:03:12

SQL for XML

关系数据模型与SQL SQL for XML 模式名功能RAW返回的行作为元素&#xff0c;列值作为元素的属性AUTO返回表名对应节点名称的元素&#xff0c;每列的属性作为元素的属性输出输出&#xff0c;可形成简单嵌套结构EXPLICIT通过SELECT语法定义输出XML结构PATH列名或列别名作为XPAT…...

编程日记 2024/11/27 6:02:11

如何使用GCC手动编译stm32程序

如何不使用任何IDE&#xff08;集成开发环境&#xff09;编译stm32程序? 集成开发环境将编辑器、编译器、链接器、调试器等开发工具集成在一个统一的软件中&#xff0c;使得开发人员可以更加简单、高效地完成软件开发过程。如果我们不使用KEIL,IAR等集成开发环境&#xff0c;…...

编程日记 2024/11/27 5:59:07

在线绘制Nature Communication同款双色、四色火山图，突出感兴趣的基因

导读&#xff1a;火山图通常使用三种颜色分别表示显著上调&#xff0c;显著下调和不显著。通过为特定的数据点添加另一种颜色&#xff0c;可以创建双色或四色火山图&#xff0c;从而更直观地突出感兴趣的数据点。 《Nature Communication》文章“Molecular and functional land…...

编程日记 2024/11/27 5:58:06

C语言：C语言实现对MySQL数据库表增删改查功能

基础DOME可以用于学习借鉴&#xff1b; 具体代码 #include <stdio.h> #include <mysql.h> // mysql 文件&#xff0c;如果配置ok就可以直接包含这个文件//宏定义 连接MySQL必要参数 #define SERVER "localhost" //或 127.0.0.1 #define USER "roo…...

编程日记 2024/11/27 5:57:05

C++ 二叉搜索树（Binary Search Tree, BST）深度解析与全面指南：从基础概念到高级应用、算法优化及实战案例

&#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: C专栏 目录 ⼆叉搜索树的概念 ⼆叉搜索树的性能分析 ⼆叉搜索树的插⼊ ⼆叉搜索树的查找 二叉搜索树中序遍历 ⼆叉搜索树的删除 cur的左节点为空的情况 cur的右节点为空的情况 左&#xff0c;右节点都不为…...

编程日记 2024/11/27 5:56:04

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/9/14 23:47:25

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/9/13 19:14:23

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/9/2 4:01:22

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/9/13 10:07:19

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/9/3 15:45:36

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/9/2 17:49:27