Three.js 中的光照贴图答案

【问题标题】：Lightmaps in Three.jsThree.js 中的光照贴图
【发布时间】：2016-03-07 09:09:47
【问题描述】：

光照贴图独立于其他纹理存在，对吧？

所以我必须设置第二组 UV。

我用第二组 UV 导出了我的 JSON 对象并添加了以下内容。

geometry.faceVertexUvs[0] = geometry.faceVertexUvs[1];

我没有得到任何工作结果。我错过了什么？也许有人可以给我一个方向。三.js r.73

loader.load("model.js", function(geometry){
geometry.faceVertexUvs[0] = geometry.faceVertexUvs[1];

var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
  color: 0x777777,
  lightMap: THREE.ImageUtils.loadTexture( "lightmap.png" ),
  normalMap: THREE.ImageUtils.loadTexture( "normalmap.png" ),
  specularMap: THREE.ImageUtils.loadTexture( "specularmap.png" )
}));
scene.add(mesh );
});

【问题讨论】：

试试geometry.faceVertexUvs[ 1 ] = geometry.faceVertexUvs[ 0 ];

标签： javascript three.js

【解决方案1】：

three.js 中的光照贴图需要第二组 UV。一种解决方案是通过复制第一组来添加第二组 UV。

对于THREE.Geometry，您可以这样做：

geometry.faceVertexUvs[ 1 ] = geometry.faceVertexUvs[ 0 ];

对于THREE.BufferGeometry，使用此模式；

var uvs = geometry.attributes.uv.array;
geometry.addAttribute( 'uv2', new THREE.BufferAttribute( uvs, 2 ) );

three.js r.73

【讨论】：