-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
447 lines (428 loc) · 18.5 KB
/
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
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小说馆</title>
<script src="scripts/three.js"></script>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#music-button{
position: absolute;
top: 20px;
left: 100px;
cursor: pointer;
}
#music-button img{
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div id="bg-music">
<audio src="music/dianxin.ogg" loop autoplay></audio>
</div>
<div id="music-button">
<img id = "music-off" src="img/audio-off.89ea1960.webp" alt="">
<img id = "music-on" src="img/audio-on.5e57c737.webp" alt="">
</div>
<script>
//创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 设置相机高度
camera.position.z = 5;
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );
// 设置背景颜色
renderer.setClearColor(0xaaaaaa, 1)
// 将渲染器加入html
document.body.appendChild( renderer.domElement );
//创建辅助轴模型
var axes = new THREE.AxesHelper(50);
// 将模型添加到场景
// scene.add(axes)
// 创建矩形模型
var plane = new THREE.PlaneGeometry(117,72);
// 创建基础材质
var planeMaterial = new THREE.MeshBasicMaterial();
// 创建纹理对象
var textureloader = new THREE.TextureLoader();
// 加载纹理图片
var bg = textureloader.load("img/book.webp");
// 将纹理叠加到材质上
planeMaterial.map = bg
// 将材质叠加到模型上
var planeMesh = new THREE.Mesh(plane,planeMaterial);
// 移动模型
planeMesh.translateZ(-40);
// 将模型添加到场景
scene.add(planeMesh);
// 创建矩形模型
var pendantBox = new THREE.PlaneGeometry(15,11);
// 创建基础材质
var pendantMaterial = new THREE.MeshBasicMaterial();
// 创建纹理对象
var pendanttexture = new THREE.TextureLoader();
// 加载纹理图片
var pendanttextureload = pendanttexture.load("img/book2.webp");
// 将纹理叠加到材质上
pendantMaterial.map = pendanttextureload;
//png图片透明部分开启
pendantMaterial.transparent = true;
pendantMaterial.opacity = 0;
// 将材质叠加到模型上
var pendantMesh = new THREE.Mesh(pendantBox,pendantMaterial);
// 移动模型
pendantMesh.translateX(4.8);
pendantMesh.translateY(0.7);
pendantMesh.translateZ(-25);
// 将模型添加到场景
scene.add(pendantMesh);
// 创建矩形模型
var pendantLightBox = new THREE.PlaneGeometry(15,11);
// 创建基础材质
var pendantLightMaterial = new THREE.MeshBasicMaterial();
// 创建纹理对象
var pendantLighttexture = new THREE.TextureLoader();
// 加载纹理图片
var pendantLighttextureload = pendantLighttexture.load("img/book2.webp");
// 将纹理叠加到材质上
pendantLightMaterial.map = pendantLighttextureload;
//png图片透明部分开启
pendantLightMaterial.transparent = true;
// 混合模式设置为叠加
pendantLightMaterial.blending = THREE.AdditiveBlending;
// 透明度设置为0
pendantLightMaterial.opacity = 0;
// 将材质叠加到模型上
var pendantLightMesh = new THREE.Mesh(pendantLightBox,pendantLightMaterial);
pendantLightMesh.name = "pendantLight";
// 移动模型
pendantLightMesh.translateX(5);
pendantLightMesh.translateY(6);
pendantLightMesh.translateZ(-30);
// 旋转模型
pendantLightMesh.rotation.x = -0.4;
pendantLightMesh.rotation.y = 0.2;
// 缩放模型
pendantLightMesh.scale.set(0.0,0.0,0.0);
// 将模型添加到场景
scene.add(pendantLightMesh);
// 创建矩形模型
var arrowsBox = new THREE.PlaneGeometry(3,3);
//创建基础材质
var arrowsMaterial = new THREE.MeshBasicMaterial();
// 创建纹理对象
var arrowsTexture = new THREE.TextureLoader();
// 加载纹理图片
var arrowsTextureload = arrowsTexture.load("img/8527e88b-685a-46cd-aec8-4ab73403dce3.webp");
// 将纹理叠加到材质上
arrowsMaterial.map = arrowsTextureload;
// webp图片透明部分开启
arrowsMaterial.transparent = true;
// 将材质叠加到模型上
var arrowsMesh = new THREE.Mesh(arrowsBox,arrowsMaterial);
// 移动模型
arrowsMesh.translateX(3)
arrowsMesh.translateZ(-24)
// 将模型添加到场景
scene.add(arrowsMesh);
// 创建矩形模型
var textplane = new THREE.PlaneGeometry(9,1.8);
// 创建基础材质
var textplaneMaterial = new THREE.MeshBasicMaterial();
// 创建纹理对象
var texttexture = new THREE.TextureLoader();
// 加载纹理图片
var text = textureloader.load("img/xiaoshuoguan.webp");
// 将纹理叠加到材质上
textplaneMaterial.map = text;
// webp图片透明部分开启
textplaneMaterial.transparent = true;
// 将材质叠加到模型上
var textMesh = new THREE.Mesh(textplane,textplaneMaterial);//纹理贴图网格模型
// 移动模型
textMesh.translateX(1.1);
textMesh.translateY(0.5);
textMesh.translateZ(-1.2);
scene.add(textMesh);//平移纹理贴图网格模型
var lightplane = new THREE.PlaneGeometry(12,60);
var lightplaneMaterial = new THREE.MeshBasicMaterial();
var lighttexture = new THREE.TextureLoader();
var light = textureloader.load("img/b9047335-f041-4c4b-a7c3-449fd5d5ff7c.webp");
lightplaneMaterial.map = light;
lightplaneMaterial.blending = THREE.AdditiveBlending;
lightplaneMaterial.transparent = true;
var lightMesh = new THREE.Mesh(lightplane,lightplaneMaterial);
lightMesh.translateX(-10);
lightMesh.translateY(10);
lightMesh.translateZ(-35);
lightMesh.rotation.z = -0.9;
scene.add(lightMesh);
var lightplane2 = new THREE.PlaneGeometry(12,60);
var lightplaneMaterial2 = new THREE.MeshBasicMaterial();
var lighttexture2 = new THREE.TextureLoader();
var light2 = textureloader.load("img/b9047335-f041-4c4b-a7c3-449fd5d5ff7c.webp");
lightplaneMaterial2.map = light2;
lightplaneMaterial2.blending = THREE.AdditiveBlending;
lightplaneMaterial2.transparent = true;
var lightMesh2 = new THREE.Mesh(lightplane2,lightplaneMaterial2);
lightMesh2.translateX(6);
lightMesh2.translateY(10);
lightMesh2.translateZ(-34);
lightMesh2.rotation.z = -0.9;
scene.add(lightMesh2);
var lightplane2 = new THREE.PlaneGeometry(25,50);
var lightplaneMaterial2 = new THREE.MeshBasicMaterial();
var lighttexture2 = new THREE.TextureLoader();
var light2 = textureloader.load("img/b9047335-f041-4c4b-a7c3-449fd5d5ff7c.webp");
lightplaneMaterial2.map = light2;
lightplaneMaterial2.blending = THREE.AdditiveBlending;
lightplaneMaterial2.transparent = true;
var lightMesh2 = new THREE.Mesh(lightplane2,lightplaneMaterial2);
lightMesh2.translateX(25);
lightMesh2.translateY(10);
lightMesh2.translateZ(-33);
lightMesh2.rotation.z = -0.8;
scene.add(lightMesh2);
// 创建关键帧
var inScaleTrack = new THREE.KeyframeTrack('pendantLight.scale', [0, 30], [0.5, 0.5, 0.5, 1, 1, 1]);
var inOpacityTrack = new THREE.KeyframeTrack('pendantLight.material.opacity', [0, 30], [0, 1]);
// 动画持续时间（帧）
var duration = 60;
// 创建剪辑对象
var clip = new THREE.AnimationClip("in", duration, [inScaleTrack,inOpacityTrack]);
// 创建混合器对象
var Mixer = new THREE.AnimationMixer(scene);
// 将剪辑对象放入混合器
var AnimationAction = Mixer.clipAction(clip);
// 设置动画播放速度，默认为1
AnimationAction.timeScale = 30;
// 设置动画循环，只执行一次
AnimationAction.loop = THREE.LoopOnce;
// 动画播放完成后停在最后一帧
AnimationAction.clampWhenFinished = true;
// 储存每个点每一帧移动的量
let moveArrX = [];
let moveArrY = [];
// 储存每个点移动的时间
let moveTime = [];
// 当前时间
let nowTime = 0;
// 每个光点生成时间
let joinTime = [];
// 添加光点模型z（z轴位置），sc（缩放大小），i（y轴范围）
function addDot(z,sc,i = 1){
// 绘制时的时间
joinTime.push(Date.now());
// 绘制的坐标
moveArrX.push(Math.random()*0.02-0.01);
moveArrY.push(Math.random()*0.02-0.01);
// 移动时间为10~20秒
moveTime.push(Math.round(Math.random()*10000+10000));
// 随机x轴为-50~50，y轴默认为-25~25
let randomX = Math.random()*100-50;
let randomY = Math.random()*50-25*i;
var dotPlane = new THREE.PlaneGeometry(1,1);
var dotPlaneMaterial = new THREE.MeshBasicMaterial();
var dotTexture = new THREE.TextureLoader();
var dotTextureload = dotTexture.load("img/d0d14aff-ecee-4449-806c-4a866163a7ce.webp");
dotPlaneMaterial.map = dotTextureload;
dotPlaneMaterial.blending = THREE.AdditiveBlending;
dotPlaneMaterial.transparent = true;
var dotMesh = new THREE.Mesh(dotPlane,dotPlaneMaterial);
dotMesh.translateZ(z);
dotMesh.position.x = randomX*sc;
dotMesh.position.y = randomY*sc;
dotMesh.scale.set(sc,sc,sc);
group1.add(dotMesh);
}
// 创建一个组存放所有光点
let group1 = new THREE.Group();
// 循环创建最上层大光点
for(let i = 0;i<40;i++){
addDot(-39,1.3);
}
// 循环创建小光点
for(let j = 0;j<200;j++){
addDot(-29,0.3,0)
}
// 把组里所有模型添加到场景
scene.add(group1)
// 设置播放音量
var musicVolume = 1;
// 鼠标划过神之眼音效
function pendantMusic(){
// 创建audio标签
let audio = document.createElement("audio");
//audio.src = "music/eye-mouseover.7d883e2b.mp3"
audio.autoplay = true;
// audio的音量
audio.volume = musicVolume;
document.body.appendChild(audio);
// 播放完成时移出标签
audio.addEventListener("ended",function(){
document.body.removeChild(audio);
})
}
let musicButton = document.querySelector("#music-button");
let musicOn = document.querySelector("#music-on");
let musicOff = document.querySelector("#music-off");
let bgMusic = document.querySelector("#bg-music audio");
// 把静音图标隐藏
musicOff.style.display = "none"
// 左上角音乐图标点击事件
function toggle(){
if(musicOff.style.display == "none"){
musicOff.style.display = "block"
musicOn.style.display = "none"
bgMusic.volume = 0;
musicVolume = 0;
}else{
bgMusic.volume = 1;
musicVolume = 1;
bgMusic.play();
musicOff.style.display = "none"
musicOn.style.display = "block"
}
}
musicButton.addEventListener("click",toggle);
// 鼠标移动事件
function mouseEvent(e){
camera.position.x = -(e.offsetX - window.innerWidth/2)/10000
camera.position.y = (e.offsetY - window.innerHeight/2)/4000
// 相机看向原点
camera.lookAt(scene.position);
// 鼠标在屏幕上的坐标
var Sx = e.clientX;
var Sy = e.clientY;
//屏幕坐标转标准设备坐标
var x = ( Sx / window.innerWidth ) * 2 - 1;
var y = -( Sy / window.innerHeight ) * 2 + 1;
var standardVector = new THREE.Vector3(x, y, 0.5);
//标准设备坐标转三维坐标
var worldVector = standardVector.unproject(camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
var ray = worldVector.sub(camera.position).normalize();
//创建射线投射器对象
var raycaster = new THREE.Raycaster(camera.position, ray);
//返回射线选中的对象
var intersects = raycaster.intersectObjects([pendantMesh]);
if (intersects.length > 0) {
if (animationstate) {
// 动画状态不可播放
animationstate = false;
// 取消暂停
AnimationAction.paused = false;
// 播放的速度
AnimationAction.timeScale = 120;
// 播放动画
AnimationAction.play();
// 修改鼠标光标
renderer.domElement.style.cursor = "pointer";
// 创建音效并播放
pendantMusic();
}
}else{
// 暂停播放
AnimationAction.paused = true;
// 播放速度
AnimationAction.timeScale = -50;
// 获取鼠标移出物体时在第几帧
var timing = AnimationAction.time;
// 从第几帧开始播放
AnimationAction.tiem = timing;
// 第几帧结束
clip.duration = 30;
// 取消暂停
AnimationAction.paused = false;
// 动画状态可播放
animationstate = true;
// 修改鼠标光标
renderer.domElement.style.cursor = "default";
}
}
document.body.addEventListener("mousemove",mouseEvent);
function clickEvent(e){
// 鼠标在屏幕上的坐标
var Sx = e.clientX;
var Sy = e.clientY;
//屏幕坐标转标准设备坐标
var x = ( Sx / window.innerWidth ) * 2 - 1;
var y = -( Sy / window.innerHeight ) * 2 + 1;
var standardVector = new THREE.Vector3(x, y, 0.5);
//标准设备坐标转三维坐标
var worldVector = standardVector.unproject(camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
var ray = worldVector.sub(camera.position).normalize();
//创建射线投射器对象
var raycaster = new THREE.Raycaster(camera.position, ray);
//返回射线选中的对象
var intersects = raycaster.intersectObjects([pendantMesh]);
if (intersects.length > 0) {
window.location = "https://story.skybridair.cn:30443"
}
}
document.body.addEventListener("click",clickEvent)
// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 创建箭头正弦角度
var angle = 0;
// 创建光点正弦角度
var angle2 = 0;
// 创建渲染函数
var render = function (){
// 渲染相机和场景
renderer.render(scene,camera)
// 刷新混合器
Mixer.update(clock.getDelta());
// 箭头上下移动
arrowsMesh.position.y = 9+Math.sin(angle)*0.5;
angle += 0.05;
// 遍历光点如果移动时间到了移除光点并重新创建一个随机光点
for(let i = 0;i<group1.children.length;i++){
nowTime = Date.now();
let item = group1.children[i]
item.position.x += moveArrX[i];
item.position.y += moveArrY[i];
if(nowTime - joinTime[i] < moveTime[i]){
if(item.position.z == -39){
item.material.opacity = 0.5 * ((Math.sin(angle2)+2.5)/3.5);
}else{
item.material.opacity = 0.5 * ((Math.sin(angle2)+4)/5);
}
}else{
item.material.opacity -= 0.0005;
}
if(item.material.opacity <= 0){
let itemArguments = [item.position.z,item.scale.x];
group1.remove(item);
moveArrX.splice(i,1);
moveArrY.splice(i,1);
moveTime.splice(i,1);
joinTime.splice(i,1);
addDot(...itemArguments);
}
}
angle2 +=0.03;
// 按当前设备帧数每秒回调多少次渲染，实现动画效果
requestAnimationFrame( render );
}
render()
</script>
</body>
</html>