这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差

1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右侧是x轴,往上是y轴,垂直屏幕朝向的是z轴.所以屏幕的左下角是(-1,-1),右上角是(1,1);

2. 屏幕坐标系: webgl会将三维的坐标经过计算,在屏幕里正常显示.

在根据模型或者网格去进行碰撞测试时,我们选择的点一般就是摄像机的位置(相当于人眼的位置,在屏幕上点击的位置,组成一条射线)

初始化,比如:

var mouse = new THREE.Vector2();

var raycaster = new THREE.Raycaster();

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster.setFromCamera(mouse,camera) // 也可以给构造函数传参的形式写

var intersects = raycaster.intersectObjects( scene.children ); // 这里的children,如果你是引入的模型,那么模型加载parse的时候,可以使用一个变量存储你需要检测的对象,这里必须传入

但是当你的浏览器屏幕的缩放比不一致的时候,你就会看到一个很奇葩的现象,你的模型偏了,你的鼠标永远都选不到目标,然后审查一下元素,可能会出现winner.innerHeight,window.innerWidth 远大于或者小于屏幕视口实际尺寸的情况(我当时还以为是无限鼠标的锅,后来才想到可能是屏幕的缩放导致的).这时需要重新去定义射线的初始化.我在开始部分原因的那段代码就可以很好的解决:

functioninitRay(){

// 屏幕坐标转标准设备坐标

let x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) *2-1;// 标准设备横坐标

// 这里的mainCanvas是个dom元素,getBoundingClientRectangle会返回当前元素的视口大小.

let y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) *2+1;// 标准设备纵坐标

let standardVector =newTHREE.Vector3(x, y,1);// 标准设备坐标

// 标准设备坐标转世界坐标

let worldVector = standardVector.unproject(camera);

// 射线投射方向单位向量(worldVector坐标减相机位置坐标)

let ray = worldVector.sub(camera.position).normalize();

// 创建射线投射器对象

letrayCaster =newTHREE.Raycaster(camera.position, ray);

// 返回射线选中的对象 第二个参数如果不填 默认是false

letintersects = rayCaster.intersectObjects(scene.children,true);

if(intersects.length >0) {

// console.log(intersects[0].object);

}

}

three.js raycaster射线碰撞的坑 (当canvas大小 不是屏幕大小是解决拾取物体的办法)的更多相关文章

  1. three.js的组合与合并,raycaster射线无法获取group

    1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...

  2. 用js刷题的一些坑

    leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也 ...

  3. JS连等赋值的坑

    cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...

  4. Unity3D总结:关于射线碰撞

    方法一:Physics.Raycast 光线投射 1.static function Raycast (origin : Vector3, direction : Vector3, distance  ...

  5. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  6. js获取屏幕大小

    1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...

  7. 怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?

    今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name= ...

  8. 小易邀请你玩一个数字游戏,小易给你一系列的整数。你们俩使用这些整数玩游戏。每次小易会任意说一个数字出来,然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字。 例如: 如果{2,1,2,7}是你有的一系列数,小易说的数字是11.你可以得到方案2+2+7 = 11.如果顽皮的小易想坑你,他说的数字是6,那么你没有办法拼凑出和为6 现在小易给你n个数,让你找出无法从n个数中选取部分求和

    小易邀请你玩一个数字游戏,小易给你一系列的整数.你们俩使用这些整数玩游戏.每次小易会任意说一个数字出来,然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字. 例如: 如果{2,1,2 ...

  9. js/css 检测移动设备方向的变化 判断横竖屏幕

    js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...

随机推荐

  1. React/anu实现Touchable

    在RN中有一个叫Touchable 的组件,这里我们重演如何实现它. Touchable存在的意义是屏蔽click的问题.移动端与手机的click 在一些浏览器是有差异,比如说著名的300ms延迟. ...

  2. Android Studio 3.0.1 又见恶心爆的bug。。。xiete

    写了个AIDL的东西,结果一直编译不通过: Error:Execution failed for task ':app:compileDebugAidl'. > java.io.IOExcept ...

  3. 19.JDBC和数据库访问.md

    1.基本功能: Java通过JDBC完成: 2.基本类型,通常用最后一种 3.JDBC简介 Java连接SQL例子: 参考:http://blog.chinaunix.net/uid-20726500 ...

  4. mysql如何出查出最近7天,最近30天,最近n天的记录?

    已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...

  5. ubuntu 下安装和启动SSH 服务

    安装OPENSSH 服务端 sudo apt-get install openssh-server 查看进程是否启动 ps -e | grep ssh 删除密钥文件 rm /etc/ssh/ssh_h ...

  6. hdu1799-循环多少次?-(组合恒等式)

    循环多少次? Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. pyhanlp python 脚本的demo补充

    java demo https://github.com/hankcs/HanLP/tree/master/src/test/java/com/hankcs/demo github python de ...

  8. Map、Set、List 集合 差别 联系

    提到集合之前,先说说数组Array和集合的区别:   (1)数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型)   (2)JAVA集合可以存储和操作数目不固定的一组数据. ( ...

  9. Excel表格如何保护单元格不被修改

    Excel如何保护单元格不被修改  有时使用Excel时希望保护单元格不被修改,这可以叫做单元格的“写保护”即把光标定位在一个不允许输入数据的区域内时,是无论如何也无法在里面输入数据的.下面咱们就一起 ...

  10. ss源码学习--工作流程

    ss的local端和server端的工作流程相似,因此复用了TCPRelay类和TCPRelayHandler类. 两端均是使用TCPRelay类监听连接,并使用TCPRelayHandler类处理请 ...