-
Notifications
You must be signed in to change notification settings - Fork 1
/
main_index.html
367 lines (345 loc) · 31.8 KB
/
main_index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- cache 사용하지 않음 -->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- google font fammily -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<!-- fabicon -->
<link rel="icon" href="img/cell.png" type="image/x-icon">
<link href="css/style.css" rel="stylesheet">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- model-viewer script -->
<script type="module" src="https://unpkg.com/@google/model-viewer@1.8.0/dist/model-viewer.min.js"></script>
<script type="module" src="js/cameraControlsModel.js"></script>
<script src="https://kit.fontawesome.com/753c3beb5c.js" crossorigin="anonymous"></script>
<title>세포소기관</title>
</head>
<body>
<model-viewer id="model-viewer" bounds="tight" enable-pan src="3d/model2.glb" camera-controls ar
ar-modes="webxr scene-viewer quick-look" shadow-intensity="0.93" shadow-softness="0.5" exposure="1.43"
environment-image="neutral" poster="poster.webp" shadow-intensity="1" camera-orbit="35.19deg 51.2deg auto"
field-of-view="90deg" auto-rotate>
<div class="container-btn">
<label class="rot-info" for="cb3">AUTO-ROTATION</label>
<input class="tgl tgl-skewed" id="cb3" type="checkbox" onclick="rotationOn(this)" />
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="cb3"></label>
<label class="home-info" for="homebtn">HOME-POSITION</label>
<button class="home-btn" id="homebtn"onclick="returnHome()"><i class="fa-solid fa-house"></i></button>
<button class="help-btn" onclick="showManual()"><i class="fa-solid fa-circle-info"></i></button>
</div>
<button class="Hotspot custom-btn btn-5" slot="hotspot-1"
data-position="189.82302905779858m 2789.911154386773m 1087.5891790401872m"
data-normal="0.06020004289134885m 0.7089052354147348m 0.7027299068898799m"
data-orbit="358.2deg 43.07deg 0.096545582m"
data-target="189.82302905779858m 2789.911154386773m 1087.5891790401872m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">미토콘드리아</div>
</button><button class="Hotspot custom-btn btn-5" slot="hotspot-3"
data-position="-2010.474598868752m 2539.859625085332m 567.0168728252862m"
data-normal="0.8243714798593911m 0.36588555158361036m 0.4319021027232851m"
data-orbit="441.7deg 60.01deg 0.096545582m"
data-target="-2010.474598868752m 2539.859625085332m 567.0168728252862m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">매끈면소포체</div>
</button><button class="Hotspot custom-btn btn-5" slot="hotspot-5"
data-position="1384.6999530336432m 2976.047245262934m 587.7081487509245m"
data-normal="-0.6353111584436935m 0.08657687390360598m -0.7673878920480904m"
data-orbit="384.8deg 54.37deg 0.096545582m"
data-target="1384.6999530336432m 2976.047245262934m 587.7081487509245m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">골지체</div>
</button><button class="Hotspot custom-btn btn-5" slot="hotspot-7"
data-position="-540.0173133248876m 2676.490353155124m 1477.1344298834563m"
data-normal="0.11587049363405208m -0.7425295690009948m 0.6597149898738077m"
data-orbit="355deg 36.21deg 0.096545582m"
data-target="-540.0173133248876m 2676.490353155124m 1477.1344298834563m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">중심체</div>
</button><button class="Hotspot custom-btn btn-5" slot="hotspot-9"
data-position="-73.46750390051312m 2942.3074998069924m 501.8367404936953m"
data-normal="0.20349146384946035m -0.7428547260958062m 0.6377758854468619m"
data-orbit="367.1deg 36.62deg 0.096545582m"
data-target="-73.46750390051312m 2942.3074998069924m 501.8367404936953m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">거친면소포체</div>
</button><button class="Hotspot custom-btn btn-5" slot="hotspot-10"
data-position="-310.82608663327136m 3424.3991649180048m -587.7620966837194m"
data-normal="0.4641933147898059m -0.8341903195890408m 0.2977433075795096m"
data-orbit="338deg 64.45deg 0.096545582m"
data-target="-310.82608663327136m 3424.3991649180048m -587.7620966837194m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">세포핵</div>
</button>
<button class="Hotspot custom-btn btn-5" slot="hotspot-11"
data-position="1161.220724779113m 2957.683147511572m -1619.3635864726914m"
data-normal="0.8509694331780135m -0.4960230804876165m 0.1726618875729841m"
data-orbit="440.1deg 42.67deg 0.096545582m"
data-target="1161.220724779113m 2957.683147511572m -1619.3635864726914m" data-fov="0.01deg"
data-visibility-attribute="visible">
<div class="HotspotAnnotation" onclick="annotationClicked(this)">리보솜</div>
</button>
</model-viewer>
<div id="my_modal">
<div id="modal-text-content"></div>
<a class="modal_close_btn"><i class="fa-solid fa-xmark"></i></a>
</div>
<script>
let explanation_text = {
세포핵: `<div>
<h1>세포핵</h1>
<hr>
<div style="text-align : center;">
<img src="https://t1.daumcdn.net/cfile/tistory/990C43465D9C70B023" width="60%" alt="It's nucleus">
</div>
<br><br>세포핵은 세포내의 기관중 가장 핵심 기관이다.<br>유전자가 변형되지 않게 유지하고 유전자 발현을 조절함으로서 세포의 활성을 조절하며 세포분열과 유전에 관여한다.<br> 공모양 혹은 타원 모양이며, 20~30 마이크로미터의 크기이다. 2층의 핵막으로 둘러싸여 있으며 핵막에는 핵공이라 불리는 구멍이 있고 핵공을 통해서 작은 분자,이온,mRNA 등이 이동한다.<br> 세포핵에 염색체가 있으며, 인,또는 핵소체라고 불리는 소기관이 있다. 핵소체는 단백질, RNA로 구성되어 있으며, 리보솜을 성숙시킨다.
</div>`,
리보솜: `<div>
<h1>리보솜</h1>
<hr><br>
<div style="text-align : center;">
<img src="data:image/jpeg;base64,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" width="60%" alt="It's ribosome">
</div>
<br><br>리보솜,혹은 리보좀은 아미노산을 연결하여 단백질 합성을 담당하는 세포소기관 이다. 1950년대 루마니아 생물학자 게오르그 에밀 팔라데에 의해 최초로 관찰되었다.<br> 리보솜RNA(rRNA)와 리보솜 소단위체, 리보솜 대단위체 등의 단백질로 이루어져 있다. 리보솜은 mRNA의 코돈을 번역하여 tRNA에 연결된 아미노산을 배열하여 단백질을 형성한다. 리보솜은 별도의 막이 없는 세포소기관 이다.<br> 리보솜은 단백질을 합성하는 자유리보솜과 소포체 표면에 붙어서 단백질을 합성하는 ER리보솜 두종류가 있고, 둘은 서로 전환될 수 있다. 원핵세포의 경우 70s리보솜을, 진핵세포의 경우 80s 리보솜을 가지고 있다.
</div>`,
매끈면소포체: `<div>
<h1>매끈면 소포체</h1>
<hr><br>
<div style="text-align : center;">
<img src="http://t1.daumcdn.net/thumb/R659x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fencyclop%2F5459C54A0111860001%3Ft%3D1447985630000" width="60%" alt="It's nucleus">
</div>
<br><br>소포체는 세포 소기관의 일종으로, 크게 거친면 소포체와 매끈면 소포체로 나눈다.<br> 매끈면 소포체는 표면에 리보솜이 없고 핵막에 연결되어 있지 않다. 매끈면 소포체는 주로 지질이나 지방산, 호르몬 등의 스테로이드 합성에 관여하며, 세포 독성의 처리나 칼슘 저장, 탄수화물 대사에도 관여한다.<br> 그렇기 때문에 간이나 근육 세포, 스테로이드를 만드는 세포에서는 매끈면소포체가 잘 발달되어 있다. 매끈면소포체는 넓게 확장되어 있어 중요한 효소와 그 산물의 기능을 촉진시킬 수 있다.
</div>`,
거친면소포체: `<div>
<h1>거친면 소포체</h1>
<hr><br>
<div style="text-align : center;">
<img src="https://pbs.twimg.com/profile_images/1042789322355662849/0VG0zsvf_400x400.jpg" width="60%" alt ="It's Rough ER" >
</div>
<br><br>소포체는 세포 소기관의 일종으로, 크게 거친면 소포체와 매끈면 소포체로 나눈다.<br> 거친면 소포체는 합성된 단백질을 가공 및 운반하는 소포체이다. 핵막과 연결된 겹쳐진 주머니 모양을 하고 있고, 소포체의 표면에 지질과 표면에 리보솜이 붙어 있으며, 붙어 있는 리보솜 때문에 표면이 거칠어 보인다.<br>붙어 있는 리보솜에서 번역된 단백질을 가공하고 수송 소낭을 통해 운반하는 역할을 한다. <br>분비된 단백질은 골지체로 이동해 최종 가공되어 세포 외 배출을 위해 포장된다.
</div>`,
미토콘드리아: `<div>
<h1>미토콘드리아</h1>
<hr><br>
<div style="text-align : center;">
<img src="https://www.ibs.re.kr/dext5data/2021/03/20210309_160058824_02719.jpg" width="60%" alt="It's Mitochondria" alt="It's nucleus">
</div>
<br><br>미토콘드리아는 세포호흡에 의해 유기물의 화학 에너지를 ATP로 바꾸는 세포소기관이다. 미토콘드리아는 세포막과 같이 2중막 구조이며, 자체 DNA를 가지고 있어 세포내 공생설의 증거가 된다.<br> 미토콘드리아는 길이 약 2~6마이크로미터, 직경은 약 0.5 마이크로미터이다. 미토콘드리아는 내막이 구불구불하게 접혀 있는 크리스타 구조를 갖고 있으며, 이를 통해 ATP 생성능력을 높인다. 산화효소, ATP 생성효소, 단백질 수송, 대사물질운송의 기능을 가진 효소를 가지고 있다.<br> 미토콘드리아는 세포의 에너지 요구에 반응하여 DNA를 복제하고 분열한다. 에너지 요구량에 따라 미토콘드리아가 파괴, 불활성화 상태가 되기도 한다
</div>`,
중심체: `<div>
<h1>중심체</h1>
<hr><br>
<div style="text-align : center;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYojCJRH0vfqHLN2YQxvfIKHZZYBolM3Iy9Q&usqp=CAU" width="60%" alt="It's centrosome">
</div>
<br><br>중심체는 세포질 내에 공모양, 혹은 작은 막대모양의 작은 구조물 이다. 주로 세포중심의 핵 근처에 위치하며, 중심립이라 불리는 두개의 소립과 이를 에워싼 중심질로 되어있다. <br>유사분열 초기, 중심체는 둘로 분열하여 핵을 사이에 두고 서로 반대 위치가 될때까지 이동한다. 분열초기, 각 세포의 양극으로 이동하여 방추사 형성에 관여한다
</div>`,
골지체: `<div>
<h1>골지체</h1>
<hr><br>
<div style="text-align : center;">
<img src="https://t1.daumcdn.net/cfile/tistory/247E21385936D5A629" width="60%" alt="It's Golgi Apparatus">
</div>
<br><br>골지체는 대부분의 진핵 세포에서 발견되는, 지질,단백질의 분비에 관여하는 세포소기관이다. <br>1898년 이탈리아 해부학자 카밀로 골지가 발견하고 자신의 이름을 따서 이름을 지었다.<br> 골지체는 지질 및 단백질 등을 받아 들이고 ,또한 적절한 위치로 내보내는 역할을 수행한다. 소포체로부터 나온 소포는 골지장치의 형성면과 융합하여, 소포 내부의 단백질을 골지장치 내부로 전달한다. 단백질은 이후 성숙면으로 보내어져서 변형되게 된다. 단백질이 성숙면에 도달하면 단백질은 소포에 싸여 최종 목적지로 향하게 된다. 소포의 형성은 단백질의 형태 및 단백질에 기술된 목적지의 표식에 따라 달라진다. 형성된 단백질을 세포막으로 옮겨서 세포 밖으로 방출한 뒤에 세포막과 융합된다. 단백질 변형 뿐만 아니라 지질의 세포내 수송에도 관여하며 리소좀 및 소화에 관여하는 세포소기관을 만드는데도 도움을 준다.
</div>`,
}
function modal(id) {
var zIndex = 99999;
var modal = document.getElementById(id);
// 모달 div 뒤에 희끄무레한 레이어
var bg = document.createElement('div');
bg.setStyle({
position: 'fixed',
zIndex: zIndex,
left: '0px',
top: '0px',
width: '100%',
height: '100%',
overflow: 'auto',
// 레이어 색갈은 여기서 바꾸면 됨
backgroundColor: 'rgba(0,0,0,0.5)'
});
bg.classList.add('bg')
document.body.append(bg);
// 닫기 버튼 처리, 시꺼먼 레이어와 모달 div 지우기
modal.querySelector('.modal_close_btn').addEventListener('click', function () {
bg.remove();
modal.style.display = 'none';
});
document.querySelector('.bg').addEventListener('click', function () {
bg.remove();
modal.style.display = 'none';
});
modal.setStyle({
animation: 'fadeIn 1s',
position: 'fixed',
display: 'block',
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
// 시꺼먼 레이어 보다 한칸 위에 보이기
zIndex: zIndex + 1,
// div center 정렬
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
msTransform: 'translate(-50%, -50%)',
webkitTransform: 'translate(-50%, -50%)'
});
}
// Element 에 style 한번에 오브젝트로 설정하는 함수 추가
Element.prototype.setStyle = function (styles) {
for (var k in styles) this.style[k] = styles[k];
return this;
};
const mv = document.querySelector("#model-viewer");
let flag = 0;
const returnHome = () => {
mv.cameraTarget = "auto auto auto";
mv.cameraOrbit = "33.67deg 50.85deg auto";
mv.fieldOfView = "90deg";
flag = 0;
}
let eastCount = 0;
const eastCL = () => {
eastCount += 1;
if (eastCount === 77) {
location.href = "./est.html";
}
}
const showManual = () => {
setTimeout(() => modal('my_modal'), 500);
let str = `<div>
<h2>도움말</h2>
<hr>
<label><strong>| 메뉴얼 |</strong></label>
<div class="manual_info_text">
<label style="width: 100%;">
<i class="fa-solid fa-arrows-spin" style="width: 25px; height: 25px; font-size: 20px; color: black; background-color: transparent; float: left; margin-top: 2px;"></i>
<h5>AUTO-ROTATION 버튼</h5>
<article style="font-size:15px;">
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_rot_on.png" alt="manual_rot_on.png" style="border-radius:5px; width:200px; height: 45px;" />
<img src="./img/manual/manual_rot_off.png" alt="manual_rot_off.png" style="border-radius:5px; width:200px; height: 45px;" />
</label>
<p style="padding-left: 30px; width: 100%;">왼쪽 상단의 토글 버튼을 키고 끔에 따라 모델이 자동으로 회전하는 기능을 키고 끌 수 있습니다. 버튼을 눌러 상태를 변경 시켜보세요!</p>
</article>
</label><br>
<label>
<i class="fa-solid fa-house" style="width: 25px; height: 25px; font-size: 18px; color: black; background-color: transparent; float: left; margin-top: 2px;"></i>
<h5>HOME-POSITION 버튼</h5>
<article style="font-size:15px;">
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_home_position.png" alt="manual_home_position.png" style="border-radius:5px; width:180px; height: 45px;"/>
</label>
<p style="padding-left: 30px; width: 100%;">모델을 둘러보다가 다시 초기의 카메라 위치로 돌아가고 싶다면 HOME-POSITION 버튼을 눌러보세요! 카메라가 원래 화각으로 줌아웃 하며 모델 전체를 볼 수 있습니다!</p>
</article>
</label><br>
<label>
<img src="./img/cell.png" style="width:20px; margin-right: 3px; margin-top: 1px; float: left;"/>
<h5>세포 모델 둘러보기</h5>
<article style="font-size:15px;">
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_model.png" alt="manual_model.png" style="border-radius:5px; width:300px;"/>
</label>
<p style="padding-left: 30px; width: 100%;">메인 페이지에서 모델 위에 떠다니는 세포 소기관 명칭을 클릭하면 원하는 설명으로 자유롭게 이동할 수 있습니다! 모델을 돌려가며 원하는 버튼을 클릭해보세요!</p>
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_expl.png" alt="manual_expl.png" style="border-radius:5px; width:300px;"/>
</label>
<p style="padding-left: 30px; width: 100%;">메인 페이지에서 버튼을 클릭하면 해당하는 소기관의 설명 팝업창이 등장합니다! 스크롤하며 세포 소기관에 대한 설명을 읽으며 깊게 알아보세요!</p>
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_expl_back.png" alt="manual_expl_back.png" style="border-radius:5px; width:300px;"/>
</label>
<p style="padding-left: 30px; width: 100%;">'X' 표시를 누르면 원래 모델이 있는 위치로 돌아와 3d 소기관 모형을 더 가까이서 자세히 보실 수 있습니다! 만약 원래 크기의 모델을 다시 보고 싶다면 소기관의 이름이 써있는 버튼을 한 번 더 누르시거나 HOME-POSITION 버튼을 이용하실 수 있습니다!</p>
</article>
</label><br>
<label>
<i class="fa-solid fa-circle-info" style="width: 25px; height: 25px; font-size: 18px; color: black; background-color: transparent; float: left; margin-top: 3px;"></i>
<h5>도움말 버튼</h5>
<article style="font-size:15px;">
<label style="display: block; text-align: center; margin: 25px 0 30px;">
<img src="./img/manual/manual_infobtn.png" alt="manual_infobtn.png" style="border-radius:5px; width:45px; height: 45px;" onclick="eastCL()"/>
</label>
<label style="padding-left: 30px; width: 100%;">도움말 버튼을 눌러 지금 보고 계신 도움말을 언제든지 볼 수 있습니다! <label style="font-size: 10px; color: grey;">(여기에 무언가가 숨겨ㅈ....윽)</label></label>
</article>
</label><br>
</div>
<br>
<hr>
<label><strong>개발자</strong> | 박준서, 이우진, 이은환, 정성재</label><br>
<label><strong>소스 코드</strong> | <a href="https://github.com/kingsparkdev/organelle3dweb" style="text-decoration:none; color:Royal Blue;">repo (source code)</a></label>
<br><label style="font-weight:lighter;font-size:10px;">© 2022 인천과학고 생물 수행평가 All Rights Reserved</label>
</div>`;
changeContent(str);
}
const annotationClicked = (a) => {
// camera
let ds = a.parentNode.dataset;
mv.cameraTarget = ds.target;
mv.cameraOrbit = ds.orbit;
if (ds.fov !== undefined) mv.fieldOfView = ds.fov;
if (flag === 1) {
flag = 0;
mv.cameraTarget = "auto auto auto";
mv.cameraOrbit = "33.67deg 50.85deg auto";
mv.fieldOfView = "90deg";
} else {
let str = ``;
flag = 1;
setTimeout(() => modal('my_modal'), 500);
// console.log(a.textContent); -> text content;
// 여기에 모달 content 조정할 내용;
clicked = a.textContent;
if (clicked === "세포핵") {
str = explanation_text.세포핵;
}
else if (clicked === "리보솜") {
str = explanation_text.리보솜;
}
else if (clicked === "매끈면소포체") {
str = explanation_text.매끈면소포체;
}
else if (clicked === "거친면소포체") {
str = explanation_text.거친면소포체;
}
else if (clicked === "미토콘드리아") {
str = explanation_text.미토콘드리아;
}
else if (clicked === "중심체") {
str = explanation_text.중심체;
}
else if (clicked === "골지체") {
str = explanation_text.골지체;
}
changeContent(str);
}
}
const rotationOn = (cb) => {
if (cb.checked === true) {
document.getElementById("model-viewer").setAttribute("auto-rotate", "");
} else {
document.getElementById("model-viewer").removeAttribute("auto-rotate");
}
}
const changeContent = (str) => {
document.getElementById("modal-text-content").innerHTML = str;
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>