RayCaster

这个类用于进行raycasting（光线投射）。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

一般用于只有电脑端能玩的游戏。

用于计算鼠标移过了那些点，那么是不是只有有物体才能进行光线投射呢?

用RayCaster能计算出鼠标在三维空间中的坐标吗?

场景初始化

	scene = new THREE.Scene();
	clock = new THREE.Clock();
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
     camera.position.set( 10, 10, 10 );
    camera.lookAt( scene.position );
camera.updateMatrix();

看向场景原点

camera.lookAt( scene.position ) 看向场景的中心点，这样能使场景在显示屏中居中。当将相机位置移动到高点时，可以居中俯瞰整个场景。这对于展示场景全景图非常有用。

使用了透视投影相机

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

这一摄像机模拟了人眼看世界的效果，鸟类的视野范围可以达到360，而人眼的视野范围最大只可达到90，因而fov参数最大值仅为90，再设置打了，将不知道显示的是什么了。

视椎体长宽比其最终表现在显示屏上就是canvas所代表的画布区域的长宽比。

近端面越大，则显示在相机中的场景范围越小。

远端面通常是设置为1000固定值。

将近端面设置为1：

Image 2.png

将近端面设置为20:

Image 5.png

光线投射

求鼠标在场景中的坐标

function onPointerMove( event ) { // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1) pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1; pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1; }

这个原理其实跟碰撞检测一致，光线投射就是实时计算鼠标位置与物体发生了碰撞。

点点的变换

scale是一个Vector3类型。

sphere.scale.multiplyScalar( 0.98 ); // 缩放为原大小的0.98倍
sphere.scale.clampScalar( 0.01, 1 ); // 保证小点点不至于缩放的太大或太小

three.js案例解析之跟随鼠标移动的点