WebGL利用Three.js库写凹凸纹理

   又是很久没更新，我不敢说是因为其它事，但是自己变懒了这个不可否认，做技术的如果做不出成果，一直潜心研究的人恐怕很少吧，好了废话不多说。

   Three.js库作为webgl封装好的一个库，极大便利了webgl的开发，否则我们画一个立方体都要由12个三角形组成，当然我们也必须得懂webgl底层的东西，这些是我们进一步学习的基础，最近几天刚接触three库，被它所能实现的功能震撼到了，个人感觉它带入了面向对象的色彩，比如摄像机、几何体、材质、场景、灯光等等都被几个代码封装好了。今天我们要说的便是凹凸纹理，凹凸纹理的作用是增加了纹理的高度，使得画面更加真实。这里推荐一个中文网站webgl中文网，里面有很多的教程。国外也有一个网站shadertoy也有丰富的学习资料。

    凹凸纹理实现效果：

    


     下面粘贴上代码：

          

var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var WebGLRenderer=new THREE.WebGLRenderer();
WebGLRenderer.setClearColor(new THREE.Color(0x000000,1.0));
WebGLRenderer.setSize(window.innerWidth,window.innerHeight);
WebGLRenderer.shadowMapEnabled=true;

         代码其实很好理解，就是创建一个场景、相机、和一个渲染器，然后打开阴影开关。

var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 15), "q.jpg");
sphere1.rotation.y = -0.5;
sphere1.position.x = 5;
scene.add(sphere1);

var floorTex = THREE.ImageUtils.loadTexture("f.png");
var plane = new THREE.Mesh(new THREE.BoxGeometry(200, 100, 0.1, 30), new THREE.MeshPhongMaterial({
map: floorTex
}));
plane.position.y = -7.5;
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);

camera.position.x = 0;
camera.position.y = 15;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var ambiLight = new THREE.AmbientLight(0x242424);
scene.add(ambiLight);
var light = new THREE.SpotLight();
light.position.set(0, 30, 30);
light.intensity = 1.5;
scen
4000
e.add(light);

document.body.appendChild(WebGLRenderer.domElement);

var step = 0;

render();
function createMesh(geom,imageFile)
{
var texture=THREE.ImageUtils.loadTexture("./"+imageFile);
geom.computeVertexNormals();
var mat=new THREE.MeshPhongMaterial();
mat.map=texture;
var mesh=new THREE.Mesh(geom,mat);
return mesh;
}
function render()
{
requestAnimationFrame(render);
WebGLRenderer.render(scene,camera);

}

这里就是创建一个box几何体，然后用图片作为纹理贴图，以及位置、大小设置，我这里就不一一细细说明，中文网上教程都有。
链接：http://pan.baidu.com/s/1o8NSEIA 密码：doqj这是纹理资源，包括后面几篇资源。