相机（camera）是用来将3D场景投影到二维屏幕的重要因素，如果没有相机（camera）的投影，我们就什么也看不到。在Web3D｜基于WebGL的Three.js框架｜入门篇中我们已经介绍了相机的两种投影方式：

透视投影：THREE.PerspectiveCamera，遵循近大远小规则，跟现实生活中我们看物体的方式是一样的。正投影：THREE.OrthographicCamera，不论远近，按照统一的大小进行投影。

这一篇，我们的主题是如何捕捉鼠标事件，将相机移动到被选中的渲染物体上。

分析第一步：获取鼠标的位置，转换成three.js的坐标。第二步：获取当前鼠标位置下的渲染物体。第三步：移动相机，更新照射位置。示例

具体的方法如下：

var mouse = {};function onDocumentMouseDown(event) {// 将当前的屏幕坐标，转换成Three坐标mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;//查找当前坐标下的渲染物体。raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects(group.children, false);if (intersects.length > 0) {//获取当前物体的位置.var position = intersects[0].object.position.clone();// 移动相机，更新照射点.camera.position = position;camera.lookAt(position);}}

由于这个方法是直接改变camera的位置，看上去不太友好，我们可以用Tween.js来添加点动画效果。

function tweenCamera(position, target) {new TWEEN.Tween(camera.position).to({x: position.x,y: position.y,z: position.z}, 600).easing(TWEEN.Easing.Sinusoidal.InOut).start();new TWEEN.Tween(controls.target).to({x: target.x,y: target.y,z: target.z}, 600).easing(TWEEN.Easing.Sinusoidal.InOut).start();}

总结由于屏幕坐标和Three中的坐标系不同，所以不能直接使用。默认情况下，camera照在（0，0，0）点，所以，在移动camera之后，必须调用lookAt更新照射位置。查找界面上的元素，用到了Raycaster，是一个THREE.Raycaster对象。

更多内容，请期待下一篇：Web3D | 基于WebGL的Three.js框架 | 坐标转换篇