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

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

news 来源：原创 2025/4/29 6:41:36

✨ 运行效果

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

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

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

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

📚 什么是 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