✨ 运行效果
👀 左边一幅图、右边一幅图,略微偏移,形成立体感~
(戴上VR眼镜或红蓝3D眼镜体验更明显哦~)

🔥 小球或方块旋转中,左右略微不同步,立体感更强!
立体视觉,从"二维世界"穿越到"三维体验"!🕶️✨
📚 什么是 StereoCamera?
在 Three.js 中,StereoCamera
(立体相机)是一种将场景分别渲染到左右眼的相机,常用于:
-
VR虚拟现实 🎮
-
AR增强现实 🪄
-
3D红蓝眼镜立体显示 🕶️
它本质上是用**两个透视相机(左眼、右眼)**进行拍摄,通过微小的偏移,给人一种空间深度的真实感!🌌
🎯 核心特点
特性 | 说明 |
---|---|
StereoCamera |
管理一对左右相机,并计算好它们的视角偏移。 |
eyeSep |
两只眼睛的间距(默认值:0.064米)👀 |
update(camera) |
根据主摄像机的位置方向,同步更新左右眼相机。 |
🧠 StereoCamera 内部原理(通俗版)
可以想象:
你闭上一只眼,再闭另一只眼,会发现世界稍微移动了一点点对吧?
StereoCamera就是模拟这种小小的视角偏差,从而在屏幕上产生立体感~💥
左眼看一遍 ➡️ 右眼看一遍 ➡️ 合成一个立体世界!
🔥 示例Demo:创建一个简单的立体视觉场景
下面我们用 Three.js 做一个超简单的示例~
左右分别渲染两个画面,展现 StereoCamera 的效果!
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, 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;
// StereoCamera
stereoCamera = 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;
// 更新StereoCamera
stereoCamera.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
(眼距)可以调整,比如:javascriptstereoCamera.eyeSep = 0.08; // 眼距更大,立体感更夸张
-
渲染VR时,Three.js提供了更高级的
WebXR
支持,但 StereoCamera 是学习立体视觉原理的好入口!📚 -
如果想要单屏显示立体图,可以用
Canvas
把左右画面组合成一个红蓝混合图(稍微复杂些,需要Shader处理)。
🏆 总结
项目 | 内容 |
---|---|
适用场景 | VR/AR渲染、立体相机视图、3D展示 |
优点 | 简单易用,模拟真实双眼观看世界 |
缺点 | 只是立体图,不是真正VR,需要配合设备体验最佳 |
StereoCamera虽然简单,但是它是迈向 VR/AR 开发的重要第一步呀~🛹
学懂了它,你已经在 Three.js 世界里离"构建元宇宙"更进一步了!🌎✨
📢 最后
如果觉得有帮助,记得一键三连【点赞 👍 收藏 ⭐ 评论 💬】支持一下呀!
你们的鼓励是我持续分享的最大动力!🔥🔥🔥