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

ThreeJs同一个场景多个相机的显示

        在threeJs开发数字孪生中,我们正常是需要使用一个相机,画面显示的内容也就是这个相机拍摄到的内容,但是是否可以添加多个相机,可以同时从不同角度观察模型呢,实际上是可以的,不过多个相机的拍摄到的画面肯定需要在多个容器中显示,也就是需要创建多个渲染器,每个渲染器渲染对应的相机拍摄到的画面,下面是代码实现:

假设我们需要从前后左右四个角度查看,那么我们要先定义四个html标签,以便后期展示不同相机的画面:

  <div id="container1"></div><div id="container2"></div><div id="container3"></div><div id="container4"></div>

其次需要定义四个相机,并设置在不同的观察角度:

initCamera(){this.camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera1.position.set(1000,1000,1000);this.camera1.lookAt(0,0,0)this.camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera2.position.set(-1000,1000,-1000);this.camera2.lookAt(0,0,0)this.camera3 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera3.position.set(-1000,1000,1000);this.camera3.lookAt(0,0,0)this.camera4 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera4.position.set(1000,1000,-1000);this.camera4.lookAt(0,0,0)},

此时需要在场景中添加一个用于观察的模型:

 initModel(){const loader = new GLTFLoader()loader.load("/static/model/agv.gltf", (gltf) => {this.model = gltf.scene;scene.add(this.model)   // 加入场景})},

再定义四个渲染器,用于分别渲染四个相机中的内容

initRenderer(){this.renderer1 = new THREE.WebGLRenderer({ antialias: true });this.container1 = document.getElementById("container1")this.renderer1.setSize(this.container1.clientWidth, this.container1.clientHeight);this.renderer1.setClearColor('#FFFFFF', 1.0);this.container1.appendChild(this.renderer1.domElement);this.renderer2 = new THREE.WebGLRenderer({ antialias: true });this.container2 = document.getElementById("container2")this.renderer2.setSize(this.container2.clientWidth, this.container2.clientHeight);this.renderer2.setClearColor('#FFFFFF', 1.0);this.container2.appendChild(this.renderer2.domElement);this.renderer3 = new THREE.WebGLRenderer({ antialias: true });this.container3 = document.getElementById("container3")this.renderer3.setSize(this.container3.clientWidth, this.container3.clientHeight);this.renderer3.setClearColor('#FFFFFF', 1.0);this.container3.appendChild(this.renderer3.domElement);this.renderer4 = new THREE.WebGLRenderer({ antialias: true });this.container4 = document.getElementById("container4")this.renderer4.setSize(this.container4.clientWidth, this.container4.clientHeight);this.renderer4.setClearColor('#FFFFFF', 1.0);this.container4.appendChild(this.renderer4.domElement);},

最后为了证实为同一个模型,我们可以将这个模型设置旋转,并不断更新渲染器

initAnimate() {if(this.model){this.model.rotation.y += 0.03;}requestAnimationFrame(this.initAnimate);this.renderer1.render(scene, this.camera1);this.renderer2.render(scene, this.camera2);this.renderer3.render(scene, this.camera3);this.renderer4.render(scene, this.camera4);},

最终就可以实现了;效果如下

四个相机通过四个角度观察模型

相关文章:

ThreeJs同一个场景多个相机的显示

在threeJs开发数字孪生中&#xff0c;我们正常是需要使用一个相机&#xff0c;画面显示的内容也就是这个相机拍摄到的内容&#xff0c;但是是否可以添加多个相机&#xff0c;可以同时从不同角度观察模型呢&#xff0c;实际上是可以的&#xff0c;不过多个相机的拍摄到的画面肯定…...

Vue基础篇

Vue Vue是一套用于构建用户界面的渐进式JavaScript框架 什么是渐进式? Vue可以自底向上逐层地应用; 当构建简单应用时, 只需一个轻量小巧的核心库; 当构建复杂应用时, 可以引入各式各样的Vue插件 Vue具有以下特点: 采用组件化模式, 提高代码复用率且让代码更好维护 声明式编…...

计算机视觉基础知识(十六)--图像识别

图像识别 信息时代的一门重要技术;目的是让计算机代替人类处理大量的物理信息;随着计算机技术的发展,人类对图像识别技术的认识越来越深刻;图像识别技术利用计算机对图像进行处理\分析\理解,识别不同模式的目标和对象;过程分为信息的获取\预处理\特征抽取和选择\分类器设计\分…...

数仓开发-2023/2/29

1.简单自我介绍 2.介绍下之前的公司离线数仓项目 3.sql和hivesql区别&#xff1f; 4.sql的执行顺序&#xff1f; 5.hive的优化 6.说下你之前公司来&#xff0c;你的技能层次在每个公司&#xff1f;你怎么评价你的技能&#xff1f; 7.你的之前业务主要是做什么&#xff1f;我说了…...

ipv6过渡技术-IPv4 over IPv6隧道示例

实验拓扑如下&#xff1a; 环境概述&#xff1a; PC1和PC2与路由器之间为IPv4网络。两台路由器之间为IPv6网络&#xff0c;通过配置&#xff0c;要求是PC1与PC2能互通。即使IPv4可以在IPv6网络中通信。 配置方法&#xff1a; AR1&#xff1a; # ipv6 # interface Gigabi…...

SpringBoot约定大于配置

什么是约定大于配置 "约定大于配置"&#xff08;Convention Over Configuration&#xff09;是一种理念&#xff0c;旨在通过默认约定和规则来减少开发人员需要做的配置工作。在Spring Boot框架中&#xff0c;这一原则得到了充分应用&#xff0c;帮助开发者更快地构…...

DHCP自动获取IP地址实验(华为)

思科设备参考&#xff1a;DHCP自动获取IP地址实验&#xff08;思科&#xff09; 一&#xff0c;实验目的 路由器搭载DHCP&#xff0c;让PC通过DHCP自动获取IP地址 二&#xff0c;不划分vlan--全局地址池 实验拓扑 配置命令 Router <Huawei>system-view [Huawei]ip po…...

探索Terraform实践:优化基础设施管理

Terraform 是管理基础设施及代码&#xff08;IaC&#xff09;最常用的工具之一&#xff0c;它能使我们安全且可预测地对基础设施应用更改。 Terraform作为一个强大的基础设施即代码工具&#xff0c;为开发人员和运维团队提供了一种简单而强大的方式来定义、部署和管理基础设施。…...

MYSQL高级_目录

2024持续更新中… MYSQL01高级_Linux版安装、各级别字符集、字符集与比较规则、SQL大小写规范 MYSQL02高级_目录结构、默认数据库、表文件、系统独立表空间 MYSQL03高级_新增用户、授予权限、授权底层表结构、角色理解 MYSQL04高级_逻辑架构剖析、查询缓存、解析器、优化器、执…...

MongoDB获评2023年Gartner®云数据库管理系统“领导者”

MongoDB 很荣幸在《2023 年 Gartner 云数据库管理系统 (CDBMS) 魔力象限》报告中被评为领导者。我们相信这一成就让 MongoDB 成为唯一一家连续两年斩获“领导者”称号的纯应用程序数据库服务提供商。 社区及开发者数据平台用户的需求一向是 MongoDB 关注的重点&#xff0c;而这…...

基于FastAPI构造一个AI模型部署应用

前言 fastapi是目前一个比较流行的python web框架&#xff0c;在大模型日益流行的今天&#xff0c;其云端部署和应用大多数都是基于fastapi框架。所以掌握和理解fastapi框架基本代码和用法尤显重要。 需要注意的是&#xff0c;fastapi主要是通过app对象提供了web服务端的实现代…...

【Unity】使用ScriptableObject存储数据

1.为什么要用ScriptableObject&#xff1f; 在游戏开发中&#xff0c;有大量的配置数据需要存储&#xff0c;这个时候就需要ScriptableObject来存储数据了。 很多人会说我可以用json、xml、txt&#xff0c;excel等等 但是你们有没有想过&#xff0c;假设你使用的是json&#x…...

ChatGPT聊天机器人数据隐私和安全问题

ChatGPT是否安全使用&#xff1f; 是的&#xff0c;ChatGPT是安全的&#xff0c;因为它无法对你或你的计算机造成任何直接损害。由于网页浏览器和智能手机操作系统都使用了沙箱技术&#xff0c;因此ChatGPT无法访问你设备的其余部分。换句话说&#xff0c;当你使用ChatGPT应用程…...

MyBatis三个经典问题

1. Mybatis的执行流程 MyBatis 是一个流行的 Java 持久化框架&#xff0c;提供了对象关系映射 (ORM) 和 SQL 映射的功能&#xff0c;使开发者能够更加方便地与数据库交互。MyBatis 的执行流程大致如下&#xff1a; 配置阶段: 加载配置文件: MyBatis 通过读取配置文件&#xff…...

JavaEE+springboot教学仪器设备管理系统o9b00-springmvc

本文旨在设计一款基于Java技术的教学仪器设备销售网站&#xff0c;以提高网站性能、功能完善、用户体验等方面的优势&#xff0c;解决现有教学仪器设备销售网站的问题&#xff0c;并为广大教育工作者和学生提供便捷的教学仪器设备销售渠道。本文首先介绍了Java技术的相关基础知…...

Java项目:37 springboot003图书个性化推荐系统的设计与实现

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 springboot003图书个性化推荐系统的设计与实现 管理员&#xff1a;首页、个人中心、学生管理、图书分类管理、图书信息管理、图书预约管理、退…...

mysql 8 修改账号密码

一 进入Mysql bin目录 cmd 运行&#xff08;跳过密码&#xff09;&#xff0c;运行完不要关闭 mysqld --console --skip-grant-tables --shared-memory 二 新打开一个cmd mysql bin 目录下登录&#xff0c;密码输入时&#xff0c;直接回车 mysql -uroot -p 三 修改密码 m…...

拜占庭将军问题与区块链

文章目录 拜占庭将军问题问题背景问题的现实意义将军-副官模型三将军问题四将军问题3m将军问题 口头消息算法基本假设方法介绍正确性证明 签名消息算法 区块链区块链是什么区块链对于拜占庭将军问题的解决方法工作量证明奖励机制最长链原则小结 区块链的意义 总结 拜占庭将军问…...

字节跳动热门的前端开源项目

字节跳动开源官网 Arco Dsign Arco Design 是一套设计系统&#xff0c;主要服务于字节跳动旗下中后台产品的体验设计和技术实现。它的目标在于帮助设计师与开发者解放双手、提升工作效率&#xff0c;并高质量地打造符合业务规范的中后台应用。它拥有系统的设计规范和资源&…...

uniapp+vue基于Android的图书馆借阅系统qb4y3-nodejs-php-pyton

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 框架支持:springboot/django/php/Ssm/flask/express均支持 前端开发:vue 语言&#xff1a;pythonjavanode.jsphp均支持 运行软件:idea/eclip…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...