Three.js获取鼠标点击的三维坐标示例代码
时间：2021-07-26 07:53:50|栏目：JavaScript代码|点击： 次
由于工作需要，但是对于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代码
下一篇：javascript同页面多次调用弹出层具体实例代码
本文地址：http://www.codeinn.net/misctech/161568.html
