Three.js光照贴图添加阴影(·lightMap)

2024-04-09 19:00:15

Three.js光照贴图添加阴影(`·lightMap`)

本文是Three.js电子书的8.7节

在三维场景中有时候需要设置模型的阴影，也就是阴影贴图或者说光照贴图·lightMap，一般Threejs加载外部模型的光照贴图·lightMap，三维模型加载器可以自动设置，不需要程序员通过代码去设置，不过为了让大家更好理解光照贴图·lightMap，这里就通过Three.js代码设置场景模型的阴影贴图·lightMap。

//创建一个平面几何体作为投影面
var planeGeometry = new THREE.PlaneGeometry(300, 200);planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];
var textureLoader = new THREE.TextureLoader();
// 加载光照贴图
var textureLight = textureLoader.load('shadow.png');
var planeMaterial = new THREE.MeshLambertMaterial({color: 0x999999,lightMap:textureLight,// 设置光照贴图// lightMapIntensity:0.5,//烘培光照的强度. 默认 1.
});
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
...

课程5.2节设置模型的阴影是通过实时计算得到的，而光照贴图·lightMap是3D美术渲染好提供给程序员。这两种方式相比较通过贴图的方式更为节约资源，提高渲染性功能。

`Geometry`属性`.faceVertexUvs`

一般几何体有两套UV坐标，对于Geometry类型几何体而言

Geometry.faceVertexUvs[0]包含的纹理坐标用于颜色贴图map、法线贴图normalMap等,Geometry.faceVertexUvs[1]包含的第二套纹理贴图用于光照阴影贴图

一般通过Threejs几何体API创建的几何体默认只有一组纹理坐标Geometry.faceVertexUvs[0]，所以为了设置光照阴影贴图，需要给另一组纹理坐标赋值Geometry.faceVertexUvs[1] = Geometry.faceVertexUvs[0];

`BufferGeometry`属性`.uv`和`.uv2`

一般通过Threejs加载外部模型，解析三维模型数据得到的几何体类型是缓冲类型几何体BufferGeometry，对于BufferGeometry而言两套纹理坐标分别通过.uv和.uv2属性表示。

geometry.attributes.uv2 = geometry.attributes.uv;

Three.js光照贴图添加阴影(·lightMap)相关推荐

使用预计算实时全局光照优化照明-微调光照贴图参数
本文地址:https://blog.csdn.net/t163361/article/details/124107784 翻译说明: 教程翻译主要用谷歌翻译后,对特别不通顺的地方进行了微调.同时针对一 ...
unity android光照贴图格式,光照贴图参数
Lightmapping Quickstart 光照贴图定向模式光照贴图参数 The Lightmap Parameters Asset is used to store a set of valu ...
Unity3D技术之深入了解光照贴图详解
2019独角兽企业重金招聘Python工程师标准>>> 深入了解光照贴图如果是第一次接触 Unity 中的光照贴图,本快速入门指南将对您有所帮助. 光照贴图完全集成到 Unity ...
Unity项目运行时动态更新光照贴图 | LightMap
Unity项目运行时动态更新烘培的光照贴图动态更新烘培的光照贴图场景的物件没有发生变化(也就是说没有运行时加载在场景上的Prefab) 场景的烘培贴图已经更新,但是有些物件prefab想运行时加载 ...
OpenGL Lightmap光照贴图的实例
OpenGL Lightmap光照贴图先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <glad/glad.h> #include ...
UWA学堂专栏推荐：光照贴图Lightmap初探
这也许是目前国内对lightmap(光照贴图)总结最全面的文章了,作者钱康来,毕业于清华大学CG/CAD实验室,主要研究方向为计算机图形学,多年工作经验横跨Unity.Cocos.unreal多个游戏 ...
d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
Blender烘焙Lightmap光照贴图
1.创建场景中的物体 2.取得UV展开图 2.1 创建新窗口保持物体模式 -> 鼠标左键选中一个物体 -> 通过Shift+鼠标左键依次选中场景内将要被贴图烘焙的物体(或从右侧大纲视图中 ...
redius在php中的使用,HTML_使用css给图片添加阴影入门篇，一般我们可以使用背景图的方 - phpStudy...
使用css给图片添加阴影入门篇一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现 a href=& ...

最新文章

热门文章