three.js自学之旅（8）—— 天空盒研究、完善nodejs服务器、使用TrackballControls控制器

 日更停了，因为碰到了坑，这章开始，会贴近于最终的毕设来学习。有需要学习three.js的童鞋可以前往该博客
http://blog.csdn.net/birdflyto206
个人感觉这个博主对three.js的解析更加丰富透彻，毕竟他是真的做游戏的，我是做前端的哈哈。
 本章开始前，先填一个之前的坑，由于之前的服务器搭建的过于脆弱，做了一定的调整，如果是从第一章开始看的朋友注意将你一直在用的nodejs服务器的代码替换成以下代码，不然你会加载不了图片，顺带说一下，由于之后的需求会涉及数据库操作以及在nodejs里开发接口，因此这个服务器还会继续完善（对于不需要用nodejs搭建本地服务器的人请立即跳过此开头。)

 

var http = require("http");
var url = require("url");
var fs = require("fs");
var querystring = require("querystring");
var server = http.createServer();
server.listen(5681,"localhost");
server.on("request",function(req,res){
var urlObj = url.parse(req.url);
var dir  = __dirname;
var pathName = urlObj.pathname;
var type = pathName.substr(pathName.lastIndexOf(".")+1);
//判断是否为ajax请求
if(type.indexOf("\/")==-1){
var filePath =dir+pathName ;
filePath = filePath.replace(/\//g,'\\');
fs.readFile(filePath,function(err,data){
if(err){
res.writeHead(404,{
'content-type' : 'text/html;charset=utf-8'
});
res.end();
}else{
res.writeHead(200,{
'content-type' : 'text/html;charset=utf-8'
});
res.end(data);
}
})
}else{
console.log("这是一个"+req.method+"请求");
if(req.method.toUpperCase() == 'GET'){
console.log(querystring.parse(urlObj.query));
res.writeHead(200,{
'content-type' : 'text/html;charset=utf-8',
});
res.end();

}else{
var str = '';
req.on("data",function(chunk){
str += chunk;
})
req.on("end",function(){
console.log(querystring.parse(str));
res.writeHead(200,{
'content-type' : 'text/html;charset=utf-8',
});
res.end();
})
}

}
})

 对于跳过开头的朋友这句也不用看，关于前后端分离的问题我多嘴一句，由于现在程序员公司前后端基本是分离，因此在我的笔记本上根本就没有装任何SQL数据库软件，我的ajax请求完全通过fidder代理转发到服务器上，有兴趣的同学可以打我电话110。经过测试，我搭建的服务器已经可以通过fidder转发请求到服务器上的数据。

       填了本地服务器的坑之后再来填一个相机的坑

 之前在写相机的旋转功能时，对三维坐标的计算想的过于简单，加入y轴之后，计算量瞬间不是我这个数学学渣能解决的，所以

打算另辟蹊径，直接上网找了个插件来用。关于这个插件的源码我会放在最后，这里只讲如何使用。

 先上所有的代码和最终的效果图，请不要太惊讶，因为这章开始我会围绕全景图平台的搭建为终极目的做研究。

camera.lookAt(0,0,0);
camera.position.set(0,0,2); //首先我对相机的位置做了处理
var urlArr = ["/img/right.png","/img/left.png","/img/top.png","/img/bottom.png","/img/font.png","/img/behind.png"]
var textureArr = getTexture(urlArr);
function getTexture(arr){
var textureArr = [];
for (var i = 0; i < 6; i++) {
textureArr.push(new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load(arr[i]),//将图片纹理贴上
side: THREE.BackSide,/*镜像翻转，因为你身处在盒子的内部*/
bumpMap:true, //凹凸纹理，据说能让纹理显示效果更佳感觉并没什么软用
bumpScale:0.2
}));
}
return textureArr;
}
var material = new THREE.MeshFaceMaterial(textureArr); //该方法已被弃用，如果以后有更好的解决办法我会尽快贴出

var cube  = new THREE.Mesh(geometry,material);
cube.position.set(0,0,1);
scene.add(cube);
var controls = new THREE.TrackballControls(camera); //相机控制器的创建
controls.noPan = true; //这里我把相机的右键功能 改变相机的观察半径功能去了
controls.minDistance = 1; //这两个参数用于控制鼠标滚轮滚动的时候相机的距离坐标（0,0,0）的最大和最小半径差值
controls.maxDistance = 4;
function renderLoop(){
controls .update();
requestAnimationFrame(renderLoop);
renderer.render(scene,camera);
}

下面来看图说话

第一步：把相机放到坐标轴（0,0,2）的位置，再把立方体放在（0,0,0）的位置，然后让相机lookAt（0,0,0），也就是相机的视角始终对着立方体的中心（重心？什么心？反正就是那个心，你懂的），为什么不直接把相机放在坐标轴的（0,0,0）点呢？如果你不想你的滚轮放大物体的功能失效你可以这么做。

第二步：创建一个纹理数组，分别对应立方体的右、左、上、下、前、后，注意这个顺序问题，然后将这个纹理数组，放到MeshFaceMaterial材质里，参考的是网上比较简易的方法，而且这个对象已经被弃用了，所以后面遇到解决不了的问题可能会替换这种方法。

第三步：复制主要代码，然后把下面的图拿走就能看到一个三维的场景了