个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 待整理
  • 相机
  • 核心
  • 几何体
  • 辅助对象
  • 灯光
  • 材质
  • 数学库
  • 物体
  • 控制
  • 常用方法
  • 三方库
  • 加载器
  • 纹理贴图
  • PBR
  • 相关网站
  • 场景
  • 全景投影方式
    • 圆柱投影
    • 立方体投影
    • 参考
  • HDR
  • 渲染器
  • Geometry和BufferGeometry区别
  • WebGL
  • UV介绍
  • 数学知识
  • 着色器案例
  • blender
  • 后期处理
  • 缓冲区
  • 后期处理与分层渲染
  • 叠加渲染
  • Threejs
NeverStop1024
2022-09-21
目录

全景投影方式

全景投影,最终都是投影在球体上。
主流投影方案有圆柱投影、立方体投影、正八面投影

# 圆柱投影

圆柱投影中我们用的最多的是等距圆柱投影。
通常标准的全景图是一张2:1的图像,其背后的实质就是等距圆柱投影。等距圆柱投影是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式,投影完之后再将它展开就是一张2:1的长方形的图像。比较常见的就是应用在地图上的投影。
jZ4Uz2_FwEHhQ 而在对全景图进行展示之前就需要得到一张这样的图像,手机拍摄或其他制作方式,得到这样一张全景图。 然后使用threejs提供的一系列方法去贴图就可以了。 a4gUbt_f2pmHS

# 立方体投影

R3OsCJ_6TQg8I
立方体贴图,是由这样六张图片组成一个立方体,也是通过映射的方式,贴到球上。threejs中CubeTexture (opens new window) 就是应用了此类投影方式。 有了贴图,就可以应用到几何体或环境中了。

# 参考

  • 谈谈全景视频投影方式 (opens new window)
  • Web全景图的原理及实现 (opens new window)
编辑 (opens new window)
上次更新: 2022/09/21
场景
HDR

← 场景 HDR→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式