（二）Three.js光线检测摘要：使用three.js中的光线检测 Raycaster() ，实现一下效果：
- 通过点击处的坐标，修改摄像机位置，实现摄像机由远及近的过渡动态效果（由远景到近景）
因为使用鼠标对模型点击获?。敲矗賢hree中可以使用Raycaster()光线检测来实现 。再three官网上对Raycaster的解释为“此类旨在协助进行光线投射 。Raycasting用于鼠标拾?。扑闶蟊暝?D空间中的哪些对象）等”，其原理便是
THREE.Raycaster对象从屏幕上的点击位置向场景中发射一束光线，与摄像机的位置形成一条光线 ， 在这条光线路径上的物体，都会被检测到1.1.1参数Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )origin —— 光线投射的原点向量 。direction —— 向射线提供方向的方向向量，应当被标准化 。near —— 返回的所有结果比near远 。near不能为负值，其默认值为0 。far —— 返回的所有结果都比far近 。far不能小于near ， 其默认值为Infinity（正无穷 。）1.2 使用到的方法1.2.1 setFromCamera()这个方法中有两个变量，第一个是在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间；
第二个是场景摄像机
.setFromCamera ( coords : Vector2, camera : Camera ) : undefinedcoords —— 在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间 。camera —— 射线所来源的摄像机 。1.2.2intersectObject()这个方法是用来检测与射线相交的物体，返回值是一个Array数组；检测所有在射线与物体之间，包括或不包括后代的相交部分 。返回结果时，相交部分将按距离进行排序 ， 最近的位于第一个 。
.intersectObject ( object : Object3D, recursive : Boolean, optionalTarget : Array ) : Arrayobject —— 检查与射线相交的物体 。recursive —— 若为true，则同时也会检查所有的后代 。否则将只会检查对象本身 。默认值为true 。optionalTarget — （可?。┥柚媒峁哪勘晔?。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;） 。返回的数组如下所示：
文章插图
参数解释：
distance —— 射线投射原点和相交部分之间的距离 。point —— 相交部分的点（世界坐标）face —— 相交的面faceIndex —— 相交的面的索引object —— 相交的物体uv —— 相交部分的点的UV坐标 。uv2 —— Second set of U,V coordinates at point of intersectioninstanceId – The index number of the instance where the ray intersects the InstancedMesh当计算这条射线是否和物体相交的时候，Raycaster将传入的对象委托给raycast方法 。这将可以让mesh对于光线投射的响应不同于lines和pointclouds 。请注意：对于网格来说，面必须朝向射线的原点，以便其能够被检测到 。用于交互的射线穿过面的背侧时 ， 将不会被检测到 。如果需要对物体中面的两侧进行光线投射，你需要将material中的side属性设置为THREE.DoubleSide 。1.2.3 intersectObjects()这个方法和上面的方法相差不多 ， 本方法是用来检测一组物体；检测所有在射线与这些物体之间，包括或不包括后代的相交部分 。返回结果时，相交部分将按距离进行排序，最近的位于第一个），相交部分和.intersectObject所返回的格式是相同的 。
.intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Arrayobjects —— 检测和射线相交的一组物体 。recursive —— 若为true ， 则同时也会检测所有物体的后代 。否则将只会检测对象本身的相交部分 。默认值为true 。optionalTarget —— （可?。┥柚媒峁哪勘晔?。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;） 。1.3 gsap中的TweenMax动画中文网址：TweenMax中文手册_TweenMax中文网【二 Three光线检测-实现摄像机向鼠标点击位置滑动动画】使用TweenMax动画，控制摄像机的变换速度，达到想要的平和效果；
TweenLite.fromTo('div', 5, {opacity:1}, {opacity:0});//动画目标：div//起始状态：opacity:1//终点状态：opacity:0//补间：5秒完成状态改变1.4主要代码1.4.1设置光线检测
推荐阅读
- three.js 如何用webgl搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课
- 弹壳特攻队第二章节怎么过关
- C++算法之旅、02 从木棒切割问题领悟二分法精髓
- 27岁眼霜排行榜前8强:丸美雪睛眼霜第二，第一名效果明显
- 二 Linux进程间通信
- too同义词|too的同义词
- 二 SpringCloud - Eureka注册中心,feign远程调用，hystrix降级和熔断
- 焊工证个人信息查询入口 查询入口
- 二 京东云开发者| Redis数据结构-List、Hash、Set及Sorted Set的结构实现
- 二、python基本数据类型