加载和使用纹理需要了解以下几个方面:在Three.js里加载纹理并应用到网格上;使用凹凸贴图和法线贴图为网格添加深度和细节;使用光照贴图创建假阴影;使用环境贴图在材质上添加反光细节;使用光亮贴图,让网格的某些部分变得“闪亮”;通过修改网格的UV贴图,对贴图进行微调;将HTML5画布和视频元素作为纹理输入。本章节将会从以上几方面来了解纹理的使用。
1.使用凹凸贴图创建皱纹
之前我们学习了THREE.MeshPhongMaterial对象的map属性,知道它用来设置外部资源作为材质的纹理。这里再介绍它的bumpMap属性,用来实现凹凸贴图效果。代码和创建不同纹理一样,仅仅多个bumpMap属性的设置。代码如下:
function createMesh(geom, imageFile, bump){ var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile); var material = new THREE.MeshPhongMaterial({ map: texture }); if(bump){ var bumpTex = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump); material.bumpMap = bumpTex; } var mesh = new THREE.Mesh(geom, material); &