ThreeJS教程:屏幕坐标转标准设备坐标

本文详细介绍了在ThreeJS中如何将屏幕坐标转换为标准设备坐标,涉及HTML元素的鼠标事件坐标、标准设备坐标系的概念及转换方法。通过计算将像素坐标归一化至[-1, 1]区间,适应ThreeJS的坐标系统。" 125186374,10327945,树莓派系统刷机与远程登录配置全攻略,"['Linux', 'ARM', '系统编程']
摘要由CSDN通过智能技术生成

推荐:将 NSDT场景编辑器 加入你的3D工具链
3D工具集: NSDT简石数字孪生

屏幕坐标转标准设备坐标

在讲解下节课鼠标点击选中模型之前,先给大家讲解下坐标系的问题。

获取鼠标事件坐标

先来了解一些,普通的web前端相关知识。

鼠标单击HTML元素,通过函数的参数鼠标事件对象event,可以获取一些坐标信息。课件源码中是以threejs的canvas画布为例给大家演示。

addEventListener('click',function(event){
    // event对象有很多鼠标事件相关信息
    console.log('event',event);
})
Three.js中,屏幕坐标(Screen Coordinates)通常指的是用户在显示器上看到的像素坐标,而世界坐标(World Coordinates)则是虚拟3D空间中的位置和方向。要将屏幕坐标换为世界坐标,你需要经过以下几个步骤: 1. **视角(View)矩阵**:这是由摄像机(Camera)的位置、旋和缩放设置的,用于投影从3D空间到屏幕的变换。 2. **投影(Projection)矩阵**:基于相机的透视或正交投影,将3D坐标压缩到2D平面上。 3. **模型视图(ModelView)矩阵**:如果物体有位姿变化(如旋和平移),则乘以该物体的模型矩阵,将局部坐标换为全局坐标系。 4. **归一化设备坐标(Normalized Device Coordinates, NDC)**:将投影后的坐标除以w分量(因为透视投影会有一个w分量),将其映射到-1到1的范围内。 5. **反向渲染过程**:从NDC坐标开始,通常需要经过以下操作:反向透视除法(inverting the perspective divide)、翻y轴(y轴是倒置的,因为屏幕是从上到下的),然后加上视口偏移(viewport offset)和比例因子(scale factor),得到最终的世界坐标。 这里没有提供具体的代码,但你可以使用`THREE.Vector3`类来进行这些计算。例如,假设你有一个屏幕上的点击坐标`mouse.x` 和 `mouse.y`,你可以这样做: ```javascript // 假设已经设置了camera、projectionMatrix和modelViewMatrix const raycaster = new THREE.Raycaster(); raycaster.setFromCamera({x: mouse.x, y: mouse.y}, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { const hitObject = intersects.object; const worldPosition = new THREE.Vector3(); worldPosition.setFromMatrixPosition(hitObject.matrixWorld); console.log(worldPosition); // 输出的就是物体在世界坐标系中的位置 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值