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

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

news 2026/3/16 5:07:47

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

手把手教你用UNetFormer实现遥感图像分割：从环境配置到模型训练全流程

手把手教你用UNetFormer实现遥感图像分割&#xff1a;从环境配置到模型训练全流程 遥感图像分割是计算机视觉领域的重要应用方向&#xff0c;尤其在城市规划、灾害监测和农业评估等领域发挥着关键作用。近年来&#xff0c;Transformer架构在视觉任务中展现出强大的全局建模能力…...

编程新知 2026/3/16 3:06:11

华为防火墙NAT配置避坑指南：从内网穿透到外网访问的5个关键步骤

华为防火墙NAT配置避坑指南&#xff1a;从内网穿透到外网访问的5个关键步骤 当企业需要将内部服务暴露给公网访问时&#xff0c;华为防火墙的NAT配置往往是第一道技术门槛。许多运维团队都经历过这样的困境&#xff1a;安全策略明明已经放通&#xff0c;但NAT转换就是不生效&am…...

编程新知 2026/3/16 2:41:56

Qt/VS LNK2019/LNK2001：从符号解析到编译链接的实战排查指南

1. 当链接器对你发出警告&#xff1a;LNK2019/LNK2001初探 第一次在Qt和Visual Studio混合开发环境中看到LNK2019或LNK2001错误时&#xff0c;我整个人都是懵的。屏幕上那一行"无法解析的外部符号"仿佛在嘲笑我的无知。但别担心&#xff0c;这其实是每个C开发者都会遇…...

编程新知 2026/3/16 2:27:43

从零开始备战软考软件设计师：一份保姆级的考点梳理指南

从零开始备战软考软件设计师&#xff1a;一份保姆级的考点梳理指南 第一次翻开软考软件设计师的考纲时&#xff0c;我盯着那些陌生的术语发呆了十分钟——"Flynn分类法"、"PV操作"、"McCabe复杂度"&#xff0c;每个词都像一堵高墙。但三个月后&a…...

编程新知 2026/3/16 2:13:37

Phi-3-vision-128k-instruct开源大模型：128K视觉上下文免费部署实战

Phi-3-vision-128k-instruct开源大模型&#xff1a;128K视觉上下文免费部署实战 1. 模型简介 Phi-3-Vision-128K-Instruct 是一个轻量级、高性能的开源多模态模型&#xff0c;属于Phi-3模型家族的最新成员。这个模型特别之处在于它支持长达128K的上下文长度&#xff08;以标记…...

编程新知 2026/3/16 2:09:33

STM32开发者必看：用J-Link RTT实现彩色日志输出（附代码示例）

STM32调试革命&#xff1a;J-Link RTT彩色日志全攻略 1. 嵌入式调试的痛点与RTT的崛起 调试信息输出一直是嵌入式开发中不可或缺的环节。传统方式通常依赖于串口打印&#xff0c;这种方式虽然简单直接&#xff0c;但也存在诸多限制&#xff1a;需要占用额外的硬件资源&#x…...

编程新知 2026/3/16 1:15:06

知识图谱在智能客服中的应用：从问答系统到场景化解决方案

知识图谱重构智能客服&#xff1a;从精准问答到场景化服务的进化路径 当你在深夜打开手机银行APP&#xff0c;向智能客服询问"如何开通跨境汇款"时&#xff0c;背后正上演着一场精密的"知识交响乐"。知识图谱技术正在重塑智能客服的底层逻辑&#xff0c;将…...

编程新知 2026/3/16 0:59:01

直播技术优化：OBS多平台RTMP推流解决方案的架构与实践

直播技术优化&#xff1a;OBS多平台RTMP推流解决方案的架构与实践 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 在当前直播行业多平台分发的业务场景下&#xff0c;内容创作者面临着多…...

编程新知 2026/3/16 0:48:59

Agent 应该中 PDF 工具方案分析报告 - AI分析分享

一、Python 本地库&#xff08;最高排版控制权&#xff09;这类工具直接在代码层生成 PDF&#xff0c;是 Agent 管道中嵌入最深、控制力最强的一层。ReportLab 是老牌工业级选择。它支持文字、图像、图表和自定义图形&#xff0c;最适合需要精细排版的复杂布局文档&#xff0c;…...

编程新知 2026/3/15 23:54:34

2006-2024年上市公司董事网络位置关系数据、中心度结构洞数据

1.资料名称&#xff1a;2024-2006年上市公司董事网络位置关系数据、中心度结构洞数据 2.测算方式&#xff1a;参考顶刊《会计研究》林钟高&#xff08;2023&#xff09;老师的做法&#xff0c;使用Pajek软件计算的董事所占据的结构洞数量&#xff0c;该值越大&#xff0c;表示…...

编程新知 2026/3/15 19:29:54