在Three.js中，选择合适的相机类型对于创建逼真或特定的视觉效果至关重要。OrthographicCamera，即正投影相机，提供了一种与透视相机截然不同的视图效果。以下是关于正投影相机的详细教程和示例代码。
正投影相机：提供独特的视觉效果
在Three.js的世界中，相机是我们观察场景的窗口。除了常见的透视投影相机（PerspectiveCamera），正投影相机（OrthographicCamera）也扮演着重要角色。它为我们提供了一种不同的视角，尤其适合展示二维视图或需要均匀缩放的场景。
正投影相机简介
与透视投影相机不同，正投影相机不会模拟人眼的视觉效果。它提供了一种平行的视图，物体的大小不会随着距离的变化而变化。
正投影相机的构造
正投影相机的构造函数接受六个参数，定义了相机的可视空间：
left：渲染空间的左边界right：渲染空间的右边界top：渲染空间的上边界bottom：渲染空间的下边界near：开始渲染的距离far：截止渲染的距离
示例代码：创建正投影相机
javascript
const width = window.innerWidth; // canvas画布宽度
const height = window.innerHeight; // canvas画布高度
const k = width / height; // canvas画布宽高比
const s = 600; // 控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);相机位置和观察目标
相机的位置和观察目标对于确定场景的视图至关重要。
示例代码：设置相机位置和观察目标
javascript
camera.position.set(0, 2000, 0); // 相机放在了y轴上
camera.lookAt(0, 0, 0); // 指向坐标原点调整相机的渲染范围
通过调整left、right、top、bottom参数，可以改变相机的渲染范围，确保所有需要的对象都在视图中。
示例代码：调整渲染范围
javascript
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);正投影相机与透视投影相机的区别
正投影相机和透视投影相机的主要区别在于它们对场景的渲染方式。透视投影相机模拟了人眼的视觉效果，物体随着距离的增加而逐渐变小。而正投影相机则保持物体的大小不变，无论距离如何。
完整示例代码
以下是一个完整的示例，展示如何在Three.js中使用正投影相机：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Orthographic Camera Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(
window.innerWidth / -2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / -2,
1, 8000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(0, 2000, 0);
camera.lookAt(scene.position);
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
function animate() {
requestAnimationFrame(animate);
box.rotation.x += 0.01;
box.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>