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

8.Three.js中的 StereoCamera 立体相机详解+示例代码

 ✨ 运行效果

👀 左边一幅图、右边一幅图,略微偏移,形成立体感~
(戴上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 世界里离"构建元宇宙"更进一步了!🌎✨


📢 最后

如果觉得有帮助,记得一键三连【点赞 👍 收藏 ⭐ 评论 💬】支持一下呀!
你们的鼓励是我持续分享的最大动力!🔥🔥🔥

相关文章:

8.Three.js中的 StereoCamera 立体相机详解+示例代码

✨ 运行效果 &#x1f440; 左边一幅图、右边一幅图&#xff0c;略微偏移&#xff0c;形成立体感&#xff5e; &#xff08;戴上VR眼镜或红蓝3D眼镜体验更明显哦&#xff5e;&#xff09; &#x1f525; 小球或方块旋转中&#xff0c;左右略微不同步&#xff0c;立体感更强&am…...

MYSQL——时间字段映射Java类型

在 Java 中查询数据库中的【时间字段】时&#xff0c;可以使用以下几种类型来处理&#xff1a; 1. java.sql.Date 适用场景&#xff1a;当数据库中的时间字段是 date 类型时&#xff0c;使用 java.sql.Date 是最合适的选择。示例代码&#xff1a;ResultSet rs statement.exe…...

搭建speak yarn集群:从零开始的详细指南

在大数据处理领域&#xff0c;Apache Spark 是一个高性能的分布式计算框架&#xff0c;而 YARN&#xff08;Yet Another Resource Negotiator&#xff09;是 Hadoop 的资源管理器。将 Spark 集成到 YARN 中&#xff0c;不仅可以充分利用 Hadoop 的资源管理能力&#xff0c;还能…...

第十三章-PHP MySQL扩展

第十三章-PHP与MySQL 一&#xff0c;连接数据库 1. 使用 MySQLi&#xff08;面向对象方式&#xff09; <?php // 数据库参数 $host localhost; $username root; $password ; $database test_db;// 创建连接 $conn new mysqli($host, $username, $password, $databa…...

在服务器中,搭建FusionCompute,实现集群管理

序&#xff1a;需要自备一台服务器&#xff0c;并安装部署好KVM&#xff0c;自行下载镜像&#xff0c;将所需的CNA和VRM镜像放到服务器中&#xff0c;小编所用的进项版本如下&#xff0c;读者可自行根据需求下载其它版本的镜像。 CNA镜像&#xff1a;FusionCompute_CNA-8.3.0-…...

嵌入式开发学习日志Day11

一、函数的递归调用 在调用一个函数的过程中&#xff0c;又出现直接或者间接的调用函数本身&#xff0c;称之为函数的递归调用&#xff1b; 函数的递归调用是使用大量的内存空间完成程序进行的&#xff1b; 1.间接调用 2.直接调用 注意&#xff1a; 上图仅为示意&#xff0c;…...

【线性规划】对偶问题的实际意义与重要性质 学习笔记

【线性规划】对偶问题的实际意义与重要性质_哔哩哔哩_bilibili...

代码随想录第30天:动态规划3

一、01背包理论基础&#xff08;Kama coder 46&#xff09; “01背包”&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 1. 确…...

DSP48E2 的 MAC模式功能仿真

DSP48E2 仿真代码&#xff1a; 测试的功能为 P i ( A D ) ∗ B P i − 1 P_{i} (AD) * B P_{i-1} Pi​(AD)∗BPi−1​ timescale 1ns / 1nsmodule dsp_tb;// 输入reg CLK;reg CE;reg SCLR;reg signed [26:0] A, D;reg signed [17:0] B;// 输出wire signed [47:0] P;par…...

【环境配置】Mac电脑安装运行R语言教程 2025年

一、安装 Xcode Command Line Tools 打开终端&#xff0c;输入如下命令&#xff1a; xcode-select --install安装完成后&#xff0c;输入如下命令&#xff0c;能看见版本号说明安装成功 gcc --version二、下载安装R语言 https://mirrors.tuna.tsinghua.edu.cn/CRAN/ 点开后…...

常见算法的总结与实现思路

前言 hello&#xff0c;我是Maybe。昨天和今天花了两天左右的时间。把常见的排序算法都学完了&#xff0c;自己也实现了一遍。感觉收获满满&#xff0c;但是过程是艰辛的。下面我将分享代码和思维导图&#xff0c;希望可以帮助到大家。 思维导图(含注意事项&#xff0c;实现思…...

Ethan独立开发产品日报 | 2025-04-27

1. CreateWise AI 旨在提升你工作效率的AI播客编辑器 人工智能播客编辑器&#xff0c;让你的播客制作速度提升10倍&#xff01;它可以自动去除口头语和沉默&#xff0c;生成节目笔记和精彩片段&#xff0c;还能一键制作适合社交媒体分享的短视频——所有这些功能都只需一次点…...

5G与边缘计算:协同发展,开启智慧世界新篇章

**5G与边缘计算&#xff1a;协同发展&#xff0c;开启智慧世界新篇章 ** 大家好&#xff0c;我是Echo_Wish。今天我们来探讨一个备受关注的技术话题——5G与边缘计算的协同发展。随着5G网络的逐步普及以及边缘计算技术的快速发展&#xff0c;二者的结合为我们带来了前所未有的创…...

AcWing 885:求组合数 I ← 杨辉三角

【题目来源】 https://www.acwing.com/problem/content/887/ 【题目描述】 给定 n 组询问&#xff0c;每组询问给定两个整数 a&#xff0c;b&#xff0c;请你输出 C(a,b) mod (10^97) 的值。 【输入格式】 第一行包含整数 n。 接下来 n 行&#xff0c;每行包含一组 a 和 b。 …...

Python3:Jupyterlab 安装和配置

Python3:Jupyterlab 安装和配置 Jupyter源于Ipython Notebook项目&#xff0c;是使用Python&#xff08;也有R、Julia、Node等其他语言的内核&#xff09;进行代码演示、数据分析、机器学习、可视化、教学的非常好的工具。 最新的基于web的交互式开发环境&#xff0c;适用于n…...

如何搭建spark yarn模式的集合集群

一、环境准备 在搭建 Spark on YARN 集群之前&#xff0c;需要确保以下环境已经准备就绪&#xff1a; 操作系统&#xff1a;推荐使用 CentOS、Ubuntu 等 Linux 发行版。 Java 环境&#xff1a;确保安装了 JDK 1.8 或更高版本。 Hadoop 集群&#xff1a;已经搭建并运行的 Had…...

智能座舱架构中芯片算力评估

在智能座舱&#xff08;Intelligent Cockpit&#xff09;领域&#xff0c;芯片的算力是决定系统性能、响应速度以及用户体验的关键因素之一。 随着汽车智能化程度的不断提高&#xff0c;智能座舱对芯片的算力、功耗、集成度以及安全性提出了更高的要求。 智能座舱架构中芯片算…...

STM32完整内存地址空间分配详解

在STM32这类基于ARM Cortex-M的32位微控制器中&#xff0c;整个4GB的地址空间(从0x00000000到0xFFFFFFFF)有着非常系统化的分配方案&#xff0c;每个区域都有其特定的用途。下面我将详细介绍这些地址区域的分配及其功能&#xff1a; STM32完整内存地址空间分配详解(0x00000000…...

叉车司机N1考试的实操部分有哪些注意事项?

叉车司机 N1 考试实操部分分为场地考试和场内道路考试&#xff0c;以下是一些注意事项&#xff1a; 场地考试 起步&#xff1a;检查车辆仪表和个人仪容&#xff0c;穿好工作服、戴安全帽&#xff0c;不穿拖鞋等不符规定的鞋。同时检查换挡和换向操纵杆在空档位置&#xff0c;…...

【行业特化篇2】金融行业简历特化指南:合规性要求与风险控制能力的艺术化呈现

写在最前 作为一个中古程序猿,我有很多自己想做的事情,比如埋头苦干手搓一个低代码数据库设计平台(目前只针对写java的朋友),比如很喜欢帮身边的朋友看看简历,讲讲面试技巧,毕竟工作这么多年,也做到过高管,有很多面人经历,意见还算有用,大家基本都能拿到想要的offe…...

Linux 定时备份到windows 方案比较

1 传输协议比较 特性SCPRSYNCSFTP基本功能文件传输&#xff08;本地与远程&#xff09;文件和目录的同步与传输文件管理&#xff08;上传、下载、删除等&#xff09;增量传输不支持增量传输支持增量传输不支持增量传输性能传输速度较慢&#xff0c;效率低高效&#xff0c;适合…...

【网络编程】TCP/IP四层模型、MAC和IP

1. TCP/IP的四层模型 网络模型的目的&#xff1a;规范通信标准&#xff0c;确保不同设备和系统之间能够有效通信 对比OSI模型与TCP/IP模型&#xff1a; OSI模型的七层架构&#xff08;物理层、数据链路层、网络层、传输层、会话层、表示层、应用层&#xff09;TCP/IP模型的四…...

Java学习手册: IoC 容器与依赖注入

一、IoC 容器概述 IoC&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;容器是 Spring 框架的核心组件之一。它负责创建对象、管理对象的生命周期以及对象之间的依赖关系。通过将对象的创建和管理交给 IoC 容器&#xff0c;开发者可以实现代码的松耦合&#…...

Web 基础与Nginx访问统计

目录 Web基础 域名与DNS 域名的结构 网页与HTML 网页概述 HTML 概述 HTML基本标签 1、HTML 语法规则 2、HTML 文件结构 静态网页和动态网页 HTTP协议概述 HTTP方法 HTTP状态码 Nginx访问状态统计 Web基础 域名与DNS 网络是基于 TCP/IP 协议进行通信和连接的,每一台主机都有一…...

了解Android studio 初学者零基础推荐(1)

线上学习课程链接 开发Andorid App 使用的语言有很多&#xff0c;包括java, kotlin,C,等&#xff0c;首先让我们了解kotlin这个热门语言。 kotlin 程序 fun main() {println("hello,xu") } kotlin中的函数定义语法&#xff1a;函数名称在fun关键字后面&#xff0…...

Android Studio 2024版,前进返回按钮丢失解决

最近升级完AS最新系统后&#xff0c;顶部的前进和返回按钮默认隐藏了 解决方案&#xff1a; 1. 打开settings 2. 找到左侧 Appearance & Behavior 下面点击 Menus and Toolbars 3. 点击 Main Toolar 4. 点击Left&#xff0c;右键选择 Add Actions 5. 弹框中选择 Main Me…...

详解UnityWebRequest类

什么是UnityWebRequest类 UnityWebRequest 是 Unity 引擎中用于处理网络请求的一个强大类&#xff0c;它可以让你在 Unity 项目里方便地与网络资源进行交互&#xff0c;像发送 HTTP 请求、下载文件等操作都能实现。下面会详细介绍 UnityWebRequest 的相关内容。 UnityWebRequ…...

安装qt4.8.7

QT4.8.7安装详细教程&#xff08;MinGW 4.8.2和QTCreator4.2.0)_qtcreater482-CSDN博客 QT4.8.7安装详细教程&#xff08;MinGW 4.8.2和QTCreator4.2.0) 1、下载 1&#xff09;下载QT4.8.7 http://download.qt.io/archive/ 名称&#xff1a;qt-opensource-windows-x86-mingw482…...

2025系统架构师---管道/过滤器架构风格

引言 在分布式系统与数据密集型应用主导技术演进的今天&#xff0c;‌管道/过滤器架构风格‌&#xff08;Pipes and Filters Architecture Style&#xff09;凭借其‌数据流驱动‌、‌组件解耦‌与‌并行处理能力‌&#xff0c;成为处理复杂数据转换任务的核心范式。从Unix命令…...

仙宫云ComfyUI —【Wan2.1】AI视频生成部署

【Wan2.1】AI视频生成本地部署与使用技巧全面详解_哔哩哔哩_bilibili 所有模型下载&#xff1a;https://pan.quark.cn/s/9d793aa1b258 Runninghub本期课程工作流下载&#xff08;可获得1000RH币&#xff09;&#xff1a;https://www.runninghub.cn/?utm_sourcekol01-RH145 仙…...

学成在线。。。

一:讲师管理 介绍:可以实现对讲师的分页展示,多条件组合分页查询,对讲师的添加,修改,删除操作。 针对于添加来说,使用requestBody注解,搭配postmapping接收数据,使用service层的对象,调用mapper方法,向数据库中保存数据。 修改: 先根据讲师id,查询出讲师,再去…...

Python爬虫实战:获取猫yan电影网最新热门电影数据并做分析,为51观影做参考

一、引言 随着互联网的迅速发展,电影信息获取更加便捷。猫yan电影作为国内知名电影信息平台,提供了丰富电影数据。对于我们而言,获取并分析这些数据,能为用户提供更有价值的观影建议。本文详细介绍使用 Python 的 Scrapy 框架实现猫yan电影数据爬取与分析,为 “五一” 观…...

将有序数组转换为高度平衡二叉搜索树 | 详解与Java实现

文章目录 1. 问题描述2. 方法思路核心思想:分治法 + 递归3. 代码实现Java实现(含注释)4. 复杂度分析5. 关键点解释为何选择中间节点?为何使用 `left + (right - left) / 2` 而非 `(left + right) / 2`?6. 扩展优化迭代法实现(非递归)优化空间7. 总结1. 问题描述 108.将…...

普推知产:商标驳回复审下初步审定公告了!

近日客户的商标驳回复审后终于下初审公告了&#xff0c;经过一年多时间&#xff0c;当时申请时知道这个商标名称会被驳回&#xff0c;因为有相同一模一样的&#xff0c;客户就想要这个名称&#xff0c;因为与创始人的姓名是相关的&#xff0c;普推知产商标老杨经分析后&#xf…...

网工笔记-网络层

概述&#xff1a; 两种观点&#xff1a; 1.面向连接的可靠传输 2.面向无连接的&#xff0c;尽最大努力完成交付数据报服务 虚电路服务&#xff08;可靠传输&#xff09; 数据报服务&#xff08;尽力而为&#xff09; 两者的对比&#xff1a; 不管是虚电路还是数据报服务都是…...

el-Input输入数字自动转千分位进行展示

el-Input输入数字自动转千分位进行展示&#xff0c;存储值不变 子组件&#xff1a; <template><el-input ref"inputRef" :disabled"disabled" clearable v-model"displayValue" v-bind"$attrs" input"handleInput&quo…...

基于 Spring Boot 瑞吉外卖系统开发(九)

基于 Spring Boot 瑞吉外卖系统开发&#xff08;九&#xff09; 保存菜品 菜品管理页面提供了一个“新增菜品”按钮&#xff0c;单击该按钮时&#xff0c;会打开新增菜品页面。 请求路径/dish&#xff0c;请求方法POST&#xff0c;参数使用DishDto类接收。 DishDto 添加f…...

C++复习补充 类型转换和RTTI

类型转换和RTTI 类型转换类与类之间的类型转换四种显示类型转换类型转换注意事项RTTI 类型转换 在 C 中&#xff0c;operator int() 是用户定义的类型转换运算符&#xff08;User-Defined Conversion Operator&#xff09;&#xff0c;允许自定义对象隐式或显式转换为特定类型…...

QT采用mqtt进行通信(17.1)

文章目录 1.试错历程2. qt5.8安装3. 开始搞了4. 测试连接mqtt broker1.试错历程 尝试过网上说的各种版本,官方库和第三方库,试过qt5.9.9, qt5.12, qt5.12.2, qt5.14 等各个版本,都能编译通过,调用mqtt库,但是都不能连接成功,真的是试吐了,不知道他们的为什么都能成功,…...

基于 BERT 微调一个意图识别(Intent Classification)模型

基于 BERT 微调一个意图识别&#xff08;Intent Classification&#xff09;模型&#xff0c;你的意图类别包括&#xff1a; 查询天气获取新闻咨询想听音乐想添加备忘查询备忘获取家政服务结束对话增加音量减小音量其他 具体实现步骤&#xff08;详细版&#xff09; 1. 准备你…...

人工智能大语言模型与AI芯片新进展:技术演进与商业化路径

人工智能大语言模型与AI芯片新进展&#xff1a;技术演进与商业化路径 Latest Advances in AI Large Language Models and Chips: Technological Evolution and Commercialization Pathways 一、研究背景与意义&#xff08;Research Background and Significance&#xff09; 技…...

【Linux】Java 开发者的 Linux 常用命令指南

Java 开发者的 Linux 常用命令指南 目录标题 Java 开发者的 Linux 常用命令指南1. Linux 目录结构2. 系统信息命令3. 服务管理系统服务防火墙管理 4. 文本编辑 (vi/vim)常用模式 5. 文件和目录操作查看与导航创建与删除查看文件内容查找文件 6. 用户管理7. 压缩和解压8. 权限管…...

全开源、私有化部署!轻量级用户行为分析系统-ClkLog

ClkLog是一款支持私有化部署的全开源埋点数据采集与分析系统&#xff0c;兼容Web、App、小程序多端埋点&#xff0c;快速洞察用户访问路径、行为轨迹&#xff0c;并生成多维用户画像。助力中小团队搭建轻量灵活的用户行为分析平台。 为什么需要一款私有化的埋点分析系统&#x…...

【Mybatis】Mybatis基础

文章目录 前言一、搭建MyBatis1.1 创建maven工程1.2 加入log4j日志功能1.3 MyBatis的增删改查1.4 核心配置文件详解 二、MyBatis获取参数值的两种方式2.1 单个字面量类型的参数2.2 多个字面量类型的参数2.3 map集合类型的参数2.4 实体类类型的参数2.5 使用Param标识参数 三、 M…...

(002)Excel 使用图表,统计

第一步新建数据&#xff0c;将数据转成表格&#xff1a; 选中表格数据&#xff0c;右下角小图标&#xff1a;汇总 图表。...

云服务器主动防御策略与自动化防护(下)

三、纵深防御体系构建 1. 系统层防护 # 自动安全更新配置 sudo apt install unattended-upgrades sudo dpkg-reconfigure unattended-upgrades# 内核防护加固 sudo vim /etc/sysctl.conf# 添加以下参数&#xff1a; net.ipv4.conf.all.rp_filter1 net.ipv4.conf.default.rp_f…...

在前端应用领域驱动设计(DDD):必要性、挑战与实践指南

引言 领域驱动设计&#xff08;Domain-Driven Design&#xff0c;简称 DDD&#xff09;起源于后端复杂业务系统建模领域&#xff0c;是 Eric Evans 在 2003 年提出的一套理论体系。近年来&#xff0c;随着前端工程化与业务复杂度的持续提升&#xff0c;"前端也要 DDD&quo…...

【软件工程】需求分析详解

需求分析是确保软件产品符合用户期望、降低返工风险的关键环节。通过系统化的方法&#xff0c;团队可以从多渠道获取需求&#xff0c;利用多种建模技术对需求进行结构化分析&#xff0c;并编写规范的需求规格说明书&#xff08;SRS&#xff09;&#xff0c;最终通过评审、验证及…...

FPGA-DDS信号发生器

FPGA-DDS信号发生器 DDS基本原理 ​ FPGA实现的DDS&#xff08;直接数字频率合成&#xff09;波形生成器是一种高效、灵活的数字信号生成技术&#xff0c;广泛应用于通信、雷达和测试设备中。其核心原理是通过数字计算生成特定频率的波形。 ​ DDS通过相位累加、查找表(LUT)…...

二进制、高位低位、位移操作与进制转换全解

二进制、高位低位、位移操作与进制转换全解 在计算机科学中&#xff0c;理解高位与低位、左移与右移、进制转换与位运算非常重要。这篇文章用清晰直观的方式梳理这些基本概念。 高位与低位 低位&#xff1a;二进制中靠右的位&#xff0c;权值较小&#xff08;例如 (2^0, 2^1…...