一、在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象?

二、射线法确定步骤及代码
   //Three.js提供一个射线类Raycaster来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。
//从某个方向发射一条射线,穿过鼠标所在的点,则这条射线经过的对象就是鼠标点击的对象
//射线法获取鼠标选择的元素,然后修元素的材质。
var raycaster = new THREE.Raycaster(); //mouse,鼠标所对应的二维向量,监听鼠标移动事件
//mouse.x是指 鼠标的x到屏幕y轴的距离与屏幕宽的一半的比值 绝对值不超过1
//mouse.y是指 鼠标的y到屏幕x轴的距离与屏幕宽的一半的比值 绝对值不超过1
var mouse = new THREE.Vector2(); function getIntersects( point, objects ) {
//将html坐标系转化为webgl坐标系,并确定鼠标点击位置
mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
//从相机发射一条射线,经过鼠标点击位置
raycaster.setFromCamera( mouse, camera );
//camera 到 mouse 之间穿过的物体
//确定所点击位置上的物体数量
return raycaster.intersectObjects( objects );
}
  var intersects = getIntersects( onUpPosition, objects );
  // 拾取物体数大于0时
  if ( intersects.length > 0 ) {
    ……
    }

很多人不太理解鼠标点击位置的坐标转换过程

mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );

这行代码等价于:

mouse.x = (e.clientX/window.innerWidth)*2 -1;
mouse.y = -(e.clientY/window.innerHeight)*2 + 1;

本文中3D空间默认整个屏幕,即空间长宽为

window.innerWidth
window.innerHeight

当页面中的3D空间只是一部分时,则空间长宽可能为

  width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth;

  height = div.style.height || div.clientHeight || div.offsetHeight || div.scrollHeight;

WebGL和ThreeJs学习6--射线法确定3D空间中所选物体的更多相关文章

  1. 3D空间中射线与轴向包围盒AABB的交叉检测算法【转】

    引言 在上一节中,我讲述了如何实现射线与三角形的交叉检测算法.但是,我们应该知道,在游戏开发中,一个模型有很多的三角形构成,如果要对所有的物体,所有的三角形进行这种检测,就算现在的计算机运算能力,也是 ...

  2. 3D空间中射线与轴向包围盒AABB的交叉检测算法 【转】

    http://blog.csdn.net/i_dovelemon/article/details/38342739 引言 在上一节中,我讲述了如何实现射线与三角形的交叉检测算法. 但是,我们应该知道, ...

  3. WebGL和ThreeJs学习5--ThreeJS基本功能控件

      Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js        http://www.hewebgl.com ...

  4. 3D空间中射线与三角形的交叉检測算法

    引言 射线Ray,在3D图形学中有非常多重要的应用.比方,pick操作就是使用射线Ray来实现的,还有诸如子弹射线的碰撞检測等等都能够使用射线Ray来完毕. 所以,在本次博客中,将会简单的像大家介绍下 ...

  5. 3D空间中射线与三角形的交叉检测算法【转】

    引言 射线Ray,在3D图形学中有很多重要的应用.比如,pick操作就是使用射线Ray来实现的,还有诸如子弹射线的碰撞检测等等都可以使用射线Ray来完成.所以,在本次博客中,将会简单的像大家介绍下,如 ...

  6. 射线法(1190 - Sleepwalking )

    题目:http://lightoj.com/volume_showproblem.php?problem=1190 参考链接:https://blog.csdn.net/gkingzheng/arti ...

  7. WebGL模型拾取——射线法

    今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转, ...

  8. WebGL模型拾取——射线法二

    这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方.首先我们来看下图. 我来解释一下上图中的originTr ...

  9. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

随机推荐

  1. webservice------UDDI SOAP WSDL 之间的关系

    [  真的是服了一些博客.....啰里啰唆的将一堆==   根本不知道讲的是什么 ... 在描述一个定义之前  (不如先通俗的讲它是干什么的)] SOAP(Simple Object Access P ...

  2. P1373 小a和uim之大逃离(动态规划)

    题目链接:传送门 题目大意: 一个N行M列的矩阵,从任意点开始往右或者往下走,每走一格获得所到达的格子的分数. 要求总步数必须为偶数.问有多少种走法,使得奇数步得到的总分和偶数步得到的总分对K+1取模 ...

  3. 网页筛选Automatic Input Enrichment - FLAIR

    http://www.cs.rochester.edu/~tetreaul/Presentations-and-Posters/0504.pdf 介绍了一个在线平台https://eflnotes.w ...

  4. D:\yyy\UNetSegmentation_code_20180301\data\train

    key1 numpy.save("filename.npy",a) 利用这种方法,保存文件的后缀名字一定会被置为.npy,这种格式最好只用 numpy.load("fil ...

  5. HashSet remove()

    HashSet继承自Set接口的方法:boolean remove(Object o); case1: public class ShortTest { public static void main ...

  6. 《DSP using MATLAB》Problem 5.4

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  7. Arrays类的使用

    定义 : 此类包含用来操作数组(比如排序和搜索)的各种方法.使用需要导入import java.util.Arrays;包 1.sort方法(对数组进行升序排列) public class Array ...

  8. MySQL Disk--SSD和HDD的性能

    ========================================================= 机械硬盘的性能 7200转/分的STAT硬盘平均物理寻道时间是9ms 10000转/ ...

  9. Unity API 解析 (陈泉宏著)

    1 Application类 2 Camera类 3 GameObject类 4 HideFlags类 5 Mathf类 6 Matrix4x4类 7 Object类 8 Quaternion类 9 ...

  10. IA64与x64的区别

    说到IA-64与x86-64可能很多人会比较陌生.不知道你在下载系统的时候有没有注意过,有的地方标注了x86/64/ia-64全版本等字样.那x86/x64/ia-64都是什么东西的版本呢?答案就是C ...