three.js raycaster射线碰撞的坑 (当canvas大小 不是屏幕大小是解决拾取物体的办法)
这里只是记录一下坑,方便查阅,内容主要援引自: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大小 不是屏幕大小是解决拾取物体的办法)的更多相关文章
- three.js的组合与合并,raycaster射线无法获取group
1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...
- 用js刷题的一些坑
leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也 ...
- JS连等赋值的坑
cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...
- Unity3D总结:关于射线碰撞
方法一:Physics.Raycast 光线投射 1.static function Raycast (origin : Vector3, direction : Vector3, distance ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
- js获取屏幕大小
1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...
- 怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?
今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name= ...
- 小易邀请你玩一个数字游戏,小易给你一系列的整数。你们俩使用这些整数玩游戏。每次小易会任意说一个数字出来,然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字。 例如: 如果{2,1,2,7}是你有的一系列数,小易说的数字是11.你可以得到方案2+2+7 = 11.如果顽皮的小易想坑你,他说的数字是6,那么你没有办法拼凑出和为6 现在小易给你n个数,让你找出无法从n个数中选取部分求和
小易邀请你玩一个数字游戏,小易给你一系列的整数.你们俩使用这些整数玩游戏.每次小易会任意说一个数字出来,然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字. 例如: 如果{2,1,2 ...
- js/css 检测移动设备方向的变化 判断横竖屏幕
js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...
随机推荐
- 【376】COMP 9021 相关笔记(二)
Note_01 zip() itertools.zip_longest() %time Note_02 for 循环单行输出 list 技巧 迭代器 生成器 map() zip() from path ...
- LeetCode OJ 80. Remove Duplicates from Sorted Array II
题目 Follow up for "Remove Duplicates": What if duplicates are allowed at most twice? For ex ...
- Android Monkey: “No activities found to run, monkey aborted”错误原因
用monkey测试app时,输入命令adb shell monkey -p com.example.test -v -500 发现报错, 错误输入: :Monkey: seed=13 count=5 ...
- 吴裕雄 python 爬虫(1)
from urllib.parse import urlparse url = 'http://www.pm25x.com/city/beijing.htm' o = urlparse(url) pr ...
- Mysql字段类型与合理选择
字段类型 数值 MySQL 的数值数据类型可以大致划分为两个类别,一个是整数,另一个是浮点数或小数.许多不同的子类型对这些类别中的每一个都是可用的,每个子类型支持不同大小的数据,并且 MySQL 允许 ...
- MATLAB 移动复制文件
copyfile('source','destination'):%复制文件 delete('fileName');%删除文件 movefile('source','destination');%移动 ...
- Error:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
https://www.jianshu.com/p/fd3d49c7f1f8 通过Android Studio 的Sdk Manager安装NDK,安装完之后编译失败,报错信息如下: Error:No ...
- JVM 图解--1.6,1.7,1.8
- CSS同时选择器
[CSS同时选择器] 同一个div拥有多个class时,我们可以作多个class作为组合来选择对象.方法就是将多个.className直接连接在一起(中间不能有空格). <p class=&qu ...
- Java volatile关键字的用法
volatile不能解决同步问题 如果想要理解volatile关键字的作用不得不先了解Java内存模型 摘抄一下来自百度百科的话 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把 ...