网站导航
> 技术文档 > 学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

网友: 技术文档 2025-08-08 13:53:36

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.PerspectiveCamera透视相机
    • 1.2 ☘️THREE.OrthographicCamera正交相机
  • 二、🍀PerspectiveCamera透视相机和OrthographicCamera正交相机对比
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中PerspectiveCamera透视相机和OrthographicCamera正交相机进行对比，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.PerspectiveCamera透视相机

THREE.PerspectiveCamera这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
构造函数：
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
这些参数一起定义了摄像机的viewing frustum（视锥体）。
属性：
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比
方法：
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

1.2 ☘️THREE.OrthographicCamera正交相机

THREE.OrthographicCamera正交相机在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
这对于渲染2D场景或者UI元素是非常有用的。
构造函数：
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。
这些参数一起定义了摄像机的viewing frustum（视锥体）。
属性：
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比
方法：
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

二、🍀PerspectiveCamera透视相机和OrthographicCamera正交相机对比

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene。
  • 3、初始化PerspectiveCamera透视相机camera，定义相机位置 camera.position。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源。创建THREE.DirectionalLight平行光源directionalLight，设置平行光源位置，scene场景加入平行光源。
  • 5、加载几何模型：创建THREE.PlaneGeometry平面几何体planeGeometry，创建THREE.MeshLambertMaterial漫反射材质planeMaterial，传入参数planeGeometry和planeMaterial创建平面几何体网格对象plane，设置plane投影，设置plane的位置和旋转角度，场景scene中加入plane。在plane上循环创建立方体网格对象cube，将plane铺满，具体代码参考代码样例。
  • 6、加入gui控制，实现PerspectiveCamera透视相机和OrthographicCamera正交相机的切换，进行效果对比。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head> <title>PerspectiveCamera透视相机和OrthographicCamera正交相机对比</title> <script type=\"text/javascript\" src=\"../libs/three.js\"></script> <script type=\"text/javascript\" src=\"../libs/stats.js\"></script> <script type=\"text/javascript\" src=\"../libs/dat.gui.js\"></script> <style> body {  /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style
网络标签：

相关问题