GLGE系列教程–第8节：空间跟随鼠标移动

会飞的鱼

这一节我们来学习如何让你的空间跟随你的鼠标移动，在前几节我们学会了如何创建一个场景，但是我们只能看到两个面或者一个面，现在我们添加鼠标时间可以看到整个空间的六个面…
这一节我们来学习如何让你的空间跟随你的鼠标移动，在前几节我们学会了如何创建一个场景，但是我们只能看到两个面或者一个面，现在我们添加鼠标时间可以看到整个空间的六个面。
现在我们在javascript中创建鼠标事件，
JavaScript Code复制内容到剪贴板

//创建一个鼠标输入事件  

var mouse=new GLGE.MouseInput(document.getElementById(‘canvas’));  

//定义一个鼠标移动画布  

var mouseovercanvas;  

//定义一个常量  

var inc=0.2;  

现在我们创建鼠标移动方法  

//鼠标移动方法  

function mouselook(){}  

首先我们需要获得鼠标的当前位置：现在我们需要在canvas标签的外边在加上一个div标签，并且设置id=“ container”；  

  

//获得当前鼠标的坐标点  

var mousepos=mouse.getMousePosition();  

mousepos.x=mousepos.x-document.getElementById(“container”).offsetLeft;  

mousepos.y=mousepos.y-document.getElementById(“container”).offsetTop;  

然后我们需要做的是获得在场景中放置的摄像机，并且获得摄像机的属性值。  

//获得场景中的摄像机  

var camera=gameScene.camera;  

camerarot=camera.getRotation();  

inc=(mousepos.y-(document.getElementById(‘canvas’).offsetHeight/2))/500;  

  

定鼠标获得时间相机的初始位置，不过这句可以注释掉，我们需要摄像机跟着鼠标转。  

//鼠标移动，空间静止在x([0,0,-1,1]  

//   var trans=camera.getRotMatrix().x([0,0,-1,1]);  

var trans=GLGE.mulMat4Vec4(camera.getRotMatrix(),[0,0,-1,1]);  

var mag=Math.pow(Math.pow(trans[0],2)+Math.pow(trans[1],2),0.5);  

trans[0]=trans[0]/mag;  

trans[1]=trans[1]/mag;  

camera.setRotX(1.56-trans[1]*inc);  

camera.setRotZ(-trans[0]*inc);  

//获得canvas的宽度  

var width=document.getElementById(‘canvas’).offsetWidth;  

//判断相机  

if(mousepos.x var turn=Math.pow((mousepos.x-width*0.3)/(width*0.3),2)*0.005*(now-lasttime);  

camera.setRotY(camerarot.y+turn);  

}  

if(mousepos.x>width*0.7){  

var turn=Math.pow((mousepos.x-width*0.7)/(width*0.3),2)*0.005*(now-lasttime);  

camera.setRotY(camerarot.y-turn);  

}  

document.getElementById(“canvas”).onmouseover=function(e){mouseovercanvas=***e;}  

document.getElementById(“canvas”).onmouseout=function(e){mouseovercanvas=false;}

function render(){  

gameRenderer.render();  

mouselook();  

}
源码下载地址：http://vdisk.weibo.com/s/z77M/1314631032  来源：WebGL广播站

yeu1233

webGL新兴技术，值得学习