纳金网

标题: GLGE系列教程–第8节：空间跟随鼠标移动 [打印本页]

作者: 会飞的鱼 时间: 2012-8-31 15:04
标题: 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 时间: 2012-9-6 10:06
webGL新兴技术，值得学习

欢迎光临纳金网 (http://rs.narkii.com/club/)