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);
  }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• Three.js实现简单3D房间布局
• three.js实现3D模型展示的示例代码
• three.js实现3D影院的原理的代码分析
• Three.js开发实现3D地图的实践过程总结
• 利用three.js画一个3D立体的正方体示例代码
• three.js实现3D视野缩放效果
• three.js中3D视野的缩放实现代码
• Three.js的使用及绘制基础3D图形详解
• Three.js源码阅读笔记(Object3D类)
• Three.JS实现三维场景