Extjs 4.2 MVC+ThreeJs学习笔记（四）bumpmap 凹凸贴图

bump mapping（凹凸贴图）

　　凹凸贴图是指计算机图形学中在三维环境中通过纹理方法来产生表面凹凸不平的视觉效果。它主要的原理是通过改变表面光照方程的法线，而不是表面的几何法线来模拟凹凸不平的视觉特征，如褶皱、波浪等等。凹凸贴图的实现方法主要有：偏移向量凹凸纹理和改变高度场。

　　这是一种在3D场景中模拟粗糙表面的技术，将带有深度变化的凹凸材质贴图赋予3D物体，经过光线渲染处理后，这个物体的表面就会呈现出凹凸不平的感觉，而无需改变物体的几何结构或增加额外的点面。例如，把一张碎石的贴图赋予一个平面，经过处理后这个平面就会变成一片铺满碎石、高低不平的荒原。当然，使用凹凸贴图产生的凹凸效果其光影的方向角度是不会改变的，而且不可能产生物理上的起伏效果。

　　在threejs中应用bumpmap：

　　var geometry = new THREE.SphereGeometry(0.5, 32, 32) var material = new THREE.MeshPhongMaterial() var earthMesh = new THREE.Mesh(geometry, material) scene.add(earthMesh)

//模型
var geometry   = new THREE.SphereGeometry(0.5, 32, 32)
//材质
var material  = new THREE.MeshPhongMaterial()
//mesh
var earthMesh = new THREE.Mesh(geometry, material)
//加入场景
scene.add(earthMesh)
//贴图
material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg')
//凹凸贴图
material.bumpMap    = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg')
material.bumpScale = 0.05

　　总结一下，bumpmap就是在不改变模型的情况下，通过bumpmap颜色的灰度模拟出模型表面高低不一的效果，给人粗糙的感觉。