AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Three.js获取鼠标点击的三维坐标示例代码

51自学网 http://www.wanshiok.com
three.js,三维坐标系,three.js中的坐标系,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);  }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


three.js,三维坐标系,three.js中的坐标系,three.js,鼠标点击  
上一篇:ECMAScript6 新特性范例大全  下一篇:nodejs开发——express路由与中间件