跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端算法

正交投影 (Orthographic Projection) 详解

正交投影是一种将三维物体投影到二维平面的方法,特点是平行线保持平行且物体大小不随距离变化。与透视投影不同,它没有消失点,适用于技术绘图和工程蓝图。核心是通过正交投影矩阵将 3D 坐标映射到标准化设备坐标系。在 Three.js 中可通过 OrthographicCamera 实现。该投影广泛应用于建筑、3D 建模及特定游戏场景,能准确表示尺寸形状,便于精确测量。

菩提发布于 2025/2/7更新于 2026/6/1122 浏览
正交投影 (Orthographic Projection) 详解

正交投影 (Orthographic Projection) 详解

正交投影是一种将三维空间中的物体投影到二维平面上的方法,它在计算机图形学、建筑设计、工程绘图等领域中广泛应用。与透视投影不同,正交投影不会随着距离的变化而改变物体的大小,因此所有平行线在投影后仍然保持平行。这使得正交投影特别适合用于技术图纸、蓝图和 3D 建模工具中。

1. 正交投影的特点

平行线保持平行:在正交投影中,所有平行于投影平面的线在投影后仍然保持平行。这意味着物体的形状和比例不会因为视角或距离的变化而失真。

物体大小不变:无论物体离投影平面有多远,它的投影大小都保持不变。这一点与透视投影形成鲜明对比,在透视投影中,远处的物体看起来更小。

没有消失点:由于正交投影不模拟人眼的视锥效果,因此不存在'消失点'(即所有平行线在无穷远处相交的点)。

适用于技术绘图:正交投影广泛应用于建筑、机械设计等领域,因为它能够准确地表示物体的尺寸和形状,便于工程师和技术人员进行精确的测量和设计。

2. 正交投影矩阵

在计算机图形学中,正交投影通常通过一个正交投影矩阵来实现。这个矩阵将 3D 坐标转换为 2D 坐标,同时保留物体的相对位置和比例。正交投影矩阵的公式如下:

[ 2/(r-l)   0         0         -(r+l)/(r-l) ]
[ 0         2/(t-b)   0         -(t+b)/(t-b) ]
[ 0         0         -2/(f-n)   -(f+n)/(f-n) ]
[ 0         0         0         1            ]

其中:

  • l (left) 和 r (right) 是投影平面的左右边界。
  • b (bottom) 和 t (top) 是投影平面的上下边界。
  • n (near) 和 f (far) 是投影平面的前后边界。

这个矩阵的作用是将 3D 坐标系中的点 (x, y, z) 映射到标准化设备坐标系(NDC,Normalized Device Coordinates)中的点 (x', y', z'),范围为 [-1, 1]。

3. 正交投影 vs 透视投影

特性正交投影透视投影
平行线保持平行汇聚于消失点
物体大小不随距离变化随距离变小
适用场景技术绘图、建筑蓝图、3D 建模工具游戏、电影、虚拟现实等需要真实感的场景
视觉效果平面化、无深度感有深度感,模拟人眼的自然视觉
矩阵正交投影矩阵透视投影矩阵

4. 在 Three.js 中使用正交投影

在 Three.js 中,你可以通过 THREE.OrthographicCamera 来创建一个正交摄像机,并设置其投影矩阵。以下是一个简单的示例,展示如何在 Three.js 中使用正交投影:

// 引入 three.js 库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建正交摄像机
const camera = new THREE.OrthographicCamera(
  window.innerWidth / -2,  // left
  window.innerWidth / 2,   // right
  window.innerHeight / 2,  // top
  window.innerHeight / -2, // bottom
  1,                       // near
  1000                     // far
);

// 设置摄像机位置
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

// 处理窗口大小变化
window.addEventListener('resize', () => {
  camera.left = window.innerWidth / -2;
  camera.right = window.innerWidth / 2;
  camera.top = window.innerHeight / 2;
  camera.bottom = window.innerHeight / -2;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
});

5. 正交投影的应用场景

建筑和工程绘图:正交投影广泛应用于建筑设计、机械工程等领域,用于生成精确的技术图纸和蓝图。常见的正交视图包括前视图、侧视图和顶视图。

3D 建模工具:许多 3D 建模软件(如 Blender、Maya、3ds Max)提供了正交视图模式,帮助用户在建模过程中保持物体的比例和对齐。

游戏开发:在某些类型的游戏(如横版卷轴游戏、等距视角游戏)中,正交投影可以提供一种更简洁、更具表现力的视觉效果,避免了透视投影带来的复杂性。

虚拟现实和增强现实:在某些 VR/AR 应用中,正交投影可以用于创建特定的视觉效果,例如 UI 元素或固定视角的场景。

6. 总结

正交投影是一种重要的投影方式,尤其适用于需要保持物体比例和形状的技术绘图和 3D 建模场景。与透视投影相比,正交投影不会随着距离的变化而改变物体的大小,因此更适合用于精确的测量和设计。在 Three.js 中,你可以通过 THREE.OrthographicCamera 轻松实现正交投影,并根据需要调整摄像机的参数以获得理想的视觉效果。

目录

  1. 正交投影 (Orthographic Projection) 详解
  2. 1. 正交投影的特点
  3. 2. 正交投影矩阵
  4. 3. 正交投影 vs 透视投影
  5. 4. 在 Three.js 中使用正交投影
  6. 5. 正交投影的应用场景
  7. 6. 总结
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • LangChain 大模型对话记忆模块实战与 Web 应用构建
  • 学生与教育工作者免费获取 GitHub Copilot 教育认证指南
  • Python 与 Java 语法差异对照指南
  • C++ 哈希表原理与 STL 底层实现解析
  • 循环神经网络(RNN)与序列数据处理实战
  • 基于 SpringBoot 和 EMQX 的物联网设备双向通讯方案
  • Tabular Editor 2.x 使用指南:Power BI 模型高效管理工具
  • ASP.NET Core Web API 控制器及方法注解详解
  • 8 个实用的 Python 自动化办公脚本示例
  • Spring Boot 集成 MyBatis 实战详解(一)
  • Java 响应式编程:Flux 与 SseEmitter 深度解析
  • 亚马逊户外帐篷卖家真实吐槽:以前一张主图要等7天、烧3000块,现在用 Megick 5分钟出4K大片,月销量直接翻了2.8倍
  • MySQL 用户管理与权限配置
  • Spring Boot + Kotlin + Gradle 构建现代化后端应用
  • Spring Data JPA 原理与实战:Repository 接口机制详解
  • Visual C++ Redistributable 安装失败修复指南
  • Flutter 三方库 ml_algo 在鸿蒙系统下的端侧计算适配与重构指南
  • Stable Diffusion:AI 图像生成技术原理与应用
  • C++备忘录模式:优雅实现对象状态保存与恢复
  • Llama-2-7b 昇腾 NPU 测评总结:核心性能数据与硬件选型参考

相关免费在线工具

  • 加密/解密文本

    使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online

  • Gemini 图片去水印

    基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online