✨ 运行效果
👀 页面被划分成三块区域：
-
左边是从左边看的立方体
-
中间是正面看的立方体
-
右边是从右边看的立方体
立方体会缓慢旋转，每个区域显示的视角不一样～
超有科技感！✨🛸
一次渲染多个视角，轻松切换不同画面！🎥👀
📚 什么是 ArrayCamera？
在 Three.js 中，ArrayCamera 是一个组合相机！
它允许你一次性渲染多个不同的摄像机视角，非常适合：
-
多画面监控系统 📹
-
迷你地图（小地图功能）🗺️
-
多视角实时观察 👀
-
游戏分屏（Split Screen Multiplayer）🎮
简单理解：
👉 一个 ArrayCamera 就像一组小摄像机的集合，每个小摄像机负责渲染自己的一部分画面！💥
🎯 核心特点
| 特性 | 说明 |
|---|---|
ArrayCamera | 继承自 Camera，可以容纳多个子相机 |
cameras | 存放所有子相机的数组 |
updateMatrixWorld() | 更新所有子相机的矩阵 |
每个子相机 (PerspectiveCamera 或 OrthographicCamera) 都可以单独设置自己的：
-
视角
-
视口大小（viewport）
-
观察位置和方向
🧠 ArrayCamera 内部原理（通俗版）
想象一下：
你坐在一个超级宽的大电影院 🎬，
左边是监控大门的画面，
中间是正面场景，
右边是小地图...
每个画面其实是一个小小的摄像机视角，ArrayCamera帮你一次渲染完成，不需要每个视角单独渲染，提高效率！🚀
🔥 示例Demo：创建一个三视角同步渲染的小案例
下面咱们用 Three.js 来实现一个简单的 三视角分屏显示示例！🖥️
<template><div ref="container" class="w-full h-screen overflow-hidden"></div>
</template><script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as THREE from '@/libs/three.module.js'; // 记得替换成你的three.js路径const container = ref(null);let scene, arrayCamera, renderer, cube, animationId;onMounted(() => {init();animate();
});onBeforeUnmount(() => {cancelAnimationFrame(animationId);if (renderer) {renderer.dispose();}window.removeEventListener('resize', onWindowResize);
});function init() {const width = window.innerWidth;const height = window.innerHeight;// 创建场景scene = new THREE.Scene();scene.background = new THREE.Color(0xeeeeee);// 创建多个子相机const cameras = [];for (let i = 0; i < 3; i++) {const subCamera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);subCamera.viewport = new THREE.Vector4((width / 3) * i, 0, width / 3, height);subCamera.position.x = (i - 1) * 10; // 分别是 -10, 0, 10subCamera.position.z = 20;subCamera.lookAt(0, 0, 0);cameras.push(subCamera);}// 创建 ArrayCameraarrayCamera = new THREE.ArrayCamera(cameras);arrayCamera.position.z = 20;// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(width, height);container.value.appendChild(renderer.domElement);// 创建旋转的立方体const geometry = new THREE.BoxGeometry(5, 5, 5);const material = new THREE.MeshNormalMaterial();cube = new THREE.Mesh(geometry, material);scene.add(cube);// 窗口自适应window.addEventListener('resize', onWindowResize);
}function animate() {animationId = requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.setScissorTest(true);const width = window.innerWidth;const height = window.innerHeight;for (let i = 0; i < arrayCamera.cameras.length; i++) {const cam = arrayCamera.cameras[i];const viewport = cam.viewport;renderer.setViewport(viewport.x, viewport.y, viewport.z, viewport.w);renderer.setScissor(viewport.x, viewport.y, viewport.z, viewport.w);renderer.render(scene, cam);}renderer.setScissorTest(false);
}function onWindowResize() {const width = window.innerWidth;const height = window.innerHeight;renderer.setSize(width, height);for (let i = 0; i < arrayCamera.cameras.length; i++) {const cam = arrayCamera.cameras[i];cam.aspect = width / height;cam.updateProjectionMatrix();}
}
</script><style scoped>
/* 可选的小样式增强体验 */
</style>
⚡ 小技巧补充
-
每个子相机的
viewport可以灵活设置，实现自由分区布局！🖥️ -
可以混合使用
PerspectiveCamera和OrthographicCamera！更酷～ -
如果想给不同相机加不同特效，可以在渲染前动态切换参数～🎨
🏆 总结
| 项目 | 内容 |
|---|---|
| 适用场景 | 多视角展示、监控系统、小地图、游戏分屏 |
| 优点 | 同时管理多个摄像机，节省性能 |
| 难点 | 需要自己合理管理每个子相机的 viewport |
📢 最后
ArrayCamera 是多视角管理神器！💎
学会它，你可以轻松实现炫酷的三视图、监控界面、VR小地图效果啦～🧠💥
如果觉得这篇文章对你有帮助，记得：
👍 点赞 + ⭐ 收藏 + 💬 留言支持一下！
你们的支持是我不断更新更多 Three.js 技巧的最大动力哦～❤️
