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

最新推荐文章于 2024-08-16 11:12:58 发布

闲人王昱珩

最新推荐文章于 2024-08-16 11:12:58 发布

阅读量2.3k

点赞数

分类专栏：毕设-three.js系列

本文链接：https://blog.csdn.net/dkr380205984/article/details/79137231

版权

毕设-three.js系列专栏收录该内容

8 篇文章 8 订阅

订阅专栏

日更停了，因为碰到了坑，这章开始，会贴近于最终的毕设来学习。有需要学习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);
}