Three.js获取鼠标点击的三维坐标示例代码


Posted in Javascript onMarch 24, 2017

由于工作需要,但是对于three.js又是一窍不通,网上的资料又很少,所以上来就让我获取坐标,真是一个头两个大。好歹最后终于实现了。

既然已经是想要获取鼠标点击的三维坐标了,相信你camera对象和scene都已经有了,如果不了解的小伙伴,可以先去看一下这两个对象。这里主要说一下怎么获取到三维坐标,原理性的东西不提。上代码:

function onDocumentMouseDown( event ) {
  event.preventDefault();
  var vector = new THREE.Vector3();//三维坐标对象
  vector.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );
  vector.unproject( camera );
  var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    var selected = intersects[0];//取第一个物体
    console.log("x坐标:"+selected.point.x);
    console.log("y坐标:"+selected.point.y);
    console.log("z坐标:"+selected.point.z);
  }

我理解的就是鼠标点击的时候屏幕收到的是二维坐标,这个二维坐标和相机连线,在视角的方向上延伸,形成一条射线,这条射线会和场景中的物体相交,接收这些相交的所有物体,第一个物体就是离相机最近的,最后一个就是离相机最远的。一般就把第一个相交的物体作为鼠标点击的物体。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
js三种排序算法分享
Aug 16 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
javascript 动态创建表格
Jan 08 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
Node.js和Express简单入门介绍
Mar 24 #Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 #Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 #Javascript
JS实现向iframe中表单传值的方法
Mar 24 #Javascript
JS正则替换去空格的方法
Mar 24 #Javascript
原生js封装自定义滚动条
Mar 24 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP里的单例类写法实例
2015/06/25 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Python中的super用法详解
2015/05/28 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
妇科医生自荐信
2013/11/05 职场文书
开学典礼感言
2014/02/16 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
手机银行营销方案
2014/03/14 职场文书
中学校庆方案
2014/03/17 职场文书
机电一体化专业求职信
2014/07/22 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
python保存图片的四个常用方法
2022/02/28 Python