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获取鼠标点击的三维坐标示例代码就介绍到这了。时间好比一位妙手成春的良医，它能帮助我们医治流血的心灵。时间犹如一个万能的慰藉者，它能开导我们忘记人生的伤痛。时间有如一位循循善诱的智者，他能引导求学者构筑知识的大厦。时间好比一位点屏成蝇的画家，他会帮助勤奋者描绘辉煌的明天。更多相关Three.js获取鼠标点击的三维坐标示例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！