feat: adding final feature (mechanism) for MVP

- add CSS3Drendrer for display web (using blending methods to get collision)
- add orbitcontrol feature when active web display
- use quaternion to change camera rotation on lookAt Vector3 (combine with TWEEN)
- Quaternion slerp using t elapsed for interpolation factor
-change the rotation of camera ('goto computer' animation) to 2.5*phi
- adjust the web display position (planeGL, planeShader, css3drenderer) -> solve the glitch display
- etc

main.js

@@ -1193,15 +1193,15 @@ buttonEndWeb.addEventListener('click', function(){
   new TWEEN.Tween(camera.position)
     .to({ x: 400, y: 8, z: 25 },800)
     .easing(TWEEN.Easing.Quadratic.InOut)
-    .onUpdate(() => {
+    .onUpdate((v,t) => {
 
       //buat transisi rotasi dari pivot sebelumnya ke pivot saat ini
       const startQuaternion = camera.quaternion.clone();
       camera.lookAt(pivot); 
       const endQuaternion = camera.quaternion.clone();
 
       camera.quaternion.copy(startQuaternion);
-      camera.quaternion.slerp(endQuaternion, 0.5);
+      camera.quaternion.slerp(endQuaternion, t);
 
     })
     .onComplete(() => {
@@ -1244,15 +1244,16 @@ buttonControlOrbit.addEventListener('click', function () {
   //tidak perlu beri duration, nanti dia malah terpotong
   new TWEEN.Tween(camera.position)
     .to({ x: 400, y: 0, z: 35 })
-    .onUpdate(() => {
+    .easing(TWEEN.Easing.Quadratic.InOut)
+    .onUpdate((v,t) => {
 
       //buat transisi rotasi dari pivot sebelumnya ke pivot saat ini
       const startQuaternion = camera.quaternion.clone();
       camera.lookAt(pivot);
       const endQuaternion = camera.quaternion.clone();
 
       camera.quaternion.copy(startQuaternion);
-      camera.quaternion.slerp(endQuaternion, 0.5);
+      camera.quaternion.slerp(endQuaternion, t);
 
     })
     .onComplete(()=>{
@@ -1264,22 +1265,23 @@ buttonControlOrbit.addEventListener('click', function () {
       mainCameraControls.target.copy(pivot);
       mainCameraControls.minDistance = camera.position.z + 8;
       mainCameraControls.maxDistance = 80; 
+
+      //handle animasi transisi button dissolve
+      containerButtonWhenOrbitControl.classList.remove("hidden");
+      containerButtonWhenOrbitControl.style.opacity = "1";
     })
     .start();
 
   //buat bisa berinteraksi dengan canvas
   containerCSS3D.style.pointerEvents = 'none';
   containerWebGL.style.pointerEvents = 'auto'; 
 
+  //handle animasi transisi button dissolve
   containerButtonEndWeb.style.opacity = "0";
   containerButtonEndWeb.addEventListener(
     "transitionend",
     function handleTransitionEnd(event) {
-
-      //setting mouse nya dulu
       containerButtonEndWeb.classList.add("hidden");
-      containerButtonWhenOrbitControl.classList.remove("hidden");
-      containerButtonWhenOrbitControl.style.opacity = "1";
       containerButtonEndWeb.removeEventListener("transitionend", handleTransitionEnd);
     }
   );
@@ -1303,8 +1305,6 @@ buttonBackToWeb.addEventListener('click', function () {
   //matikan rotate camera raycast
   kameraMenunjuMonitor = false;
 
-
-
   var distance;
   if (window.matchMedia("(min-width: 1024px)").matches) {
     distance = 10;
@@ -1318,21 +1318,27 @@ buttonBackToWeb.addEventListener('click', function () {
   var an1mate = new TWEEN.Tween(camera.position)
     .to({ x: 400, y: 0, z: distance }, 1000)
     .easing(TWEEN.Easing.Quadratic.InOut)
-    .onUpdate(() => {
+    .onUpdate((v,t) => {
 
       //buat transisi rotasi dari pivot sebelumnya ke pivot saat ini
       const startQuaternion = camera.quaternion.clone();
       camera.lookAt(pivot);
       const endQuaternion = camera.quaternion.clone();
 
       camera.quaternion.copy(startQuaternion);
-      camera.quaternion.slerp(endQuaternion, 0.7);
+      camera.quaternion.slerp(endQuaternion, t);
 
     })
     .onComplete(() => {
       kameraMenunjuMonitor = true;
       rotateCameraDistance = distance;
       isWebOpen = true;
+
+      //handle animasi transisi button dissolve
+      containerCSS3D.style.pointerEvents = 'auto';
+      containerWebGL.style.pointerEvents = 'none';
+      containerButtonEndWeb.classList.remove("hidden");
+      containerButtonEndWeb.style.opacity = "1";
     }
     )
     .start();
@@ -1343,12 +1349,7 @@ buttonBackToWeb.addEventListener('click', function () {
     "transitionend",
     function handleTransitionEnd(event) {
       //setting behacvior mouse dulu
-      containerCSS3D.style.pointerEvents = 'auto';
-      containerWebGL.style.pointerEvents = 'none';
-
       containerButtonWhenOrbitControl.classList.add("hidden");
-      containerButtonEndWeb.classList.remove("hidden");
-      containerButtonEndWeb.style.opacity = "1";
       containerButtonWhenOrbitControl.removeEventListener("transitionend", handleTransitionEnd);
     }
   );