Threejs制作服务器机房冷却结构

        这节再绘制一个机房的结构，因为内容比较简单，就只使用一个章节来介绍，

先来一张效果图，

需要两个模型：一个冷却设备，一个服务器机箱，我这里是从网上找来的，首先我们搭建一个场景，

 initScene(){this.scene = new THREE.Scene();},initCamera(){this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(200,-100,200);this.camera.lookAt(200,200,0);this.camera.up.set(0, 0, 1);   // <=== spin // around Z-axis},initLight(){//添加两个平行光const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight1.position.set(-300,-300,600)this.scene.add(directionalLight1);const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight2.position.set(600,200,600)this.scene.add(directionalLight2);},initRenderer(){this.renderer = new THREE.WebGLRenderer({ antialias: true });this.container = document.getElementById("container")this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);this.renderer.setClearColor('#FFFFFF', 1.0);this.container.appendChild(this.renderer.domElement);},initControl(){this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度this.controls.target = new THREE.Vector3(200, 200, 0);this.camera.position.set(200, -100, 200);this.camera.lookAt(200, 200, 0);},initAnimate() {requestAnimationFrame(this.initAnimate);this.renderer.render(this.scene, this.camera);},

        然后添加房间，为了效果更真实，我们会创建一个房间，把服务器放在房间里，把冷却塔放在外面，创建方法和mes中的类似，只不过这个不用设计门了，可以直接搭建四堵墙和地板

 floor:{floorWidth:600, floorLength:600,depth:1},wall:{wallWidth:150, wallLength:300,wallHeight:20},offsetValue:200,initFloor(){let floorGeometry = new THREE.BoxGeometry( this.floor.floorWidth,this.floor.floorLength,this.floor.depth);let floorMaterial = new THREE.MeshPhysicalMaterial({color:'#FFFFFF'});let textureFloor = new THREE.TextureLoader().load('/static/images/floor.jpg', function (texture) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;})floorMaterial.map = textureFloorlet floor = new THREE.Mesh( floorGeometry, floorMaterial );floor.name = '地板';floor.position.set(this.floor.floorWidth/2,this.floor.floorLength/2,0)this.scene.add(floor)},//初始化墙壁createCubeWall() {let materialTie = new THREE.MeshPhysicalMaterial({color: '#BBBBBB'});  //前  0xafc0ca :灰色let textureWall = new THREE.TextureLoader().load('/static/images/wall.jpg', function (texture) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;})materialTie.map = textureWalllet wallList = []let wall1 = {width:this.wall.wallLength, height:2, depth:this.wall.wallHeight, angle:0, matArrayB:materialTie, x:this.wall.wallLength/2+this.offsetValue, y:+this.offsetValue, z:this.wall.wallHeight/2, name:"墙面"};let wall2 = {width:this.wall.wallLength, height:2, depth:this.wall.wallHeight, angle:1, matArrayB:materialTie, x:this.wall.wallLength/2+200, y:this.wall.wallWidth+this.offsetValue, z:(this.wall.wallHeight/2), name:"墙面"};let wall3 = {width:this.wall.wallWidth, height:2, depth:this.wall.wallHeight, angle:1.5, matArrayB:materialTie, x:this.offsetValue, y:this.wall.wallWidth/2+this.offsetValue, z:(this.wall.wallHeight/2), name:"墙面"};let wall4 = {width:this.wall.wallWidth, height:2, depth:this.wall.wallHeight, angle:1.5, matArrayB:materialTie, x:this.wall.wallLength+this.offsetValue, y:(this.wall.wallWidth/2)+this.offsetValue, z:(this.wall.wallHeight/2), name:"墙面"};wallList.push(wall1);wallList.push(wall2);wallList.push(wall3);wallList.push(wall4);for(let i=0;i<wallList.length;i++){let cubeGeometry = new THREE.BoxGeometry(wallList[i].width, wallList[i].height, wallList[i].depth);let cube = new THREE.Mesh(cubeGeometry, wallList[i].matArrayB);cube.position.x = wallList[i].x;cube.position.y = wallList[i].y;cube.position.z = wallList[i].z;cube.rotation.z += wallList[i].angle * Math.PI; //-逆时针旋转,+顺时针cube.name = wallList[i].name;this.scene.add(cube);}},

        然后添加两个设备，一个冷却设备，一个服务器主机柜，要注意调整位置，保持一个在房间内一个在房间外，后续会通过冷凝管连接两个设备

initDevice(){const loader = new GLTFLoader()loader.load("/static/models/server.glb", (gltf) => {this.server = gltf.scene;this.server.scale.set(0.3,0.3,0.3);this.server.position.set(300,300,0);this.server.rotation.x = Math.PI/2this.server.rotation.y = Math.PI/2this.scene.add(this.server)   // 加入场景})loader.load("/static/models/tower.glb", (gltf) => {this.tower = gltf.scene;this.tower.scale.set(20,20,20);this.tower.position.set(300,400,30);this.tower.rotation.x = Math.PI/2this.scene.add(this.tower)   // 加入场景})},

添加好设备后，我们就得到这样的场景，

        然后需要添加管道给这两个设备连接起来，并且其中一个为蓝色一个为红色，之前有讲过Threejs绘制管道效果，可以就把那部分拿过来使用，配置好每个坐标点，这里用两个方法一个绘制冷水，一个绘制热水，并且让水流动起来，这部分开发可以参考之前的章节，不过要调整水管的接入点，如果想要直角管，可以在点数组中添加两个拐弯点的坐标，就可以避免后续的点的影响，以达到直角管道的效果。

代码如下：

initColdTube(){const path = new THREE.CatmullRomCurve3([new THREE.Vector3(350, 300, 10),new THREE.Vector3(380, 300, 10),new THREE.Vector3(380, 300, 10),new THREE.Vector3(380, 400, 10),new THREE.Vector3(380, 400, 10),new THREE.Vector3(320, 400, 7),]);let geometry1 = new THREE.TubeGeometry(path, 100, 1, 25, false);let textureLoader = new THREE.TextureLoader();let texture = textureLoader.load('/static/images/cold.png')texture.wrapS = texture.wrapT = THREE.RepeatWrapping;this.coldMaterial = new THREE.MeshBasicMaterial({map:texture,transparent: false,}); //材质对象Materiallet mesh1 = new THREE.Mesh(geometry1, this.coldMaterial); //网格模型对象Meshthis.scene.add(mesh1); //网格模型添加到场景let tubeGeometry2 = new THREE.TubeGeometry(path, 100, 2, 25, false);let tubeMaterial2 = new THREE.MeshPhongMaterial({color: 0xaaaaaa,transparent: true,opacity: 0.5,});let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);this.scene.add(tube2);},initHotTube(){const path = new THREE.CatmullRomCurve3([new THREE.Vector3(300, 300, 10),new THREE.Vector3(230, 300, 10),new THREE.Vector3(230, 300, 10),new THREE.Vector3(230, 300, 53),new THREE.Vector3(230, 300, 53),new THREE.Vector3(230, 400, 53),new THREE.Vector3(230, 400, 53),new THREE.Vector3(270, 400, 53),]);let geometry1 = new THREE.TubeGeometry(path, 100, 1, 25, false);let textureLoader = new THREE.TextureLoader();let texture = textureLoader.load('/static/images/hot.png')texture.wrapS = texture.wrapT = THREE.RepeatWrapping;this.hotMaterial = new THREE.MeshBasicMaterial({map:texture,transparent: false,}); //材质对象Materiallet mesh1 = new THREE.Mesh(geometry1, this.hotMaterial); //网格模型对象Meshthis.scene.add(mesh1); //网格模型添加到场景let tubeGeometry2 = new THREE.TubeGeometry(path, 100, 2, 25, false);let tubeMaterial2 = new THREE.MeshPhongMaterial({color: 0xaaaaaa,transparent: true,opacity: 0.5,});let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);this.scene.add(tube2);},

然后再给服务器和冷却设备添加状态和名字，用上个章节中给产线设备添加名字的方式：

initMachineName(x,y,z,name){//创建设备信息const earthDiv = document.createElement('div');earthDiv.className = "label";earthDiv.innerHTML = "<div style='border:1px #FFFFFF solid;border-radius: 5px;width:90px;padding-left:10px'>" +"<span style='font-size: 12px;color:#FFFFFF'>"+name+"</span><br/>" +"<span style='font-size: 12px;color:#FFFFFF'>运行正常</span><br/>" +"<span style='color:green;font-size: 12px;'>温度18℃</span>" +"</div>";const earthLabel = new CSS2DObject(earthDiv);earthLabel.position.set(x,y,z);//相对于父级元素的位置this.scene.add(earthLabel);this.labelRenderer = new CSS2DRenderer();this.labelRenderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(this.labelRenderer.domElement)//设置样式this.labelRenderer.domElement.style.position = 'fixed';this.labelRenderer.domElement.style.top = '0px';this.labelRenderer.domElement.style.left = '0px';this.labelRenderer.domElement.style.zIndex = '10';//设置层级},

最终效果如下：

机房冷却

这样一共不到250代码，一个简单的机房数字孪生场景就做好了，如果需要源码可以在评论区留下邮箱，也可以私信一起交流学习。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/5401.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

搭建大型分布式服务（三十七）SpringBoot 整合多个kafka数据源-取消限定符

搭建大型分布式服务（三十七）SpringBoot 整合多个kafka数据源-取消限定符

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目&#xff0c;每天处理上亿级的数据的精简小插件&#xff0c;快速上手。 <dependency><groupId>io.github.vipjo…
阅读更多...
Matlab生成txt文件导入到Vivado仿真

Matlab生成txt文件导入到Vivado仿真

Matlab处理数据并将其写入txt文件 %% Txt Generate pre_RS_datadec2bin(simDataIn,8); %将数据转化为8bit的二进制 fidfopen("F:\FPGA\Xilinx_vivado\project\dvbstestbench\dbvs\matlab\pre_RS_data.txt","wt"); for i1:n*nMessages %数据…
阅读更多...
Ubuntu C++ man手册安装及使用

Ubuntu C++ man手册安装及使用

Ubuntu下C++ man手册安装 C++在线文档： http://www.cplusplus.com/reference/ 第一种办法：使用cppman $ sudo apt install cppman 使用方法 第二种办法： 打开网页：GCC mirror sites- GNU Project 点击下图中的突显行链接： Russia, Novosibirsk:
阅读更多...
使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例

使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例

使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例 引言1. UniMRCP和UmcFramework简介2. 准备工作3. unimrcpclient.xml配置文件3.1 定义SIP设置3.2 定义MRCP会话配置文件 4. C代码示例5. 测试和验证6. 故障排查7. 结论8. 参考文献 引言 在多媒体通信…
阅读更多...
小剧场短剧影视小程序源码_后端PHP

小剧场短剧影视小程序源码_后端PHP

项目运行截图 源码贡献 https://githubs.xyz/boot?app42 部署说明 linux/win任选 PHP版本&#xff1a;7.3/7.2&#xff08;测试时我用的7.2要安装sg扩展 &#xff09; 批量替换域名http://video.owoii.com更换为你的 批量替换域名http://120.79.77.163:1更换为你的 这两个…
阅读更多...
微服务之SpringCloud AlibabaSeata处理分布式事务

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 全局事务&#xff1a;…
阅读更多...
【论文阅读】ChipNeMo中的数据集处理

【论文阅读】ChipNeMo中的数据集处理

前面总体学习了《ChipNeMo: Domain-Adapted LLMs for Chip Design》&#xff0c;然后又继续仔细看了论文中的领域适配分词和领域数据微调的预训练检索模型&#xff0c;对于数据集的处理&#xff0c;也需要仔细看一下。 提炼重点&#xff1a;1&#xff09;对于数据集&#xff0…
阅读更多...
第1篇：创建Platform Designer系统

第1篇：创建Platform Designer系统

Q&#xff1a;本期我们开始使用Platform Designer工具创建带IP核的FPGA自定义硬件系统。 A&#xff1a;Platform Designer是集成在Quartus软件里的系统设计工具&#xff0c;名称随着Quartus的不断更新曾命名为SOPC Builder和Qsys。 使用Platform Designer可以添加Quartus已有自…
阅读更多...
安卓数据库SQLite

安卓数据库SQLite

目录 一、SQLite数据库二、SQLiteOpenHelper和SQLiteDatabase2.1 SQLiteOpenHelper2.2 SQLiteDatabase 三、常见数据库使用介绍3.1 创建数据库3.2 插入数据3.3 修改数据&#xff08;升级数据库&#xff09;3.4 删除数据3.5 查询数据3.6 关闭数据库3.7 删除数据库 一、SQLite数据…
阅读更多...
基于uniapp vue3.0 uView 做一个点单页面（包括加入购物车动画和左右联动）

基于uniapp vue3.0 uView 做一个点单页面（包括加入购物车动画和左右联动）

1、实现效果&#xff1a; 下拉有自定义组件&#xff08;商品卡片、进步器、侧边栏等&#xff09;源码 2、左右联动功能 使用scroll-view来做右边的菜单页&#xff0c;title的id动态绑定充当锚点 <scroll-view :scroll-into-view"toView" scroll-with-animation…
阅读更多...
OSPF基本配置

OSPF基本配置

原理概述 OSPF 是一种应用非常广泛的基于链路状态的动态路由协议&#xff0c;它具有区域&#xff08; Area )化的层次结构&#xff0c;扩展性好&#xff0c;收敛速度快&#xff0c;适合部署在各种规模的网络上。 在 OSPF 中&#xff0c;每台路由器都必须有一个 Router-I…
阅读更多...
仓储机器人确实蛮卷的~

仓储机器人确实蛮卷的~

导语 大家好&#xff0c;我是智能仓储物流技术研习社的社长&#xff0c;老K。专注分享智能仓储物流技术、智能制造等内容。 新书《智能物流系统构成与技术实践》 视频来源于Agilox。 仓储机器人&#xff0c;无疑是现代物流业的一大亮点。它们小巧灵活&#xff0c;却能承担起繁重…
阅读更多...
线上线下交友陪玩，支持小程序/app/h5三端打包，源码搭建！

线上线下交友陪玩，支持小程序/app/h5三端打包，源码搭建！

社交APP定制开发的好处&#xff1a; 社交APP定制开发能够根据用户需求进行个性化定制&#xff0c;满足用户对于社交功能的特殊需求。不同用户对社交的理解和需求各不相同&#xff0c;定制开发可以根据用户的要求&#xff0c;提供更加个性化和专属的社交功能&#xff0c;为用户…
阅读更多...
Zapier 与生成式 AI 的自动化（一）

Zapier 与生成式 AI 的自动化（一）

原文&#xff1a;zh.annas-archive.org/md5/057fe0c351c5365f1188d1f44806abda 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 当组织处理手动和重复性任务时&#xff0c;生产力会遇到重大问题。Zapier 处于无代码运动的前沿&#xff0c;提供了一种先进的工具&a…
阅读更多...
Flutter运行项目一直：running gradle task

Flutter运行项目一直：running gradle task

大体原因就是访问国外的资源由于网络等原因导致访问失败&#xff0c;解决方法就是换成国内的源 修改项目的android/build.gradle 文件&#xff0c;将里面的 google() mavenCentral()替换为 maven {allowInsecureProtocol trueurl https://maven.aliyun.com/repository/googl…
阅读更多...
SpringCloud学习笔记(二)Ribbon负载均衡、Nacos注册中心、Nacos与Eureka的区别

SpringCloud学习笔记(二)Ribbon负载均衡、Nacos注册中心、Nacos与Eureka的区别

文章目录 4 Ribbon负载均衡4.1 负载均衡原理4.2 源码解读4.3 负载均衡策略4.3.1 内置的负载均衡策略4.3.2 自定义负载均衡策略4.3.2.1 方式一&#xff1a;定义IRule4.3.2.2 方式二&#xff1a;配置文件 4.4 饥饿加载 5 Nacos注册中心5.1 认识和安装Nacos5.2 服务注册到Nacos5.3…
阅读更多...
STM32 电源控制PWR

STM32 电源控制PWR

一、PWR电源控制 1.1 PWR&#xff08;Power Control&#xff09; PWR负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能 可编程电压监测器&#xff08;PVD&#xff09;可以监控VDD电源电压&#xff0c;当VDD下降到PVD阀值以下或上升到…
阅读更多...
Postgresql 从小白到高手 十一 ：数据迁移ETL方案

Postgresql 从小白到高手 十一 ：数据迁移ETL方案

文章目录 Postgresql 数据迁移ETL方案1、Pg 同类型数据库2 、Pg 和 不同数据库 Postgresql 数据迁移ETL方案 1、Pg 同类型数据库 备份 : pg_dump -U username -d dbname -f backup.sql插入数据&#xff1a; psql -U username -d dbname -f backup.sqlpg_restore -U username…
阅读更多...
基于PCIE4C的数据传输（三）——使用遗留中断与MSI中断

基于PCIE4C的数据传输（三）——使用遗留中断与MSI中断

本文继续基于PCIE4C IP核实现主机&#xff08;RHEL 8.9&#xff09;与FPGA&#xff08;Xilinx UltrascaleHBM VCU128开发板&#xff09;间DMA数据传输时的中断控制。本文分为三个部分&#xff1a;FPGA设计、驱动程序设计、上板测试。 FPGA设计 基于PCIE4C的数据传输&#xff0…
阅读更多...
聚醚醚酮（Polyether Ether Ketone）PEEK在粘接使用时可以使用UV胶水吗？要注意哪些事项？

聚醚醚酮（Polyether Ether Ketone）PEEK在粘接使用时可以使用UV胶水吗？要注意哪些事项？

一般情况下&#xff0c;聚醚醚酮&#xff08;Polyether Ether Ketone&#xff0c;PEEK&#xff09;是一种难以黏附的高性能工程塑料&#xff0c;而UV胶水通常不是与PEEK进行粘接的首选方法。PEEK表面的化学性质和高温性能使得它对常规胶水的附着性较低。然而&#xff0c;有一些…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023