Three.js获取鼠标点击的三维坐标示例代码
由于工作需要，但是对于three.js又是一窍不通，网上的资料又很少，所以上来就让我获取坐标，真是一个头两个大。好歹最后终于实现了。
既然已经是想要获取鼠标点击的三维坐标了，相信你camera对象和scene都已经有了，如果不了解的小伙伴，可以先去看一下这两个对象。这里主要说一下怎么获取到三维坐标，原理性的东西不提。上代码：
functiononDocumentMouseDown(event){
event.preventDefault();
varvector=newTHREE.Vector3();//三维坐标对象
vector.set(
(event.clientX/window.innerWidth)*2-1,
-(event.clientY/window.innerHeight)*2+1,
0.5);
vector.unproject(camera);
varraycaster=newTHREE.Raycaster(camera.position,vector.sub(camera.position).normalize());
varintersects=raycaster.intersectObjects(scene.children);
if(intersects.length>0){
varselected=intersects[0];//取第一个物体
console.log("x坐标:"+selected.point.x);
console.log("y坐标:"+selected.point.y);
console.log("z坐标:"+selected.point.z);
}
我理解的就是鼠标点击的时候屏幕收到的是二维坐标，这个二维坐标和相机连线，在视角的方向上延伸，形成一条射线，这条射线会和场景中的物体相交，接收这些相交的所有物体，第一个物体就是离相机最近的，最后一个就是离相机最远的。一般就把第一个相交的物体作为鼠标点击的物体。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。