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);
}
我理解的就是鼠标点击的时候屏幕收到的是二维坐标，这个二维坐标和相机连线，在视角的方向上延伸，形成一条射线，这条射线会和场景中的物体相交，接收这些相交的所有物体，第一个物体就是离相机最近的，最后一个就是离相机最远的。一般就把第一个相交的物体作为鼠标点击的物体。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了js+css全屏侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释，仍然有很多人问，本文给大家深度解析，需要的朋友可以参考下2017-02-02
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
这篇文章主要介绍了BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面 的相关资料,需要的朋友可以参考下2016-08-08
做JavaScript的时候,发现老是出现错误：“未结束的字符串常量”. 自己找了下应该是传参数的时候,有特殊字符引起的.网上也找了下,也有好多出现这种情况.做下总结,以方便以后查阅.2010-01-01
这篇文章主要介绍了JavaScript偏函数与柯里化,结合实例形式详细分析了JavaScript偏函数与柯里化的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下2019-03-03
也说JavaScript中String类的replace函数
最近读了sharpxiajun的博文《javascript笔记--String类replace函数的一些事》，感觉写的很好，很有帮助。2011-09-09
这篇文章主要介绍了JS闭包与延迟求值,结合简单实例分析了JS针对运算量较大的情况下闭包与延迟求值的实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了ES6基础之默认参数值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了JS求解三元一次方程组值的方法,涉及JS数学运算的相关操作技巧,需要的朋友可以参考下2017-01-01
本文主要介绍了js中new一个对象的过程。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论