webgl 裁剪空间 投影矩阵 透视除法 Z值反转 鼠标点击位置求射线

webgl 裁剪空间 投影矩阵 透视除法 Z值反转的讲解

右手坐标系Z值转换为深度值的过程理解

透视投影的输出结果一屏幕方向理解,朝向屏幕里为1,屏幕朝外为-1,投影矩阵的裁剪是剔除Z值不在-1到1区间的坐标,

此时的-1 和深度缓冲的0对应,1和深度缓冲的1对应。

此时鼠标点击的位置求一条世界坐标的射线,因为法线在转换中的为题,我们不使用法线,定义两个点,

 

//也就是说此时,最靠近屏幕外侧的点是裁剪空间下的-1, 同理被遮挡的点是因为深度缓冲大,最大值为1,z=1是最靠近屏幕里的值;

let rayStart = new vector.VFVector3(mouseDown.x, mouseDown.y, -1);
let rayEnd = new vector.VFVector3(mouseDown.x, mouseDown.y, 1);

//求相机的逆矩阵 这里使用了两个矩阵

let inverseCamera = cameraProj.leftMulMat4(cameraProj).inverse();

rayStart = inverseMat.leftMulVec3(rayStart);
rayEnd = inverseMat.leftMulVec3(rayEnd);

//鼠标点击的位置射线为
let hitRay = new ray.VFRay(rayOrigin, rayEnd.min(rayStart ).direction());

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
three.js是一款用于创建WebGL渲染的JavaScript库,它可以在浏览器中实现动态的、交互式的三维图形。 要获取鼠标的三维位置,可以遵循以下步骤: 1. 创建一个three.js场景。 2. 创建一个相机,并将其放置在合适的位置和方向,以便你可以从正确的角度观察场景。 3. 创建一个WebGL渲染器,将其连接到你想要显示场景的HTML元素上。 4. 创建一个射线投射器(raycaster)对象,并根据相机和鼠标位置来定义射线。 5. 使用射线投射器来检测与场景中的物体的交互。 6. 如果射线与物体相交,则可以获取交点的坐标,从而得到三维位置。 下面是一个示例代码来实现上述过程: ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体作为示例物体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 创建一个射线投射器 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 监听鼠标事件 function onMouseClick(event) { // 将鼠标位置换为标准化设备坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 通过相机和鼠标位置定义射线 raycaster.setFromCamera(mouse, camera); // 计算射线与物体的相交情况 var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 获取交点的坐标 console.log(intersects[0].point); } } // 将鼠标事件监听绑定到dom元素上 document.addEventListener('click', onMouseClick, false); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在这个示例中,我们创建了一个立方体物体,并通过监听鼠标事件来获取点位置的三维坐标。射线投射器检测到射线与物体的相交情况,如果有交点存在,我们就输出交点的坐标。 希望上述解答对您有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值