✨ 运行效果
👀 左边一幅图、右边一幅图，略微偏移，形成立体感～
（戴上VR眼镜或红蓝3D眼镜体验更明显哦～）
🔥 小球或方块旋转中，左右略微不同步，立体感更强！
立体视觉，从"二维世界"穿越到"三维体验"！🕶️✨
📚 什么是 StereoCamera？
在 Three.js 中，StereoCamera（立体相机）是一种将场景分别渲染到左右眼的相机，常用于：
-
VR虚拟现实 🎮
-
AR增强现实 🪄
-
3D红蓝眼镜立体显示 🕶️
它本质上是用**两个透视相机（左眼、右眼）**进行拍摄，通过微小的偏移，给人一种空间深度的真实感！🌌
🎯 核心特点
| 特性 | 说明 |
|---|---|
StereoCamera | 管理一对左右相机，并计算好它们的视角偏移。 |
eyeSep | 两只眼睛的间距（默认值：0.064米）👀 |
update(camera) | 根据主摄像机的位置方向，同步更新左右眼相机。 |
🧠 StereoCamera 内部原理（通俗版）
可以想象：
你闭上一只眼，再闭另一只眼，会发现世界稍微移动了一点点对吧？
StereoCamera就是模拟这种小小的视角偏差，从而在屏幕上产生立体感～💥
左眼看一遍 ➡️ 右眼看一遍 ➡️ 合成一个立体世界！
🔥 示例Demo：创建一个简单的立体视觉场景
下面我们用 Three.js 做一个超简单的示例～
左右分别渲染两个画面，展现 StereoCamera 的效果！
<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, camera, stereoCamera, renderer, cube, animationId;onMounted(() => {init();animate();
});onBeforeUnmount(() => {cancelAnimationFrame(animationId);if (renderer) {renderer.dispose();}window.removeEventListener('resize', onWindowResize);
});function init() {// 场景scene = new THREE.Scene();scene.background = new THREE.Color(0xeeeeee);// 主相机camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.z = 20;// StereoCamerastereoCamera = new THREE.StereoCamera();stereoCamera.eyeSep = 0.064;// 渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);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;// 更新StereoCamerastereoCamera.update(camera);// 分屏渲染renderer.setScissorTest(true);// 左眼renderer.setScissor(0, 0, window.innerWidth / 2, window.innerHeight);renderer.setViewport(0, 0, window.innerWidth / 2, window.innerHeight);renderer.render(scene, stereoCamera.cameraL);// 右眼renderer.setScissor(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);renderer.setViewport(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);renderer.render(scene, stereoCamera.cameraR);renderer.setScissorTest(false);
}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
}
</script><style scoped>
/* 可以额外加一点样式优化体验 */
</style>
⚡ 小技巧补充
-
eyeSep（眼距）可以调整，比如：stereoCamera.eyeSep = 0.08; // 眼距更大，立体感更夸张 -
渲染VR时，Three.js提供了更高级的
WebXR支持，但 StereoCamera 是学习立体视觉原理的好入口！📚 -
如果想要单屏显示立体图，可以用
Canvas把左右画面组合成一个红蓝混合图（稍微复杂些，需要Shader处理）。
🏆 总结
| 项目 | 内容 |
|---|---|
| 适用场景 | VR/AR渲染、立体相机视图、3D展示 |
| 优点 | 简单易用，模拟真实双眼观看世界 |
| 缺点 | 只是立体图，不是真正VR，需要配合设备体验最佳 |
StereoCamera虽然简单，但是它是迈向 VR/AR 开发的重要第一步呀～🛹
学懂了它，你已经在 Three.js 世界里离"构建元宇宙"更进一步了！🌎✨
📢 最后
如果觉得有帮助，记得一键三连【点赞 👍 收藏 ⭐ 评论 💬】支持一下呀！
你们的鼓励是我持续分享的最大动力！🔥🔥🔥
