three.js入门（1）——用node.js在本地搭建最基本web环境

学习three.js为什么要搭建本地服务器？（强调一下只是一个最基本的，实际项目中，逻辑还是很复杂的，不要用下面的代码）

公：在文件夹里运行的时候发现网上的图片材质加载不出来。索性搭个服务器让它走http流程。

私：之前学的node.js由于长时间不使用，已经完全生疏了，之前有在eclipse里搭建一个tomcat服务器，各种配，各种配，各种配，配了一整天，脑廓都配爆炸了，今天花了一上午（回顾之前的内容+简单搭建），就完成本地服务器的搭建，所以觉得node.js对于前端开发者来说更加容易上手。

由于内容过于简单，直接上代码，并一句句注释，算是对自己加深印象的一个过程。

整体的目录结构如图所示。如果用的是webstorm，请百度配置流程后，直接运行下面这段代码后即可在浏览器里输入 http://localhost:5681/index.html  即可验证。

结果为：

可以看到html以及js文件都可以成功加载，如果没有webstorm可以用cmd，找到nodeJS的安装目录（注意你的项目要放在nodeJS的安装环境下，或者有关联，怎么关联请自行百度）。使用命令node 你的JS文件名 即可运行该JS。

 

 

var http = require("http");
var url = require("url");
var fs = require("fs");
//加载三个模块，分别是http模块，url模块，fs模块，引入模块后可以调用里面的对象和方法，有点像前端直接引用JS，具体机制可以百度（初学者不需要了解的那么复杂）稍微介绍一下三个模块（根据个人的理解），第一个用于模拟http请求，第二个用于解析url，第三个用于解析文件

var server = http.createServer();//一句话创建本地服务器，是的，本地服务器已经建好了
server.listen(5681,"localhost"); //创建一个监听器，该函数能监听某个具体端口（5681）发送的请求，端口号请自行定义，尽量不要占用常用的端口（1-1024，）
server.on("request",function(req,res){ //监听http请求，req参数是请求从客户浏览器发送到服务器时附带的参数，res参数是服务器收到请求并处理后，返回给客户机的浏览器的结果
    var urlObj = url.parse(req.url); //解析发送请求时的url如"http://localhost:5681/index.html?id=1#p=1"，则会被解析成一个json对象，具体可以自己打印，这里只用到他的pathName："/index.html"
    var dir  = __dirname; //获取当前文件夹的路径
    var pathName = urlObj.pathname;
    var type = pathName.substr(pathName.lastIndexOf(".")+1); //获取文件后缀，如html，css，js
    var filePath =dir+'/'+type+pathName ;//拼接文件名
    filePath = filePath.replace(/\//g,'\\');//由于是查找本地文件，所以要把/替换成\，如d:\...
    fs.readFile(filePath,function(err,data){ //读取文件内容
        console.log("Error:"+err);//如果文件存在，err==null
        if(err){
            res.writeHead(404,{
                'content-type' : 'text/html;charset=utf-8'
            });
            res.end();//一定要写这句话，不然http请求在服务器不知道什么时候结束，客户端的浏览器也会一直处于等待状态
        }else{
            res.writeHead(200,{
                'content-type' : 'text/html;charset=utf-8'
            });
            res.end(data);//如果文件存在，就把文件读取的内容返回给客户机的浏览器
        }
    })
})