Three.js是一款开源的WebGL绘图JS引擎，可以在WEB上实现很炫酷的3D效果。
three.js过山车示例Three.js可以方便的创建几何体，有时候我们需要对创建的几何体设置点击事件，由于我们的浏览器鼠标点击对应的是屏幕坐标（X，Y）,而three.js画布是三维场景，所以绑定鼠标点击事件，需要将我们屏幕点击的坐标转到Three.js的三维坐标，确定点击的对象模型后在绑定执行的动作。Three.js类库提供了THREE.Raycaster对象用于进行鼠标拾取。
Three.js鼠标点击事件封装关键代码：
functiongetIntersects(e){
//通过鼠标点击的位置计算出raycaster所需要的点的位置
mouse.x=(e.clientX/(app？app.clientWidth：window.innerWidth))*2-1;
mouse.y=-(e.clientY/(app？app.clientHeight：window.innerHeight))*2+1;
//计算物体和射线的焦点
raycaster.setFromCamera(mouse,camera);returnraycaster.intersectObjects(scene.children);};
代码调用：
1.对象初始化：
varevent=newEventKeeper(scene,camera,app);
scene参数为场景对象，camera参数为对象，app参数为three.js容器id
2.事件绑定：
event.addClickEventListener(object,fn)//绑定点击事件
event.addMouseoverEventListener(object,fn)//绑定鼠标滑入事件
event.addMouseoutEventListener(object,fn)//绑定鼠标滑出事件
其中object参数为要绑定事件的几何模型对象，fn对应的事件的处理函数
测试示例：点击几何体，被点击对象变成红色
three.js示例代码效果