4
4
< meta charset ="UTF-8 ">
5
5
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
6
< title > Infinite Hallway</ title >
7
+ < link rel ="shortcut icon " type ="image/x-icon " href ="/favicon.ico ">
8
+ < script src ="https://kit.fontawesome.com/6c2b708adc.js " crossorigin ="anonymous "> </ script >
7
9
</ head >
8
10
< style >
9
11
@import url ('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap' );
67
69
justify-content : center;
68
70
align-items : center;
69
71
}
72
+ # controller-forward {
73
+ position : fixed;
74
+ bottom : 80px ;
75
+ right : 60px ;
76
+ font-size : 40px ;
77
+ color : antiquewhite;
78
+ }
79
+
80
+ # controller-right {
81
+ position : fixed;
82
+ bottom : 42px ;
83
+ right : 20px ;
84
+ font-size : 40px ;
85
+ color : antiquewhite;
86
+ }
87
+
88
+ # controller-back {
89
+ position : fixed;
90
+ right : 60px ;
91
+ bottom : 2px ;
92
+ font-size : 40px ;
93
+ color : antiquewhite;
94
+ }
95
+
96
+ # controller-left {
97
+ position : fixed;
98
+ bottom : 42px ;
99
+ right : 100px ;
100
+ font-size : 40px ;
101
+ color : antiquewhite;
102
+ }
70
103
71
104
</ style >
72
105
< body >
@@ -85,10 +118,27 @@ <h1 style="font-size:60px;">WELCOME TO AYAN'S</br>INFINITE HALL OF FAME</h1>
85
118
</ div >
86
119
</ div >
87
120
< div class ="container "> < p id ="textHover "> click to open</ p > </ div >
121
+ < div id ="arrow ">
122
+ < p id ="controller-forward "> < i class ="fal fa-arrow-circle-up "> </ i > </ p >
123
+ < p id ="controller-right "> < i class ="fal fa-arrow-circle-right "> </ i > </ p >
124
+ < p id ="controller-back " > < i class ="fal fa-arrow-circle-down "> </ i > </ p >
125
+ < p id ="controller-left "> < i class ="fal fa-arrow-circle-left "> </ i > </ p >
126
+ </ div >
88
127
</ body >
128
+ < script >
129
+ var isMobile = / i P h o n e | i P a d | i P o d | A n d r o i d / i. test ( navigator . userAgent ) ;
130
+ if ( isMobile ) {
131
+ document . getElementById ( "instructions" ) . style . display = "none" ;
132
+ document . getElementById ( "blocker" ) . style . display = "none" ;
133
+ }
134
+ else {
135
+ document . getElementById ( "arrow" ) . style . display = "none" ;
136
+
137
+ }
138
+ </ script >
89
139
< script type ="module ">
90
140
import * as THREE from 'https://cdn.skypack.dev/[email protected] ' ;
91
- import { PointerLockControls } from 'https://cdn.skypack.dev/[email protected] /examples/jsm/controls/PointerLockControls .js' ;
141
+ import { PointerLockControls } from '/PointerlockcontrolsMobile .js' ;
92
142
import { GLTFLoader } from 'https://cdn.skypack.dev/[email protected] /examples/jsm/loaders/GLTFLoader.js'
93
143
import { DRACOLoader } from 'https://cdn.skypack.dev/[email protected] /examples/jsm/loaders/DRACOLoader.js'
94
144
@@ -100,7 +150,7 @@ <h1 style="font-size:60px;">WELCOME TO AYAN'S</br>INFINITE HALL OF FAME</h1>
100
150
let raycaster2 ;
101
151
let currentIntersect = null ;
102
152
let enableRaycast = true ;
103
-
153
+ let audio1 = new Audio ( '/models/Hall.mp3' ) ;
104
154
let urls = {
105
155
0 :"https://bookshub.pythonanywhere.com/" ,
106
156
1 :"https://jivanam.pythonanywhere.com/" ,
@@ -294,6 +344,43 @@ <h1 style="font-size:60px;">WELCOME TO AYAN'S</br>INFINITE HALL OF FAME</h1>
294
344
}
295
345
296
346
} ;
347
+ const forward = document . getElementById ( 'controller-forward' )
348
+ forward . addEventListener ( "touchstart" , function ( ) {
349
+ moveForward = true ;
350
+ } )
351
+ forward . addEventListener ( "touchend" , function ( ) {
352
+ moveForward = false ;
353
+ } )
354
+ forward . addEventListener ( "touchmove" , function ( ) {
355
+ moveForward = false ;
356
+ } )
357
+ const right = document . getElementById ( 'controller-right' )
358
+ right . addEventListener ( "touchstart" , function ( ) {
359
+ moveRight = true ;
360
+ } )
361
+ right . addEventListener ( 'touchend' , function ( ) {
362
+ moveRight = false
363
+ } )
364
+ const left = document . getElementById ( 'controller-left' )
365
+ left . addEventListener ( "touchstart" , function ( ) {
366
+ moveLeft = true ;
367
+ } )
368
+ left . addEventListener ( 'touchend' , function ( ) {
369
+ moveLeft = false
370
+ } )
371
+ const back = document . getElementById ( 'controller-back' )
372
+ back . addEventListener ( "touchstart" , function ( ) {
373
+ moveBackward = true ;
374
+ } )
375
+ back . addEventListener ( 'touchend' , function ( ) {
376
+ moveBackward = false
377
+ } )
378
+ document . addEventListener ( 'touchmove' , function ( ) {
379
+ if ( audio1 . currentTime == 0 ) {
380
+ audio1 . volume = 0.1 ;
381
+ audio1 . play ( )
382
+ }
383
+ } )
297
384
window . addEventListener ( 'click' , ( ) =>
298
385
{
299
386
if ( currentIntersect )
@@ -393,8 +480,6 @@ <h1 style="font-size:60px;">WELCOME TO AYAN'S</br>INFINITE HALL OF FAME</h1>
393
480
394
481
const time = performance . now ( ) ;
395
482
396
- if ( controls . isLocked === true ) {
397
-
398
483
if ( camera . position . x > hallBox . max . x - 5 ) {
399
484
camera . position . x -= 0.5
400
485
}
@@ -444,8 +529,6 @@ <h1 style="font-size:60px;">WELCOME TO AYAN'S</br>INFINITE HALL OF FAME</h1>
444
529
445
530
}
446
531
447
- }
448
-
449
532
prevTime = time ;
450
533
451
534
renderer . render ( scene , camera ) ;
0 commit comments