当前位置：首页 > backend >正文

6.Three.js 中的 OrthographicCamera 详解（含示例）

backend 2025/7/4 7:08:15

效果图

👨‍💻 作者：彭麒
📧 Email：1062470959@qq.com
🧠 适用人群：Three.js 初学者、正在搞懂各种相机的小伙伴
🧰 使用技术：Three.js + JavaScript（推荐结合 Vue 也能使用）

🎯 1. 什么是 OrthographicCamera？

OrthographicCamera 又称为正交相机，它和常用的 PerspectiveCamera（透视相机）不同的地方在于：

✅ 不会因为远近不同而变大变小！
✅ 是平行投影，所有物体看起来一样大
✅ 更适合二维场景、建筑平面图、CAD、UI 展示等应用场景。

你可以理解为 ——
🪟 PerspectiveCamera 就像我们的真实眼睛，而
📏 OrthographicCamera 更像画图工具里的俯视图或工程图！

🤔 2. PerspectiveCamera vs OrthographicCamera

比较项	PerspectiveCamera（透视）	OrthographicCamera（正交）
📷 模拟真实人眼	✅ 是	❌ 不是
🔍 远近会缩放	✅ 会	❌ 不会
🧭 适合场景	游戏、三维展示	UI、CAD、建筑、地图等
📐 数学计算复杂度	稍高	较低
📏 比例感	真实感强但失真	精确但平面化

🧪 3. OrthographicCamera 的参数详解

new THREE.OrthographicCamera(left, right, top, bottom, near, far)

参数名	含义
`left`	相机视锥体左边界
`right`	相机视锥体右边界
`top`	相机视锥体上边界
`bottom`	相机视锥体下边界
`near`	最近的可视距离（不显示更近的物体）
`far`	最远的可视距离（不显示更远的物体）

📌 提示：通常我们会结合 window.innerWidth / window.innerHeight 来动态计算上下左右。

💻 4. 示例代码：一个正交相机的小球场景 ⚽

<template><div ref="containerRef" class="w-full h-full" />
</template><script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as THREE from 'three'const containerRef = ref(null)let scene, camera, renderer, sphereonMounted(() => {initScene()animate()
})onBeforeUnmount(() => {renderer?.dispose()
})function initScene() {const container = containerRef.valueconst width = container.clientWidthconst height = container.clientHeightconst aspect = width / height// 创建场景scene = new THREE.Scene()// 创建正交相机const d = 5camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 0.1, 1000)camera.position.set(10, 10, 10)camera.lookAt(scene.position)// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(width, height)container.appendChild(renderer.domElement)// 添加地面网格const grid = new THREE.GridHelper(10, 10)scene.add(grid)// 添加一个红色球体const geometry = new THREE.SphereGeometry(1, 32, 32)const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })sphere = new THREE.Mesh(geometry, material)sphere.position.set(0, 1, 0)scene.add(sphere)// 响应式窗口自适应window.addEventListener('resize', onWindowResize)
}function animate() {requestAnimationFrame(animate)if (sphere) sphere.rotation.y += 0.01renderer?.render(scene, camera)
}function onWindowResize() {if (!containerRef.value) returnconst width = containerRef.value.clientWidthconst height = containerRef.value.clientHeightconst aspect = width / heightconst d = 5camera.left = -d * aspectcamera.right = d * aspectcamera.top = dcamera.bottom = -dcamera.updateProjectionMatrix()renderer.setSize(width, height)
}
</script><style scoped>
div {width: 100%;height: 100vh;background-color: #000;
}
</style>

📌 可以看到小球无论转多少圈，大小始终一致，这就是正交相机的魔力！