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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
详解ES6中class的实现原理
Oct 03 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中实现简单的ACL 完结篇
2011/09/07 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
React组件生命周期详解
2017/07/03 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
python实现彩票系统
2020/06/28 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
《散步》教学反思
2014/03/02 职场文书
公关活动策划方案
2014/05/25 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
关于教师节的广播稿
2015/08/19 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android