feat : Refining the mechanics and animations of the game.

- adding new hdri, - adding animation : background & env rotation, - make cube hidden when move to computer - try to repair shader - delete some lightning and change glb material - etc
Habbatul · Dec 16, 2024 · 6dc9dca · 6dc9dca
1 parent 7dc9e74
commit 6dc9dca
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -51,7 +51,7 @@
     </style>
   </head>
   <body class="saira-condensed-light" style="overflow: hidden">
-
+    
     <div id="css"></div>
     <canvas id="webgl"></canvas>
 
@@ -66,9 +66,10 @@
     </div>
 
 
-    <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;">
-        <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>
-        <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>
+    <div id="container-buttonx" 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;">
+        <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.3rem; width: 5.5rem;">Go To the Box</button>
+        <p style="color: aliceblue;width:5rem;text-align: center;line-height: 1rem;">Interact with the screen!!!</p>
+        <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.3rem; width: 5.5rem;">Go To Nostalgia</button>
     </div>
 
 

diff --git a/main.js b/main.js
@@ -82,46 +82,14 @@ loader.load("gltf/computerCustom.glb", function (gltf) {
   model.traverse((object) => {
     if (object.isMesh) {
       object.frustumCulled = false;
+      object.material.envMap = scene.environment; 
+      object.material.metalness = 0.4;
+      object.material.roughness = 0.1;
     }
   });
 
   scene.add(model); 
 
-  var pointLights = [
-    new THREE.PointLight(0xffffff, 20),
-    new THREE.PointLight(0xffffff, 30),
-    new THREE.PointLight(0xffffff, 30),
-    new THREE.PointLight(0xffffff, 30),
-    new THREE.PointLight(0xffffff, 20),
-  ];
-  pointLights[0].position.set(400, 0, 0);
-  pointLights[1].position.set(410, 0, 20);
-  pointLights[2].position.set(420, 0, -20);
-  pointLights[3].position.set(380, 0, -20);
-  pointLights[3].position.set(400, 2, -30);
-  pointLights.forEach((pointLight) => {
-    scene.add(pointLight);
-  });
-
-  //Buat spotlight untuk pencahayaan
-  const spotLight2 = new THREE.SpotLight(0xffffff, 1000);
-  spotLight2.position.set(350, 30, 50);
-  spotLight2.angle = Math.PI / 10;
-  spotLight2.penumbra = 1;
-  spotLight2.decay = 1.2;
-  spotLight2.distance = 90;
-
-  spotLight2.target.position.set(400, 0, -4); 
-
-  spotLight2.castShadow = true;
-
-  //Atur ukuran peta bayangan
-  spotLight2.shadow.mapSize.width = 512;
-  spotLight2.shadow.mapSize.height = 512;
-
-  scene.add(spotLight2);
-
-  const spotLightHelper = new THREE.SpotLightHelper(spotLight2);
 },
   undefined,
   function (error) {
@@ -1092,6 +1060,7 @@ glPlane.scale.copy(css3DObject.scale);
 const crtTVShader2 = {
   uniforms: {
     time: { value: 0 },
+    resolution: { value: new THREE.Vector2(renderTarget.width, renderTarget.height) },
   },
   vertexShader: `
     varying vec2 vUv;
@@ -1102,10 +1071,13 @@ const crtTVShader2 = {
   `,
   fragmentShader: `
     uniform float time;
+    uniform vec2 resolution;
     varying vec2 vUv;
 
     void main() {
-        vec2 uv = vUv;
+        //vec2 uv = vUv;
+        //coba pertimbangkan aspect ratio dan resolusi
+        vec2 uv = vUv * resolution / min(resolution.x, resolution.y);
 
         //Efek garis lurus
         vec2 p = mod(uv * vec2(60.0, 40.0), vec2(1.0));
@@ -1167,7 +1139,7 @@ buttonx2.addEventListener("click", function () {
 
   var distance;
   if (window.matchMedia("(min-width: 1024px)").matches) {
-    distance=10;
+    distance = 9;
   } else {
     distance = 17;
   }
@@ -1353,7 +1325,7 @@ buttonBackToWeb.addEventListener('click', function () {
 
   var distance;
   if (window.matchMedia("(min-width: 1024px)").matches) {
-    distance = 10;
+    distance = 9;
   } else {
     distance = 17;
   }
@@ -1432,7 +1404,7 @@ function checkScreenWebOpen() {
 
 //warm-up dummy quaternion pemanasan animasi quaternion
 const warmUp = new TWEEN.Tween(camera.position)
-  .to({ x: 0, y: 0, z: 30 }, 10) 
+  .to({ x: 0, y: 0, z:30 }, 10) 
   .onUpdate(() => {
     const dummyStart = camera.quaternion.clone();
     camera.lookAt(new THREE.Vector3(0, 0, 0));