three.js+WebGL踩坑经验合集(2):3D场景被相机裁切后，被裁切的部分依然可以被鼠标碰撞检测得到（射线检测）

本文链接：https://blog.youkuaiyun.com/iloveas2014/article/details/145331721

three.js内置了Raycaster类实现鼠标的碰撞检测，用它可以实现3D物体的鼠标点击，移入移出，触屏检测一类的业务功能。

该功能虽然强大，但同事们普遍反映不是那么好用，因为它不像其它配套了可视编辑的3D引擎一样，直接把这些交互事件挂载到3D物体上。

不好用没关系，只要研发团队有懂three.js的人，或者有人把写好的实现代码封装一下给到业务开发去用就可以了。

蛋疼的是，这个东西还有一些小bug，比如它不认相机裁剪。以下为测试用例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>three_cameraNear</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script src="three/build/three.js"></script>
  <script src="three/examples/js/controls/OrbitControls.js"></script>
  <script src="three/examples/js/libs/dat.gui.min.js"></script>
</head>

<body>
  <script>
    var scene = new THREE.Scene();
    
    var geometry = new THREE.SphereGeometry(50, 100, 100);

    var srcColor = 0xFF6600;
    var material = new THREE.MeshLambertMaterial({color: srcColor});
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var light = new THREE.DirectionalLight({color: 0xFFFFFF, intensity: 0.5});
    light.position.set(-500, 500, 500);
    scene.add(light);

    var ambLight = new THREE.AmbientLight({color: 0xFFFFFF, intensity: 0.3});
    scene.add(ambLight);
    
    var width = window.innerWidth; 
    var height &#