Skip to content

Commit 0014c6e

Browse files
HabbatulHabbatul
committed
feat: adding final feature (mechanism) for MVP
- adding CSS3Drendrer for display web (using blending methods to get collision) - adding orbitcontrol feature when active web display - using quaterion to change camera rotation on lookAt Vector3 (combine with TWEEN) - etc
1 parent 11c33b9 commit 0014c6e

File tree

3 files changed

+825
-335
lines changed

3 files changed

+825
-335
lines changed

‎index.html

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
body {
1515
margin: 0;
1616
}
17-
canvas {
18-
display: block;
19-
}
2017
.hidden {
2118
display: none;
2219
visibility: hidden;
@@ -35,18 +32,51 @@
3532
font-weight: 400;
3633
font-style: normal;
3734
}
35+
36+
#css{
37+
position: absolute;
38+
top: 0;
39+
left: 0;
40+
width: 100%;
41+
height: 100%;
42+
}
43+
#webgl {
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 100%;
48+
height: 100%;
49+
}
50+
3851
</style>
3952
</head>
4053
<body class="saira-condensed-light" style="overflow: hidden">
41-
<canvas id="canvas"></canvas>
54+
55+
<div id="css"></div>
56+
<canvas id="webgl"></canvas>
57+
58+
<div id="containerButtonWhenOrbitControl" class="hidden" style="transition: opacity 0.5s ease-in-out; opacity: 1; position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
59+
<button id="buttonBackToWeb" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; width: 7.5rem;">Interact with The Website</button>
60+
<p style="color: aliceblue;width:8rem;text-align: center;margin-left:1rem;line-height: 1rem;">Hold & scroll/pinch the screen to control the camera!!!</p>
61+
</div>
62+
63+
<div id="containerButtonEndWeb" class="hidden" style="transition: opacity 0.5s ease-in-out; opacity: 0; position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
64+
<button id="buttonEndWeb" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-right: 0.5rem; width: 7.5rem;">Turn Off The Website</button>
65+
<button id="buttonControlOrbit" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-left: 0.5rem; width: 7.5rem;">Control Camera</button>
66+
</div>
67+
4268

4369
<div id="container-buttonx" class="hidden" style="transition: opacity 0.5s ease-in-out; opacity: 0; position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
4470
<button id="buttonx" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-right: 0.5rem; width: 5.5rem;">Go To the Box</button>
4571
<button id="buttonx2" class="jersey" style="background: linear-gradient(120deg, rgba(0, 201, 255, 0.2), rgba(126, 208, 255, 0.8)); border: 1px solid rgb(0, 0, 0); color: black; padding: 0.4rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; border-radius: 10px; margin-left: 0.5rem; width: 5.5rem;">Go To Nostalgia</button>
4672
</div>
73+
74+
4775
<div id="container-objective" class="hidden inter" style="transition: opacity 0.5s ease-in-out; opacity: 1; position: absolute; top: 5rem; left: 50%; transform: translate(-50%, -50%); z-index: 99; display: flex; justify-content: center; align-items: center;">
4876
<p style="color: white;text-align: center;font-size: 2.5rem;font-weight:300;">Click The Cube</p>
4977
</div>
50-
<script type="module" src="main.js"></script>
78+
79+
80+
<script type="module" src="main.js"></script>
5181
</body>
5282
</html>

0 commit comments

Comments
 (0)