ThreeJS-3D教学十一:屏幕坐标和世界坐标转换

ThreeJS-3D教学十一:屏幕坐标和世界坐标转换_第1张图片




  
  Title
  


直接复制上面的代码,将three资源路径修改后,启动即可看到效果
上面是代码实现,以下我们看下一些理论知识点:

坐标系之间的转换关系大致为:

    局部坐标 -> 世界坐标 -> 观察空间坐标 -> 裁剪空间坐标 -> 屏幕空间坐标

    我们将 观察空间坐标系 和 裁剪空间坐标系 之间的转换统一处理,最终得到 标准设备坐标系     

因此坐标转换过程就变成了:

    局部坐标 -> 世界坐标 -> 标准设备坐标 -> 屏幕空间坐标

原本世界坐标转换到观察空间坐标需要乘上视图矩阵 CameraMatrixWorldInverse(ViewMatrix)
随后,观察空间坐标转换到裁剪空间坐标需要乘上相机投影矩阵:ProjectMatrix
在 ThreeJS 中有一个方法 Vector3.project(camera) 综合了这两步:

// 这是之前的版本
project( camera ) {
    return this.applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );
}

最新的是
ThreeJS-3D教学十一:屏幕坐标和世界坐标转换_第2张图片

你可能感兴趣的:(three,3d,javascript)