9.Three.js中 ArrayCamera 多视角相机详解+示例代码

✨ 运行效果

👀 页面被划分成三块区域：

左边是从左边看的立方体
中间是正面看的立方体
右边是从右边看的立方体

立方体会缓慢旋转，每个区域显示的视角不一样～
超有科技感！✨🛸

一次渲染多个视角，轻松切换不同画面！🎥👀

📚 什么是 ArrayCamera？

在 Three.js 中，ArrayCamera 是一个组合相机 ！

它允许你一次性渲染多个不同的摄像机视角，非常适合：

多画面监控系统 📹
迷你地图（小地图功能）🗺️
多视角实时观察 👀
游戏分屏（Split Screen Multiplayer）🎮

简单理解：

👉 一个 ArrayCamera 就像一组小摄像机的集合，每个小摄像机负责渲染自己的一部分画面！💥

🎯 核心特点

特性	说明
`ArrayCamera`	继承自 `Camera`，可以容纳多个子相机
`cameras`	存放所有子相机的数组
`updateMatrixWorld()`	更新所有子相机的矩阵

每个子相机 (PerspectiveCamera 或 OrthographicCamera) 都可以单独设置自己的：

视角
视口大小（viewport）
观察位置和方向

🧠 ArrayCamera 内部原理（通俗版）

想象一下：

你坐在一个超级宽的大电影院 🎬，

左边是监控大门的画面，

中间是正面场景，

右边是小地图...

每个画面其实是一个小小的摄像机视角，ArrayCamera帮你一次渲染完成，不需要每个视角单独渲染，提高效率！🚀

🔥 示例Demo：创建一个三视角同步渲染的小案例

下面咱们用 Three.js 来实现一个简单的 三视角分屏显示示例！🖥️

javascript 复制代码

<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, 10
    subCamera.position.z = 20;
    subCamera.lookAt(0, 0, 0);

    cameras.push(subCamera);
  }

  // 创建 ArrayCamera
  arrayCamera = 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 技巧的最大动力哦～❤️