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

2024-05-01 03:28
文章标签 服务器 制作 结构 threejs 冷却 机房

本文主要是介绍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代码，一个简单的机房数字孪生场景就做好了，如果需要源码可以在评论区留下邮箱，也可以私信一起交流学习。

这篇关于Threejs制作服务器机房冷却结构的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/950615。

相关文章

服务器集群同步时间手记

服务器集群同步时间手记

1.时间服务器配置（必须root用户） （1）检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 （2）修改ntp配置文件 [r
阅读更多...
usaco 1.3 Mixing Milk (结构体排序 qsort) and hdu 2020(sort)

usaco 1.3 Mixing Milk (结构体排序 qsort) and hdu 2020(sort)

到了这题学会了结构体排序 于是回去修改了 1.2 milking cows 的算法~ 结构体排序核心： 1.结构体定义 struct Milk{int price;int milks;}milk[5000]; 2.自定义的比较函数，若返回值为正，qsort 函数判定a>b ；为负，a<b；为0，a==b； int milkcmp(const void *va,c
阅读更多...
Linux服务器Java启动脚本

Linux服务器Java启动脚本

Linux服务器Java启动脚本 1、初版2、优化版本3、常用脚本仓库 本文章介绍了如何在Linux服务器上执行Java并启动jar包， 通常我们会使用nohup直接启动，但是还是需要手动停止然后再次启动， 那如何更优雅的在服务器上启动jar包呢，让我们一起探讨一下吧。 1、初版 第一个版本是常用的做法，直接使用nohup后台启动jar包， 并将日志输出到当前文件夹n
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
速盾：直播 cdn 服务器带宽？

速盾：直播 cdn 服务器带宽？

在当今数字化时代，直播已经成为了一种非常流行的娱乐和商业活动形式。为了确保直播的流畅性和高质量，直播平台通常会使用 CDN（Content Delivery Network，内容分发网络）服务器来分发直播流。而 CDN 服务器的带宽则是影响直播质量的一个重要因素。下面我们就来探讨一下速盾视角下的直播 CDN 服务器带宽问题。 一、直播对带宽的需求 高清视频流 直播通常需要传输高清视频
阅读更多...
OpenCV结构分析与形状描述符（11）椭圆拟合函数fitEllipse()的使用

OpenCV结构分析与形状描述符（11）椭圆拟合函数fitEllipse()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C++11 算法描述 围绕一组2D点拟合一个椭圆。 该函数计算出一个椭圆，该椭圆在最小二乘意义上最好地拟合一组2D点。它返回一个内切椭圆的旋转矩形。使用了由[90]描述的第一个算法。开发者应该注意，由于数据点靠近包含的 Mat 元素的边界，返回的椭圆/旋转矩形数据
阅读更多...
一种改进的red5集群方案的应用、基于Red5服务器集群负载均衡调度算法研究

一种改进的red5集群方案的应用、基于Red5服务器集群负载均衡调度算法研究

转自： 一种改进的red5集群方案的应用： http://wenku.baidu.com/link?url=jYQ1wNwHVBqJ-5XCYq0PRligp6Y5q6BYXyISUsF56My8DP8dc9CZ4pZvpPz1abxJn8fojMrL0IyfmMHStpvkotqC1RWlRMGnzVL1X4IPOa_  基于Red5服务器集群负载均衡调度算法研究 http://ww
阅读更多...
RTMP流媒体服务器 crtmpserver

RTMP流媒体服务器 crtmpserver

http://www.oschina.net/p/crtmpserver crtmpserver又称rtmpd是Evostream Media Server（www.evostream.com）的社区版本采用GPLV3授权 其主要作用为一个高性能的RTMP流媒体服务器，可以实现直播与点播功能多终端支持功能，在特定情况下是FMS的良好替代品。 支持RTMP的一堆协议（RT
阅读更多...
C语言程序设计(选择结构程序设计)

C语言程序设计(选择结构程序设计)

一、关系运算符和关系表达式 1.1关系运算符及其优先次序 ①＜（小于） ②＜＝（小于或等于） ③＞（大于） ④＞＝（大于或等于 ） ⑤＝＝（等于） ⑥！＝（不等于） 说明： 前4个优先级相同，后2个优先级相同，关系运算符的优先级低于算术运算符，关系运算符的优先级高于赋值运算符 1.2关系表达式 用关系运算符将两个表达式（可以是算术表达式或关系表达式，逻辑表达式，赋值表达式，字符
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2