光线投射Raycaster

Three.js 中文文档链接

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

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();function onMouseMove( event ) {// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;}function render() {// 通过摄像机和鼠标位置更新射线raycaster.setFromCamera( mouse, camera );// 计算物体和射线的焦点var intersects = raycaster.intersectObjects( scene.children );for ( var i = 0; i < intersects.length; i++ ) {intersects[ i ].object.material.color.set( 0xff0000 );}renderer.render( scene, camera );}window.addEventListener( 'mousemove', onMouseMove, false );window.requestAnimationFrame(render);

构造函数

Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) {

origin —— 光线投射的原点向量。
direction —— 向射线提供方向的方向向量,应当被标准化。
near —— 返回的所有结果比near远。near不能为负值,其默认值为0。
far —— 返回的所有结果都比far近。far不能小于near,其默认值为Infinity(正无穷。)

这将创建一个新的raycaster对象。

属性

.far : float

raycaster的远距离因数(投射远点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比near### 属性大。

.linePrecision : float

raycaster与Line(线)物体相交时的精度因数。

.near : float

raycaster的近距离因数(投射近点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比near### 属性小。

.params : Object

具有以下属性的物体:
{
Mesh: {},
Line: {},
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}

.ray : Ray

用于进行光线投射的Ray(射线)。

方法

.set ( origin : Vector3, direction : Vector3 ) : null

origin —— 光线投射的原点向量。
direction —— 为光线提供方向的标准化方向向量。

使用一个新的原点和方向来更新射线。

.setFromCamera ( coords : Vector2, camera : Camera ) : null

coords —— 在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间。
camera —— 射线所来源的摄像机。

使用一个新的原点和方向来更新射线。

.intersectObject ( object : Object3D, recursive : Boolean, optionalTarget : Array ) : Array

object —— 检查与射线相交的物体。
recursive —— 若为true,则同时也会检查所有的后代。否则将只会检查对象本身。默认值为false。
optionalTarget — (可选)设置结果的目标数组。如果不设置这个值,则一个新的Array会被实例化;如果设置了这个值,则在每次调用之前必须清空这个数组(例如:array.length = 0;)。

检测所有在射线与物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个)。
该### 方法返回一个包含有交叉部分的数组:
[ { distance, point, face, faceIndex, object }, … ]

distance —— 射线投射原点和相交部分之间的距离。
point —— 相交部分的点(世界坐标)
face —— 相交的面
faceIndex —— 相交的面的索引
object —— 相交的物体
uv —— 相交部分的点的UV坐标。

当计算这条射线是否和物体相交的时候,Raycaster将传入的对象委托给raycast### 方法。 这将可以让mesh对于光线投射的响应不同于lines和pointclouds。

请注意:对于网格来说,面必须朝向射线的原点,以便其能够被检测到。 用于交互的射线穿过面的背侧时,将不会被检测到。如果需要对物体中面的两侧进行光线投射, 你需要将material中的side### 属性设置为THREE.DoubleSide。

.intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array

objects —— 检测和射线相交的一组物体。
recursive —— 若为true,则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为false。
optionalTarget —— (可选)(可选)设置结果的目标数组。如果不设置这个值,则一个新的Array会被实例化;如果设置了这个值,则在每次调用之前必须清空这个数组(例如:array.length = 0;)。

检测所有在射线与这些物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个),相交部分和.intersectObject所返回的格式是相同的。

光线投射Raycaster相关推荐

  1. Three.js-光线投射(raycaster)

    目录 1.光线投射Raycaster 1.1 构造器 1.2 属性 1.3 方法 2. 示例:点击变换颜色 1.光线投射Raycaster 这个类用于进行raycasting(光线投射). 光线投射用 ...

  2. Threejs实现3d地球记录(3)

    (2).对等距点集进行三角剖分生成Mash 我将三角剖分可以简单理解为以最接近的三点形成三角形,且各线段(三角形的边)皆不相交:这里使用开源库delaunator进行点的三角剖分 // polygon ...

  3. three.js全景搭建 、锚点标注添加、 OrbitControls 轨道方向控制 、 场景切换

    背景: 公司产品预演全景参访 实现: 场景查看 锚点标注 关键点: 二维点击转换三维坐标轴. 锚点绘制.场景切换.数据格式设计 未实现: 标注点添加gif 图片 添加视屏未实践 文档中有 添加视频的材 ...

  4. 视频教程-Three.js(webgl) webpack+es6 geojson 3d地图 项目实战视频教程-JavaScript

    Three.js(webgl) webpack+es6 geojson 3d地图 项目实战视频教程 2008年开始从事C#编程工作,2013年转向Unity游戏开发领域,在谷歌市场及苹果商店陆续 发布 ...

  5. three.js使用光线投射对象Raycaster在屏幕中拾取/选取对象(vue中使用three.js60)

    用鼠标在屏幕中拾取/选取对象 1.demo效果 2.知识要点 2.1 光线投射对象Raycaster 2.1.1 创建光线投射对象 2.1.2获取射线交叉对象 3.实现要点 3.1 添加鼠标点击和悬浮 ...

  6. three.js(6):屏幕点击与鼠标的交互(Raycaster的用法)

    参考:光线投射器(Raycaster).ThreeJS中的点击与交互--Raycaster的用法 该类用来处理光线投射.光线投射主要用于物体选择.碰撞检测以及图像成像等方面. 坐标系概念 我们的手机屏 ...

  7. Three光线投射实例

    基础环境搭建: 新建一个二十面体,detail参数要>1: detail - 默认值为0.将这个值设为一个大于0的数将会为它增加一些顶点,使其不再是一个二十面体.当这个值大于1的时候,实际上它将 ...

  8. 58 Three.js 通过THREE.Raycaster给模型绑定点击事件

    简介 由于浏览器是一个2d视口,而在里面显示three.js的内容是3d场景,所以,现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标.好在three.js已经有了解决 ...

  9. 体绘制(Volume Rendering)概述之4:光线投射算法(Ray Casting)实现流程和代码(基于CPU的实现)...

    转自:http://blog.csdn.net/liu_lin_xm/article/details/4850630 摘抄"GPU Programming And Cg Language P ...

最新文章

  1. 船长带你看书——《selenium2 python 自动化测试实战》(2)浏览器操作
  2. Keras Theano 输出中间层结果
  3. How can I exclude directories from grep -R?
  4. 前端学习(1405):多人管理25node.js—安装bcrypt出现错误的解决办法
  5. Net中的AOP系列之《方法执行前后——边界切面》
  6. php 循环 post,如何在php中使用jQuery递归调用POST循环请求
  7. aspnet_regsql.exe 工具参数解析
  8. 天禾云盘【Fly.Box】2.4.0发布,含Android、IOS客户端
  9. Android Studio NDK开发
  10. 会话(状态)管理Cookie与Session(一)
  11. 空指针:Attempt to invoke virtual method java.util.List “XXX“ on a null object reference
  12. 怎样了解存在---辩证唯物主义认识论
  13. android studio连接本地SqlServer数据库报网络错误
  14. 织梦dedecms TAG标签调用汇总(史上最全)
  15. ie input兼容 vue_IE浏览器兼容问题(基于vue)
  16. thinkphp 5.1 swoole扩展websocket使用教程
  17. 表达式转换(中缀转后缀)
  18. GNSS观测值质量分析必备基础知识
  19. 重装Windows系统 (以联想Y700重装Win10专业版为例)
  20. javascript弹出窗口代码大全(转)

热门文章

  1. 蘑菇游戏_让蘑菇动起来
  2. 京杭论坛-北师大陈丽老师讲座笔记
  3. RTX 4090和RX 7900XT哪个好 RTX 4090和RX 7900XT差距
  4. Android.拍照,保存图片,图片大小是0B...
  5. 根据官网例子一步步实现vueSSR(详细)
  6. ChatGPT 出现报错 ERROR: Too many requests in 1 hour. Try again later.我的解决方法,2023 1月8日
  7. 词Ci - 辅助填词、宋词欣赏
  8. python必备源代码-资源推荐|347个Python开发经典资源推荐(42类)
  9. java名片识别源码_名片识别
  10. 德国马牌轮胎助力中国国家男子足球队征战亚洲杯