THREEJS中通过Raycaster获取鼠标与模型的交互点

注意：group中存放模型

// 适用于通过json得到的sprite精灵绘制的
//点击射线
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// document.getElementById("container").addEventListener('mousedown', onDocumentMouseDown, false);
document.body.addEventListener('mousemove', onDocumentMouseMove, false);
function onDocumentMouseMove(event){event.preventDefault();mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects([group], true);if (intersects.length > 0) {document.body.style.cursor = "pointer";}else{document.body.style.cursor = "default";}
}
document.body.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {// console.log(event)event.preventDefault();mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;raycaster.setFromCamera(mouse, camera);// 总结一下，这里必须装网格，mesh，装入组是没有效果的// 所以我们将所有的盒子的网格放入对象就可以了// 需要被监听的对象要存储在clickObjects中。// 返回射线选中的对象 第二个参数如果不填 默认是falsevar intersects = raycaster.intersectObjects([group], true);if (intersects.length > 0) {console.log(intersects)console.log([intersects[0].point.x, intersects[0].point.y]);var val = {lng: intersects[0].point.x,lat: intersects[0].point.y}//可以通过点击获取的坐标轴显示标签等}
}

THREEJS中通过Raycaster获取鼠标与模型的交互点相关推荐

VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
目录一.Three.js是什么? 二.VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8. ...
3D视图中获取鼠标所在位置
在3D视图中,经过旋转.缩放.平移之后,任然可以获取鼠标位置对应的真实坐标. 思路:获取OpenGL模型矩阵和投影矩阵, 对鼠标位置信息进行反投影计算. 主要函数: glReadPixels 通过深度 ...
WPF中获取鼠标相对于桌面位置
原文:WPF中获取鼠标相对于桌面位置 var transform = PresentationSource.FromVisual(this).CompositionTarget.TransformFr ...
WPF中获取鼠标相对于屏幕的位置
WPF中获取鼠标相对于屏幕的位置周银辉 WPF编程时,我们经常使用Mouse.GetPosition(IInputElement ...
threejs中坐标系转换和实现物体跟随鼠标移动
坐标系转换下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标: convertTo3DCoordinate(clientX,clientY){var mv = new THREE.V ...
在高德地图中获取鼠标点击的经纬度
本文目录一.注册高德开放平台 (一)创建应用 (二)添加 Key 二.代码实现 1. 引入必要的 CSS 文件与 JS 文件 2. 放置地图容器 3. 核心 JavaScript 代码三.效果图 ...
Fluent UDF 获取组分传输模型中的摩尔分数或分压力
很多朋友在开发Fluent模型中需要用UDF获取组分传输模型中的某气体组分的摩尔分数(或体积分数)或者分压力,但是UDF自带的只有获取质量分数的宏C_YI(c,t),需要自己写额外的代码去转换,有一定 ...
html5 js获取鼠标坐标,js怎么获取鼠标在div中的相对位置
大家在做网页的时候都可能会用到鼠标在div中的相对位置,那么怎么获取鼠标在div中的相对位置呢?下面由学习啦小编教大家怎么获取鼠标在div中的相对位置吧. 如何获取鼠标在div中的相对位置代码如下: ...
在3D世界中的获取鼠标的位置
原理电脑的鼠标是在屏幕的2D坐标上运动的,而我们要获取的是3D世界中的一个三维坐标,在游戏引擎中的实现原理如下: 先获取鼠标在屏幕上的2D坐标. 结合摄像机平面计算出这个点在3D世界中的坐标. 从这 ...

THREEJS中通过Raycaster获取鼠标与模型的交互点

THREEJS中通过Raycaster获取鼠标与模型的交互点相关推荐

最新文章

热门文章