学习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.mzph.cn/pingmian/61971.shtml

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

相关文章

11.23作业

11.23作业

4、将整个 /etc 目录下的文件全部打包并用 gzip 压缩成/back/etcback.tar.gz 5、使当前用户永久生效的命令别名&#xff1a;写一个命令命为hello,实现的功能为每输入一次hello命令&#xff0c;就有hello&#xff0c;everyone写入文件/file.txt中。 6、创建mygroup组群&#xf…
阅读更多...
网安瞭望台第5期 ：7zip出现严重漏洞、识别网络钓鱼诈骗的方法分享

网安瞭望台第5期 ：7zip出现严重漏洞、识别网络钓鱼诈骗的方法分享

国内外要闻 7 - Zip存在高危漏洞&#xff0c;请立刻更新 2024 年 11 月 24 日&#xff0c;do son 报道了 7 - Zip 中存在的一个高严重性漏洞 CVE - 2024 - 11477。7 - Zip 是一款广受欢迎的文件压缩软件&#xff0c;而这个漏洞可能会让攻击者在存在漏洞的系统中执行恶意代码。…
阅读更多...
ESC字符背后的故事（27 ＜＞ 033 | x1B ？）

ESC字符背后的故事（27 ＜＞ 033 | x1B ？）

ANSI不可见字符转义&#xff0c;正确的理解让记忆和书写变得丝滑惬意。 (笔记模板由python脚本于2024年11月26日 15:05:33创建&#xff0c;本篇笔记适合python 基础扎实的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xf…
阅读更多...
【MyBatis】全局配置文件—mybatis.xml 创建xml模板

【MyBatis】全局配置文件—mybatis.xml 创建xml模板

文章目录 模板文件配置元素typeAliasessettings 模板文件 创建模板 按照顺序打开【File】–>【settings】–>【Editor】–>【File and Code Templates】&#xff08;或直接搜索&#xff09; <?xml version"1.0" encoding"UTF-8" ?> <…
阅读更多...
python的脚本式编程

python的脚本式编程

一. 简介 前面简单学习了一下 python的交互式编程&#xff0c;文章如下&#xff1a; python的交互式编程-CSDN博客 本文来简单学习一下 python的脚本式编程。 脚本式编程是 Python 编程中最常用的方式之一&#xff0c;特别适合于编写和维护较大的程序或脚本。 二. 脚本式编…
阅读更多...
flink学习（8）——窗口函数

flink学习（8）——窗口函数

增量聚合函数 ——指窗口每进入一条数据就计算一次 例如&#xff1a;要计算数字之和&#xff0c;进去一个12 计算结果为20&#xff0c; 再进入一个7 ——结果为27 reduce aggregate(aggregateFunction) package com.bigdata.day04;public class _04_agg函数 {public static …
阅读更多...
uname -m（machine） 命令用于显示当前系统的机器硬件架构（Unix Name）

uname -m（machine） 命令用于显示当前系统的机器硬件架构（Unix Name）

文章目录 关于 arm64 架构检查是否安装了 Rosetta 2其他相关信息解释&#xff1a;命令功能&#xff1a;示例&#xff1a; dgqdgqdeMac-mini / % uname -m arm64您运行的 uname -m 命令显示您的系统架构是 arm64。这意味着您的 Mac Mini 使用的是 Apple 的 M1 或更新的芯片&…
阅读更多...
QUICK调试camera-xml解析

QUICK调试camera-xml解析

本文主要介绍如何在QUICK QC6490使能相机模组。QC6490的相机基于CameraX的框架&#xff0c;只需通过配置XML文件&#xff0c;设置相机模组的相关参数&#xff0c;就可以点亮相机。本文主要介绍Camera Sensor Module XML和Camera Sensor XML配置的解析&#xff0c;这中间需要cam…
阅读更多...
10、PyTorch autograd使用教程

10、PyTorch autograd使用教程

文章目录 1. 相关思考2. 矩阵求导3. 两种方法求jacobian 1. 相关思考 2. 矩阵求导 假设我们有如下向量&#xff1a; y 1 3 x 1 5 [ w T ] 5 3 b 1 3 \begin{equation} y_{1\times3}x_{1\times5}[w^T]_{5\times3}b_{1\times3} \end{equation} y13​x15​[wT]53​b13​​…
阅读更多...
AIGC-----AIGC在虚拟现实中的应用前景

AIGC-----AIGC在虚拟现实中的应用前景

AIGC在虚拟现实中的应用前景 引言 随着人工智能生成内容&#xff08;AIGC&#xff09;的快速发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术的应用也迎来了新的契机。AIGC与VR的结合为创造沉浸式体验带来了全新的可能性&#xff0c;这种组合不仅极大地降低了VR内容的…
阅读更多...
Java项目实战II基于微信小程序的校运会管理系统（开发文档+数据库+源码）

Java项目实战II基于微信小程序的校运会管理系统（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导 一、前言 在充满活力与激情的校园生活中&#xff0c;校运会不仅是…
阅读更多...
计算机网络的类型

计算机网络的类型

目录 按覆盖范围分类 个人区域网&#xff08;PAN&#xff09; 局域网&#xff08;LAN&#xff09; 城域网&#xff08;MAN&#xff09; 4. 广域网&#xff08;WAN&#xff09; 按使用场景和性质分类 公网&#xff08;全球网络&#xff09; 外网 内网&#xff08;私有网…
阅读更多...
第R4周：LSTM-火灾温度预测（TensorFlow版）

第R4周：LSTM-火灾温度预测（TensorFlow版）

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营]中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊]** 往期文章可查阅&#xff1a; 深度学习总结 任务说明&#xff1a;数据集中提供了火灾温度&#xff08;Tem1&#xff09;、一氧化碳浓度…
阅读更多...
手搓人工智能—聚类分析（下）谱系聚类与K-mean聚类

手搓人工智能—聚类分析（下）谱系聚类与K-mean聚类

“无论结果如何&#xff0c;至少我们存在过” ——《无人深空》 前言 除了上一篇手搓人工智能-聚类分析&#xff08;上&#xff09;中提到的两种简单聚类方式&#xff0c;还有一些更为常用、更复杂的聚类方式&#xff1a;谱系聚类&#xff0c;K-均值聚类。 谱系聚类 谱系聚类…
阅读更多...
文件内容扫描工具

文件内容扫描工具

简介 文件扫描助手是一款基于Vite Vue 3 Electron技术栈开发的跨平台桌面应用程序。它提供了强大的文件内容搜索功能&#xff0c;支持Word、Excel、PDF、PPT等常见办公文档格式。用户可以通过关键词快速定位到包含特定内容的文件&#xff0c;极大地提高了文件管理和查找效率…
阅读更多...
函数类型注释和Union联合类型注释

函数类型注释和Union联合类型注释

函数类型注释格式&#xff08;调用时提示输入参数的类型&#xff09;: )def 函数名(形参名:类型&#xff0c;形参名:类型&#xff09;->函数返回值类型: 函数体 Union联合类型注释&#xff08;可注释多种类型混合的变量&#xff09;格式: #先导入模块 from typing import…
阅读更多...
AIGC--AIGC与人机协作:新的创作模式

AIGC--AIGC与人机协作:新的创作模式

AIGC与人机协作&#xff1a;新的创作模式 引言 人工智能生成内容&#xff08;AIGC&#xff09;正在以惊人的速度渗透到创作的各个领域。从生成文本、音乐、到图像和视频&#xff0c;AIGC使得创作过程变得更加快捷和高效。然而&#xff0c;AIGC并非完全取代了人类的创作角色&am…
阅读更多...
【ue5】UE5运行时下载视频/UE5 runtime download video（MP4）

【ue5】UE5运行时下载视频/UE5 runtime download video（MP4）

插件还是老朋友。 节点的content type要打对。 &#xff08;参照表&#xff1a;MIME 类型&#xff08;MIME Type&#xff09;完整对照表 - 免费在线工具&#xff09; 结果展示&#xff1a;
阅读更多...
STM32F103外部中断配置

STM32F103外部中断配置

一、外部中断 在上一节我们介绍了STM32f103的嵌套向量中断控制器&#xff0c;其中包括中断的使能、失能、中断优先级分组以及中断优先级配置等内容。 1.1 外部中断/事件控制器 在STM32f103支持的60个可屏蔽中断中&#xff0c;有一些比较特殊的中断&#xff1a; 中断编号13 EXTI…
阅读更多...
C嘎嘎探索篇：栈与队列的交响：C++中的结构艺术

C嘎嘎探索篇：栈与队列的交响：C++中的结构艺术

C嘎嘎探索篇&#xff1a;栈与队列的交响&#xff1a;C中的结构艺术 前言&#xff1a; 小编在之前刚完成了C中栈和队列&#xff08;stack和queue&#xff09;的讲解&#xff0c;忘记的小伙伴可以去我上一篇文章看一眼的&#xff0c;今天小编将会带领大家吹奏栈和队列的交响&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023