16 |
17 | Loading HTML,CSS,JS...
18 |
19 |
20 |
21 |
23 |
24 |
25 | DATACENTER DEMO
22 |
26 |
29 |
30 |
39 |
40 | text
27 | 28 |
32 | 
33 | 
34 | 
35 | 
37 |
41 |
134 |
135 |
42 |
88 |
132 |
133 |
136 | 
138 |
139 |
140 | 24.3℃ 32%
137 |
138 |
141 | 
142 |
143 |
144 |
145 |
142 |
146 |
162 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/src/index-chart.ts:
--------------------------------------------------------------------------------
1 | // Import the echarts core module, which provides the necessary interfaces for using echarts.
2 | import * as echarts from 'echarts/core'
3 | // Import bar charts, all suffixed with Chart
4 | import { BarChart, RadarChart, HeatmapChart } from 'echarts/charts'
5 | // Import the tooltip, title, rectangular coordinate system, dataset and transform components
6 | // all suffixed with Component
7 | import {
8 | TitleComponent,
9 | TooltipComponent,
10 | GridComponent,
11 | DatasetComponent,
12 | TransformComponent,
13 | VisualMapComponent,
14 | LegendComponent
15 | } from 'echarts/components'
16 | // Features like Universal Transition and Label Layout
17 | import { LabelLayout, UniversalTransition } from 'echarts/features'
18 | // Import the Canvas renderer
19 | // Note that introducing the CanvasRenderer or SVGRenderer is a required step
20 | import { CanvasRenderer } from 'echarts/renderers'
21 |
22 | // Register the required components
23 | echarts.use([
24 | TitleComponent,
25 | TooltipComponent,
26 | GridComponent,
27 | DatasetComponent,
28 | TransformComponent,
29 | BarChart,
30 | RadarChart,
31 | HeatmapChart,
32 | LabelLayout,
33 | UniversalTransition,
34 | CanvasRenderer,
35 | VisualMapComponent,
36 | LegendComponent
37 | ])
38 |
39 | // https://echarts.apache.org/examples/en/editor.html?c=radar&lang=ts
40 | const chart1Ele = document.getElementById('chart1')
41 | if (chart1Ele === null) {
42 | throw new Error('#chart1 element dont exist.')
43 | }
44 | const chart1 = echarts.init(chart1Ele, 'dark')
45 | const option1 = {
46 | backgroundColor: 'rgba(255,255,255,0)',
47 | radar: {
48 | radius: '55%',
49 | indicator: [
50 | { name: 'Price', max: 100 },
51 | { name: 'CPU', max: 100 },
52 | { name: 'Memory', max: 100 },
53 | { name: 'RAM', max: 100 },
54 | { name: 'GPU', max: 100 },
55 | { name: 'Power', max: 100 }
56 | ]
57 | },
58 | series: [
59 | {
60 | type: 'radar',
61 | symbolSize: 2,
62 | data: [
63 | {
64 | value: [100, 20, 30, 50, 20, 10]
65 | }
66 | ],
67 | itemStyle: {
68 | color: '#57cf48'
69 | },
70 | areaStyle: {
71 | opacity: 0.6
72 | }
73 | }
74 | ]
75 | }
76 | chart1.setOption(option1)
77 |
78 | // https://echarts.apache.org/examples/en/editor.html?c=bar-stack&lang=ts
79 | const option2 = {
80 | backgroundColor: 'rgba(255,255,255,0)',
81 | tooltip: {
82 | trigger: 'axis',
83 | axisPointer: {
84 | type: 'shadow'
85 | }
86 | },
87 | legend: {},
88 | grid: {
89 | left: '3%',
90 | right: '4%',
91 | bottom: '3%',
92 | top: '80',
93 | containLabel: true
94 | },
95 | xAxis: [
96 | {
97 | type: 'category',
98 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
99 | }
100 | ],
101 | yAxis: [
102 | {
103 | type: 'value'
104 | }
105 | ],
106 | series: [
107 | {
108 | name: 'Direct',
109 | type: 'bar',
110 | emphasis: {
111 | focus: 'series'
112 | },
113 | data: [320, 332, 301, 334, 390, 330, 320]
114 | },
115 | {
116 | name: 'Email',
117 | type: 'bar',
118 | stack: 'Ad',
119 | emphasis: {
120 | focus: 'series'
121 | },
122 | data: [120, 132, 101, 134, 90, 230, 210]
123 | },
124 | {
125 | name: 'Union Ads',
126 | type: 'bar',
127 | stack: 'Ad',
128 | emphasis: {
129 | focus: 'series'
130 | },
131 | data: [220, 182, 191, 234, 290, 330, 310]
132 | },
133 | {
134 | name: 'Video Ads',
135 | type: 'bar',
136 | stack: 'Ad',
137 | emphasis: {
138 | focus: 'series'
139 | },
140 | data: [150, 232, 201, 154, 190, 330, 410]
141 | },
142 | {
143 | name: 'Search Engine',
144 | type: 'bar',
145 | data: [862, 1018, 964, 1026, 1679, 1600, 1570],
146 | emphasis: {
147 | focus: 'series'
148 | },
149 | markLine: {
150 | lineStyle: {
151 | type: 'dashed'
152 | },
153 | data: [[{ type: 'min' }, { type: 'max' }]]
154 | }
155 | },
156 | {
157 | name: 'Baidu',
158 | type: 'bar',
159 | barWidth: 5,
160 | stack: 'Search Engine',
161 | emphasis: {
162 | focus: 'series'
163 | },
164 | data: [620, 732, 701, 734, 1090, 1130, 1120]
165 | },
166 | {
167 | name: 'Google',
168 | type: 'bar',
169 | stack: 'Search Engine',
170 | emphasis: {
171 | focus: 'series'
172 | },
173 | data: [120, 132, 101, 134, 290, 230, 220]
174 | },
175 | {
176 | name: 'Bing',
177 | type: 'bar',
178 | stack: 'Search Engine',
179 | emphasis: {
180 | focus: 'series'
181 | },
182 | data: [60, 72, 71, 74, 190, 130, 110]
183 | },
184 | {
185 | name: 'Others',
186 | type: 'bar',
187 | stack: 'Search Engine',
188 | emphasis: {
189 | focus: 'series'
190 | },
191 | data: [62, 82, 91, 84, 109, 110, 120]
192 | }
193 | ]
194 | }
195 | const chart2Ele = document.getElementById('chart2')
196 | if (chart2Ele === null) {
197 | throw new Error('#chart2 element dont exist.')
198 | }
199 | const chart2 = echarts.init(chart2Ele, 'dark')
200 | chart2.setOption(option2)
201 |
202 | // https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian&lang=ts
203 | const hours = [
204 | '12a', '1a', '2a', '3a', '4a', '5a', '6a',
205 | '7a', '8a', '9a', '10a', '11a',
206 | '12p', '1p', '2p', '3p', '4p', '5p',
207 | '6p', '7p', '8p', '9p', '10p', '11p'
208 | ]
209 |
210 | const days = [
211 | 'Saturday', 'Friday', 'Thursday',
212 | 'Wednesday', 'Tuesday', 'Monday', 'Sunday'
213 | ]
214 |
215 | const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
216 | .map(function (item) {
217 | let last: number | string = '-'
218 | if (item[2] !== null) {
219 | last = item[2]
220 | }
221 | return [item[1], item[0], last]
222 | })
223 |
224 | const option3 = {
225 | backgroundColor: 'rgba(255,255,255,0)',
226 | tooltip: {
227 | position: 'top'
228 | },
229 | grid: {
230 | height: '50%',
231 | top: '10%',
232 | left: '80'
233 | },
234 | xAxis: {
235 | type: 'category',
236 | data: hours,
237 | splitArea: {
238 | show: true
239 | }
240 | },
241 | yAxis: {
242 | type: 'category',
243 | data: days,
244 | splitArea: {
245 | show: true
246 | }
247 | },
248 | visualMap: {
249 | min: 0,
250 | max: 10,
251 | calculable: true,
252 | orient: 'horizontal',
253 | left: 'center',
254 | bottom: '15%'
255 | },
256 | series: [
257 | {
258 | name: 'Punch Card',
259 | type: 'heatmap',
260 | data: data,
261 | label: {
262 | show: true
263 | },
264 | emphasis: {
265 | itemStyle: {
266 | shadowBlur: 10,
267 | shadowColor: 'rgba(0, 0, 0, 0.5)'
268 | }
269 | }
270 | }
271 | ]
272 | }
273 | const chart3Ele = document.getElementById('chart3')
274 | if (chart3Ele === null) {
275 | throw new Error('#chart3 element dont exist.')
276 | }
277 | const chart3 = echarts.init(chart3Ele, 'dark')
278 | chart3.setOption(option3)
279 |
280 | export function updateChart1 (): void {
281 | option1.series[0].data[0].value.forEach((value, index) => {
282 | option1.series[0].data[0].value[index] = 20 + 80 * Number(Math.random().toFixed(2))
283 | })
284 | chart1.setOption(option1)
285 | }
286 |
287 | export function updateChart2 (): void {
288 | chart2.setOption(option2)
289 | chart2.resize()
290 | }
291 |
292 | export function updateChart3 (): void {
293 | chart3.setOption(option3)
294 | chart3.resize()
295 | }
296 |
--------------------------------------------------------------------------------
/static/images/water.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import './common/global_setting'
2 | import { Box3, BoxGeometry, Group, Mesh, MeshBasicMaterial, Object3D, Vector3 } from 'three'
3 | import BoxHelperWrap from './common/BoxHelperWrap'
4 | import Events from './common/Events'
5 | import Object3DWrap from './common/Object3DWrap'
6 | import Space from './common/Space'
7 | import { findParent, checkNameIncludes, findChildren, getScreenPosition, initCapacityMaterial, detectWebGLContext } from './common/utils'
8 | import { updateChart1, updateChart2, updateChart3 } from './index-chart'
9 | import Heatmap from './common/Heatmap'
10 | import { Modal } from 'bootstrap'
11 | import { IPoint } from './type'
12 |
13 | if (detectWebGLContext() === false) {
14 | alert('Your browser or device may not support WebGL.')
15 | }
16 |
17 | const element = document.getElementById('3d-space')
18 | if (element === null) {
19 | throw new Error('#3d-space element dont exist.')
20 | }
21 | const space = new Space(element)
22 | const boxHelperWrap = new BoxHelperWrap()
23 | const rackList: Object3D[] = []
24 | const iconActiveBg = 'bg-blue-700/60'
25 | let computerScreenObject3DWrap: Object3DWrap|null = null
26 | let rackTemperatureObject3DWrap: Object3DWrap|null = null
27 | let selectRackWrap: Object3DWrap|null = null
28 | let selectServerWrap: Object3DWrap|null = null
29 |
30 | // load 3d model.
31 | space.load('./static/3d/datacenter.glb').then(() => {
32 | const ele = document.getElementById('loading-tips')
33 | if (ele !== null) {
34 | ele.style.display = 'none'
35 | }
36 |
37 | space.setCameraOriginPosition(new Vector3(21, 20, 8))
38 |
39 | const objectWrapList = space.getObject3DWrapList()
40 |
41 | objectWrapList.forEach(item => {
42 | if (checkIsRack(item.object3D)) {
43 | rackList.push(item.object3D)
44 | }
45 | })
46 | space.initRaycaster(rackList)
47 |
48 | boxHelperWrap.addToScene(space.scene)
49 | triggerAutoRotate()
50 | computerScreenObject3DWrap = space.getObject3DWrapByFullName('Scene/datacenterglb/RootNode/room_main/screen')
51 | rackTemperatureObject3DWrap = space.getObject3DWrapByFullName('Scene/datacenterglb/RootNode/room_main/rackB_5')
52 | }).catch((err) => {
53 | console.error(err)
54 | })
55 |
56 | function checkIsRack (obj: Object3D): boolean {
57 | return checkNameIncludes(obj, 'rack')
58 | }
59 |
60 | function checkIsRackDoor (obj: Object3D): boolean {
61 | return checkNameIncludes(obj, 'door')
62 | }
63 |
64 | function checkIsServer (obj: Object3D): boolean {
65 | return checkNameIncludes(obj, 'server')
66 | }
67 |
68 | function getServerList (rack: Object3D): Object3D[] {
69 | return rack.children.filter(checkIsServer)
70 | }
71 |
72 | let heatMap: Heatmap|null = null
73 | function initHeatmap (): void {
74 | heatMap = new Heatmap()
75 | const dataList: IPoint[] = []
76 | rackList.forEach(r => {
77 | const position = new Vector3()
78 | position.setFromMatrixPosition(r.matrixWorld)
79 | dataList.push({
80 | value: Math.max(Math.random() * 30 + 2, 15),
81 | x: position.x,
82 | y: position.z
83 | })
84 | })
85 |
86 | heatMap.init(space.scene, space.scene)
87 | heatMap.setData(dataList)
88 | }
89 |
90 | const updateRightInfo = (() => {
91 | let oldRack: Object3DWrap
92 | let oldServer: Object3DWrap
93 | const rackCardEle = document.getElementById('rackCard')
94 | const rackNameEle = document.getElementById('rackName')
95 | const serverCardEle = document.getElementById('serverCard')
96 | const serverNameEle = document.getElementById('serverName')
97 | if (rackCardEle === null || rackNameEle === null || serverCardEle === null || serverNameEle === null) {
98 | throw new Error('#rackCard or #rackName or #serverCard or #serverName dont exist.')
99 | }
100 | return (rackWrap: Object3DWrap|null, serverWrap?: Object3DWrap) => {
101 | if (rackWrap !== null) {
102 | rackCardEle.classList.remove('hidden')
103 | rackNameEle.innerText = rackWrap.object3D.name
104 | if (rackWrap !== oldRack) {
105 | updateChart2()
106 | oldRack = rackWrap
107 | }
108 | } else {
109 | rackCardEle.classList.add('hidden')
110 | }
111 |
112 | if (serverWrap !== undefined && serverWrap !== null) {
113 | serverCardEle.classList.remove('hidden')
114 | serverNameEle.innerText = serverWrap.object3D.name
115 | if (serverWrap !== oldServer) {
116 | updateChart3()
117 | oldServer = serverWrap
118 | }
119 | } else {
120 | serverCardEle.classList.add('hidden')
121 | }
122 | }
123 | })()
124 |
125 | // show popover info when mouse hover on rack or server
126 | const updatePopoverContent = (() => {
127 | let oldName: string
128 | const popoverEle = document.getElementById('popover-content')
129 | const popoverTextEle = document.getElementById('popover-text')
130 | if (popoverEle === null || popoverTextEle === null) {
131 | throw new Error('#popover-content or #popover-text dont exist.')
132 | }
133 | return (name: string|null) => {
134 | const event = space.mouseEvent
135 | if (name !== null) {
136 | popoverEle.classList.remove('hidden')
137 | popoverEle.style.top = `${event.y + 10}px`
138 | popoverEle.style.left = `${event.x + 10}px`
139 | if (popoverTextEle.innerText !== name) {
140 | popoverTextEle.innerText = name
141 | }
142 | if (oldName !== name) {
143 | updateChart1()
144 | oldName = name
145 | }
146 | } else {
147 | popoverEle.classList.add('hidden')
148 | }
149 | }
150 | })()
151 |
152 | document.getElementById('left-arrow-button')?.addEventListener('click', () => {
153 | space.backToCameraOriginPosition()
154 | // reset raycaster list to rack list
155 | space.setRaycasterObjects(rackList)
156 | updateRightInfo(null)
157 | // reset rack open door
158 | if (selectRackWrap !== null) {
159 | const door = findChildren(selectRackWrap.object3D, checkIsRackDoor)
160 | if (door !== null) {
161 | const doorWrap = space.getObject3DWrap(door)
162 | doorWrap?.undoMove()
163 | }
164 | selectRackWrap = null
165 | }
166 |
167 | if (selectServerWrap !== null) {
168 | selectServerWrap.undoMove()
169 | selectServerWrap = null
170 | }
171 | })
172 |
173 | const rotateBtnEle = document.getElementById('rotate-button')
174 | function triggerAutoRotate (): void {
175 | space.orbit.autoRotate = !space.orbit.autoRotate
176 | if (space.orbit.autoRotate) {
177 | space.emitter.on(Events.animate, space.orbit.update)
178 | rotateBtnEle?.classList.add(iconActiveBg)
179 | } else {
180 | space.emitter.off(Events.animate, space.orbit.update)
181 | rotateBtnEle?.classList.remove(iconActiveBg)
182 | }
183 | }
184 |
185 | rotateBtnEle?.addEventListener('click', triggerAutoRotate)
186 |
187 | const temperatureBtnEle = document.getElementById('temperature-button')
188 | function triggerTemperature (): void {
189 | if (heatMap === null) {
190 | initHeatmap()
191 | temperatureBtnEle?.classList.add(iconActiveBg)
192 | } else {
193 | const flag = !heatMap.getVisible()
194 | heatMap.setVisible(flag)
195 | if (flag) {
196 | temperatureBtnEle?.classList.add(iconActiveBg)
197 | } else {
198 | temperatureBtnEle?.classList.remove(iconActiveBg)
199 | }
200 | }
201 | }
202 |
203 | temperatureBtnEle?.addEventListener('click', triggerTemperature)
204 |
205 | const capacityBtnEle = document.getElementById('capacity-button')
206 |
207 | const colorObj = {
208 | safe: 'rgb(139,195,74)',
209 | much: 'rgb(255,235,59)',
210 | over: 'rgb(255,152,0)',
211 | dangerous: 'rgb(244,67,54)'
212 | }
213 | let capacityFlag = false
214 | const rackModelObject3DMap = new Map()
215 | function initRackCapacityObject3D (obj: Object3D): Group {
216 | const group = new Group()
217 | group.visible = false
218 | const box3 = new Box3()
219 | const b = box3.setFromObject(obj)
220 | const x = b.max.x - b.min.x
221 | const y = b.max.y - b.min.y
222 | const z = b.max.z - b.min.z
223 |
224 | const boxGeo = new BoxGeometry(x, y, z)
225 | const boxMat = new MeshBasicMaterial({ color: 0xcccccc, opacity: 0.4, transparent: true })
226 | const box = new Mesh(boxGeo, boxMat)
227 | group.add(box)
228 |
229 | const capacityValue = Math.min(0.95, 0.2 + Math.random())
230 | let capacityColor
231 | if (capacityValue < 0.55) {
232 | capacityColor = colorObj.safe
233 | } else if (capacityValue < 0.7) {
234 | capacityColor = colorObj.much
235 | } else if (capacityValue < 0.8) {
236 | capacityColor = colorObj.over
237 | } else {
238 | capacityColor = colorObj.dangerous
239 | }
240 | const splitValue = b.min.y + y * (capacityValue - 0.5)
241 | const subBoxMat = initCapacityMaterial(splitValue, capacityColor)
242 | const subBox = new Mesh(boxGeo, subBoxMat)
243 | subBox.scale.set(0.9, 0.9, 0.9)
244 | group.add(subBox)
245 |
246 | obj.parent?.add(group)
247 | group.position.copy(obj.position)
248 | group.rotation.copy(obj.rotation)
249 | return group
250 | }
251 | function triggerCapacity (): void {
252 | capacityFlag = !capacityFlag
253 | if (capacityFlag) {
254 | capacityBtnEle?.classList.add(iconActiveBg)
255 | } else {
256 | capacityBtnEle?.classList.remove(iconActiveBg)
257 | }
258 | rackList.forEach(rack => {
259 | let modelObj = rackModelObject3DMap.get(rack.uuid)
260 | if (modelObj === undefined) {
261 | modelObj = {
262 | origin: rack,
263 | capacity: initRackCapacityObject3D(rack)
264 | }
265 | rackModelObject3DMap.set(rack.uuid, modelObj)
266 | }
267 | modelObj.capacity.visible = capacityFlag
268 | modelObj.origin.visible = !capacityFlag
269 | })
270 | }
271 | capacityBtnEle?.addEventListener('click', triggerCapacity)
272 | window.addEventListener('resize', () => space.resize())
273 |
274 | function clickRack (obj: Object3D): void {
275 | const rackWrap = space.getObject3DWrap(obj)
276 | if (rackWrap !== null) {
277 | updateRightInfo(rackWrap)
278 | }
279 | }
280 |
281 | function clickServer (obj: Object3D): void {
282 | const serverWrap = space.getObject3DWrap(obj)
283 | if (serverWrap !== null && selectRackWrap !== null) {
284 | updateRightInfo(selectRackWrap, serverWrap)
285 | }
286 | }
287 |
288 | const openDoorMoveInfo = {
289 | name: 'openDoor',
290 | rotation: {
291 | y: 120
292 | }
293 | }
294 |
295 | function dblclickRack (obj: Object3D): void {
296 | const rackWrap = space.getObject3DWrap(obj)
297 | if (rackWrap !== null) {
298 | selectRackWrap = rackWrap
299 | // rack open door
300 | const door = findChildren(rackWrap.object3D, checkIsRackDoor)
301 | if (door !== null) {
302 | const doorWrap = space.getObject3DWrap(door)
303 | doorWrap?.move(openDoorMoveInfo)
304 | }
305 | // focus rack
306 | space.focus(obj, { offset: { x: 2, y: 1 } })
307 | // update raycaster list ,only can select server inside this rack.
308 | const serverList = getServerList(obj)
309 | space.setRaycasterObjects(serverList)
310 | }
311 | }
312 |
313 | const popupServerMoveInfo = {
314 | name: 'popupServer',
315 | position: {
316 | x: 0.4
317 | }
318 | }
319 | function dblclickServer (obj: Object3D): void {
320 | // focus server
321 | space.focus(obj, { offset: { x: 6, y: 1 } })
322 | const serverWrap = space.getObject3DWrap(obj)
323 | if (serverWrap !== null) {
324 | serverWrap.move(popupServerMoveInfo)
325 | if (selectServerWrap !== null) {
326 | selectServerWrap.undoMove()
327 | }
328 | selectServerWrap = serverWrap
329 | }
330 | }
331 |
332 | const warnIconContainerEle = document.getElementById('warn-icon')
333 | // enable modal
334 | const exampleModalEle = document.getElementById('exampleModal')
335 | if (exampleModalEle !== null && warnIconContainerEle !== null) {
336 | const myModal = new Modal(exampleModalEle)
337 | warnIconContainerEle.addEventListener('click', () => {
338 | // console.log('click event')
339 | myModal.toggle()
340 | })
341 | }
342 |
343 | function updateWarnIconPosition (): void {
344 | if (computerScreenObject3DWrap?.object3D !== undefined && warnIconContainerEle !== null) {
345 | const screenPosition = getScreenPosition(computerScreenObject3DWrap.object3D, space, { y: 2 })
346 | warnIconContainerEle.style.top = `${screenPosition.y}px`
347 | warnIconContainerEle.style.left = `${screenPosition.x}px`
348 | }
349 | }
350 |
351 | const temperatureIconContainerEle = document.getElementById('temperature-icon')
352 |
353 | function updateTemperaturePosition (): void {
354 | if (rackTemperatureObject3DWrap?.object3D !== undefined && temperatureIconContainerEle !== null) {
355 | const screenPosition = getScreenPosition(rackTemperatureObject3DWrap.object3D, space, { y: 1.5, x: 0.9 })
356 | temperatureIconContainerEle.style.top = `${screenPosition.y}px`
357 | temperatureIconContainerEle.style.left = `${screenPosition.x}px`
358 | }
359 | }
360 |
361 | space.emitter.on(Events.orbitChange, () => {
362 | updateWarnIconPosition()
363 | updateTemperaturePosition()
364 | })
365 |
366 | // show loading 3d model progress
367 | space.emitter.on(Events.load.processing, (xhr) => {
368 | const ele = document.getElementById('loading-text')
369 | if (ele !== null) {
370 | const text = `Loading 3d model:${(xhr.loaded / 1024 / 1024).toFixed(2)}MB`
371 | ele.innerText = text
372 | }
373 | })
374 |
375 | space.emitter.on(Events.click.raycaster, (list) => {
376 | console.log('click', list)
377 | if (list.length > 0) {
378 | if (selectRackWrap !== null) {
379 | const server = findParent(list[0].object, checkIsServer)
380 | if (server !== null) {
381 | clickServer(server)
382 | }
383 | } else {
384 | const rack = findParent(list[0].object, checkIsRack)
385 | if (rack !== null) {
386 | clickRack(rack)
387 | }
388 | }
389 | }
390 | })
391 |
392 | space.emitter.on(Events.dblclick.raycaster, (list) => {
393 | console.log('dblclick', list)
394 | if (list.length > 0) {
395 | if (selectRackWrap !== null) {
396 | const server = findParent(list[0].object, checkIsServer)
397 | if (server !== null) {
398 | dblclickServer(server)
399 | }
400 | } else {
401 | const rack = findParent(list[0].object, checkIsRack)
402 | if (rack !== null) {
403 | dblclickRack(rack)
404 | }
405 | }
406 | }
407 | })
408 |
409 | space.emitter.on(Events.mousemove.raycaster, (list) => {
410 | if (selectRackWrap !== null) {
411 | if (list.length > 0) {
412 | const server = findParent(list[0].object, checkIsServer)
413 | if (server !== null) {
414 | boxHelperWrap.attach(server)
415 | updatePopoverContent(server.name)
416 | }
417 | } else {
418 | boxHelperWrap.setVisible(false)
419 | updatePopoverContent(null)
420 | }
421 | } else {
422 | if (list.length > 0) {
423 | const rack = findParent(list[0].object, checkIsRack)
424 | if (rack !== null) {
425 | boxHelperWrap.attach(rack)
426 | updatePopoverContent(rack.name)
427 | }
428 | } else {
429 | boxHelperWrap.setVisible(false)
430 | updatePopoverContent(null)
431 | }
432 | }
433 | })
434 |
--------------------------------------------------------------------------------
/src/common/Space.ts:
--------------------------------------------------------------------------------
1 | import mitt, { Emitter } from 'mitt'
2 | import {
3 | DefaultLoadingManager,
4 | FileLoader,
5 |
6 | LoaderUtils,
7 | Object3D,
8 | PerspectiveCamera,
9 | Raycaster,
10 | Scene,
11 | Vector2,
12 | WebGLRenderer,
13 | Intersection,
14 | Vector3,
15 | Box3,
16 | Sphere,
17 | Quaternion
18 | } from 'three'
19 | import Object3DWrap from './Object3DWrap'
20 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
21 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
22 | import Events from './Events'
23 | import { throttle } from 'lodash-es'
24 | import { Easing, Tween } from '@tweenjs/tween.js'
25 | import { IOffset3 } from '../type'
26 |
27 | // bloom
28 | import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
29 | import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
30 | import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
31 |
32 | interface ISpaceOptions {
33 | orbit?: boolean
34 | }
35 |
36 | interface IFocusOptions{
37 | type?: 'coordinate' | 'radius' // coordinate or radius(default)
38 | duration?: number
39 | offset: IOffset3
40 | }
41 |
42 | export default class Space {
43 | element: HTMLElement
44 | options: ISpaceOptions
45 | renderer: WebGLRenderer
46 | innerWidth: number
47 | innerHeight: number
48 | object3DWrapMap: Map
147 |
160 |
161 |