,可以通过以下步骤实现:
canvas.addEventListener('mousedown', onMouseDown, false);
这里的canvas
是WebGL的画布元素,onMouseDown
是一个自定义的事件处理函数。
onMouseDown
事件处理函数中,需要获取鼠标点击的屏幕坐标。可以使用event.clientX
和event.clientY
来获取鼠标点击位置相对于浏览器窗口的坐标。var mouseVector = new THREE.Vector3(ndcX, ndcY, 1);
mouseVector.unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, mouseVector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
var intersection = intersects[0];
var intersectionPoint = intersection.point;
console.log('鼠标点击的3D坐标:', intersectionPoint);
}
这里的camera
是Three.js中的相机对象,scene
是场景对象。通过射线投射(raycasting)的方式,可以获取与鼠标点击位置相交的物体,并获取其交点坐标。
总结: 在WebGL中获取鼠标点击的3D坐标,需要监听鼠标点击事件,并将屏幕坐标转换为WebGL场景中的坐标。然后,使用WebGL的API(如射线投射)来获取鼠标点击位置的3D坐标。具体实现方式取决于所使用的WebGL库或框架。
领取专属 10元无门槛券
手把手带您无忧上云