文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Three.js光照贴图添加阴影(·lightMap
)
在三维场景中有时候需要设置模型的阴影,也就是阴影贴图或者说光照贴图·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;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论