登录
【Three.js多相机渲染】如何在同一场景里实现“画中画”效果
前言
你以为一个场景只能有一个相机？太天真了
上个月，产品经理拿着一个监控大屏的设计图来找我：
“小叶，你看这个效果——主画面看整个车间，右下角有个小窗口专门盯着那台最关键的设备，实时放大，能不能做？”
我一看，这不就是“画中画”吗？电视里看球赛的时候，主画面全场，小窗口给特写镜头，一模一样。
“能做是能做……”我脑子飞速转了一圈，“但你要知道哦，这是3D场景，不是2D视频，得渲染两次。”
产品经理眨眨眼：“那又怎样？你就说能不能做吧。”
“能。”
为了这个“能”，我研究了一下午多相机渲染。今天就把研究成果分享出来，让大伙儿少走弯路。
一、多相机渲染是啥？
平时我们写Three.js，都是一个场景、一个相机、一个渲染器：
renderer.render(scene, camera);
这叫单视角。
但Three.js允许你在同一帧里用多个相机渲染同一个场景。每个相机可以看到不同的角度、不同的位置，然后通过设置视口（viewport），把它们渲染到屏幕的不同区域。
比如：左边一个相机看整体，右边一个相机看局部；或者主画面占满，右下角一个小窗口显示另一个视角。
这就是多相机渲染。
二、最简单的画中画实现
先来个最基础的版本：主相机看整个场景，副相机放在一个设备旁边，把画面渲染到右下角一个小方框里。
1. 创建两个相机
// 主相机：看整体
const mainCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
mainCamera.position.set(10, 10, 20);
mainCamera.lookAt(0, 0, 0);
// 副相机：特写某个设备
const subCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000); // 宽高比暂时设1，后面按视口算
subCamera.position.set(2, 2, 5); // 假设设备在原点附近
subCamera.lookAt(0, 0, 0);
2. 在渲染循环里分别设置视口
function animate() {
requestAnimationFrame(animate);
// 1. 渲染主相机（全屏）
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
renderer.render(scene, mainCamera);
// 2. 渲染副相机（右下角 300x200 的区域）
const subWidth = 300;
const subHeight = 200;
renderer.setViewport(
window.innerWidth - subWidth, // x 起点
0, // y 起点（从底部开始算的话，这里是0）
subWidth,
subHeight
);
renderer.render(scene, subCamera);
}
注意：setViewport 的坐标系是左下角为原点(0,0)。所以右下角的位置是 (window.innerWidth - subWidth, 0)。
3. 别忘了清除深度
两个相机渲染同一个场景，如果不做处理，第二个相机的渲染可能会被第一个相机的深度信息干扰。
解决方案：每次渲染前清除深度缓冲区，但保留颜色缓冲区（或者直接重新清除全部）。
// 渲染主相机前，正常清除
renderer.clear();
// 渲染主相机
renderer.render(scene, mainCamera);
// 渲染副相机前，只清除深度（不清除颜色，否则主画面被清掉）
renderer.clearDepth();
renderer.render(scene, subCamera);
这样副相机的画面就能正确覆盖在主画面之上。
三、让副相机可交互
光有画面还不够，产品经理说：“小窗口能不能也支持旋转、缩放？我想仔细看看那台设备的细节。”
也就是说，副相机得绑定一套控制器。
1. 两套控制器？
直接用两个 OrbitControls 绑到同一个 canvas 上会有冲突。因为鼠标事件只有一个，你不知道用户是想操作主相机还是副相机。
解决方案：通过点击切换激活状态。点击哪个窗口，哪个相机就响应控制器。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 主相机控制器
const mainControls = new OrbitControls(mainCamera, renderer.domElement);
mainControls.enableDamping = true;
// 副相机控制器（先禁用它）
const subControls = new OrbitControls(subCamera, renderer.domElement);
subControls.enabled = false;
// 点击事件判断
renderer.domElement.addEventListener('click', (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
// 判断是否点击在副相机区域
const subWidth = 300;
const subHeight = 200;
const subLeft = window.innerWidth - subWidth;
const subBottom = 0;
const subRight = window.innerWidth;
const subTop = subHeight;
if (mouseX >= subLeft && mouseX <= subRight && mouseY >= subBottom && mouseY <= subTop) {
// 点击在副窗口，激活副相机控制器，禁用主相机控制器
subControls.enabled = true;
mainControls.enabled = false;
} else {
// 点击在主窗口，激活主相机控制器，禁用副相机控制器
subControls.enabled = false;
mainControls.enabled = true;
}
});
2. 控制器的更新
在动画循环里，同时更新两个控制器：
function animate() {
requestAnimationFrame(animate);
mainControls.update(); // 即使 enabled=false 也可以调用，只是没效果
subControls.update();
// 渲染代码同上
// ...
}
四、进阶：小地图（俯视图）
画中画还有一个常见用法：小地图。主画面是自由视角，右下角显示一个从上往下的固定俯视图，帮助用户定位。
实现起来超级简单：
// 创建俯视相机
const mapCamera = new THREE.OrthographicCamera(-20, 20, 20, -20, 0.1, 100);
mapCamera.position.set(0, 30, 0);
mapCamera.lookAt(0, 0, 0);
mapCamera.up.set(0, 0, 1); // 让Z轴朝上，这样俯视图更符合直觉（如果场景是Z轴朝上的话）
// 在动画循环里
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
renderer.render(scene, mainCamera);
renderer.clearDepth();
renderer.setViewport(window.innerWidth - 200, window.innerHeight - 200, 180, 180);
renderer.render(scene, mapCamera);
注意正交相机 OrthographicCamera 的参数：left/right/bottom/top 决定了视景范围，数值越小，放大倍数越大。
为了让小地图更清晰，可以关闭一些后期效果，或者用简单的 MeshBasicMaterial 渲染一个副本，但为了简单，直接复用原场景也行。
五、坑点汇总
1. 宽高比
副相机的宽高比要跟视口的宽高比保持一致，否则画面会拉伸：
subCamera.aspect = subWidth / subHeight;
subCamera.updateProjectionMatrix();
每次窗口大小变化时，也要重新计算。
2. 深度冲突
如果不调用 clearDepth()，第二个相机的渲染可能会因为深度测试失败而显示不全。上面已经给出解法。
3. 控制器冲突
上面用了点击切换的方法，但用户可能想同时操作？不太现实，因为鼠标只有一个。如果非要同时操作，可以考虑把副相机绑定到键盘控制，或者用不同的鼠标按钮。
4. 性能
多渲染一次，性能开销肯定翻倍。如果副相机视口很小，可以降低它的渲染分辨率或关闭阴影、后期等：
// 在渲染副相机前，临时关掉阴影
renderer.shadowMap.enabled = false;
renderer.render(scene, subCamera);
renderer.shadowMap.enabled = true; // 恢复
或者更狠一点：副相机用更低精度的几何体（LOD），但实现起来复杂，这里不展开。
5. 清理
副相机用完记得 dispose，尤其是如果动态创建和销毁：
subCamera = null;
// 如果有控制器，也调用 dispose
subControls.dispose();
六、实战：设备特写画中画
最后分享一下我在那个监控项目里的实际代码片段：
// 初始化
const mainCamera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
const subCamera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
subCamera.position.copy(device.position.clone().add(new THREE.Vector3(1, 1, 2)));
subCamera.lookAt(device.position);
// 动画循环
function render() {
requestAnimationFrame(render);
// 更新主控制器
mainControls.update();
// 主渲染
renderer.setViewport(0, 0, width, height);
renderer.clear();
renderer.render(scene, mainCamera);
// 副渲染（右下角 300x200）
renderer.clearDepth();
renderer.setViewport(width - 310, 10, 300, 200);
renderer.render(scene, subCamera);
// 画一个边框，突出小窗口
// 可以用CSS，或者用另一个Sprite/Canvas画上去，这里省略
}
产品经理看了很满意，说：“就是这个效果！”
我心想：为了这个效果，我研究了半天多相机，但值了。
七、总结
多相机渲染并不复杂，核心就三步：
- 创建多个相机
- 在渲染循环里分别设置视口
- 处理好深度清除和宽高比
有了它，你可以实现：
- 画中画特写
- 小地图导航
- 分屏对比
- 多角度监控
下次产品经理再提类似需求，你就可以自信地说：“能，而且我能给你三个方案。”
互动
你用过Three.js的多相机渲染吗？实现了什么好玩的效果？评论区晒出来，让我抄抄作业 😏
下篇预告：【Three.js后期处理】如何让你的场景拥有电影级调色
