时间:2021-05-26
由于工作需要,但是对于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); }我理解的就是鼠标点击的时候屏幕收到的是二维坐标,这个二维坐标和相机连线,在视角的方向上延伸,形成一条射线,这条射线会和场景中的物体相交,接收这些相交的所有物体,第一个物体就是离相机最近的,最后一个就是离相机最远的。一般就把第一个相交的物体作为鼠标点击的物体。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Three.js引擎的优势。4)跨平台。可以在多种操作系统、多种浏览器上使用。5)易用性。Three.js对WebGL规范的众多功能进行了实现,封装了众多三维场
三维场景驱动。三维场景驱动层是整个框架中比较重要的部分,本层使用Three.js引擎库在网页支撑层中创建绘图画布容器进行三维场景的搭建、模型的加载、三维场景的循
Three.js是一个使用JavaScript语言编写的WebGL三维引擎库。它提供了众多的三维绘图方法,可以方便地构建网络三维场景,并且在进行浏览器端显示时可
三维立体扫描仪,我们也可以把它叫做三维扫描仪。三维扫描仪实际上就是用来测量实物表面的三维坐标点集的一种机器。一般来说,测量出来的大量坐标点的集合,我们会把它
模型加载器(ModuleLoader)。Three.js支持obj,dae等多种常见三维模型格式的加载显示。而传统的模型难以压缩,传输过程中会占较多的网络带宽。