相机（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();
}

总结

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

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