Three.js 光照贴图添加阴影 lightMap - 文章教程

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

发布于 2021-08-17 字数 1790 浏览 1006 评论 0

在三维场景中有时候需要设置模型的阴影贴图,一般 Threejs 加载外部模型的光照贴图加载器可以自动设置,不用人为干涉,为了让大家更好理解光照贴图,这里就通过代码手动设置场景模型的阴影贴图。完整源码和光照贴图参考 Threejs 视频教程 8.7 节课。

//创建一个平面几何体作为投影面
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
...

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;

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
23939 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0