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

 更新时间:2017年03月24日 17:18:55   作者:关注来哈尔滨请你吃锅包肉  
本篇文章主要介绍了Three.js获取鼠标点击的三维坐标示例代码。具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

由于工作需要,但是对于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 cookie操作类的实现代码小结附使用方法

    javascript cookie操作类的实现代码小结附使用方法

    javascript cookie操作类的实现代码小结附使用方法,对于cookies操作不是很熟悉的朋友可以参考下。
    2010-06-06
  • js实现的tab标签切换效果代码分享

    js实现的tab标签切换效果代码分享

    这篇文章主要介绍了js实现的tab标签切换效果,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • JavaScript定时器使用方法详解

    JavaScript定时器使用方法详解

    这篇文章主要介绍了JavaScript定时器的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • selenium 反爬虫之跳过淘宝滑块验证功能的实现代码

    selenium 反爬虫之跳过淘宝滑块验证功能的实现代码

    这篇文章主要介绍了selenium 反爬虫之跳过淘宝滑块验证功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 微信域名检测接口调用演示步骤(含PHP、Python)

    微信域名检测接口调用演示步骤(含PHP、Python)

    这篇文章主要介绍了微信域名检测接口调用演示步骤(含PHP、Python),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • 微信小程序自定义弹窗wcPop插件

    微信小程序自定义弹窗wcPop插件

    平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改。下面通过本文给大家带来了微信小程序自定义弹窗wcPop插件,感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • javascript 主动派发事件总结

    javascript 主动派发事件总结

    有时需要模仿用户的一些动作(鼠标/键盘操作),最常见的莫过于鼠标点击。一一列举
    2011-08-08
  • javascript中数组和字符串的方法对比

    javascript中数组和字符串的方法对比

    下面小编就为大家带来一篇javascript中数组和字符串的方法对比。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js中哈希表的几种用法总结

    js中哈希表的几种用法总结

    本篇文章只要是对js中哈希表的几种用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论