refactor: remove GSAP dependency and update code structure for improved readability

pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      gsap:
-        specifier: ~3.12.7
-        version: 3.12.7
       three:
         specifier: ^0.174.0
         version: 0.174.0
@@ -355,9 +352,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  [email protected]:
-    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
-
   [email protected]:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -655,8 +649,6 @@ snapshots:
   [email protected]:
     optional: true
 
-  [email protected]: {}
-
   [email protected]: {}
 
   [email protected]:

src/script.js

@@ -1,71 +1,113 @@
-import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
-import { Timer } from 'three/examples/jsm/misc/Timer.js'
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { Timer } from 'three/examples/jsm/misc/Timer.js';
 
 /**
  * Base
  */
 // Canvas
-const canvas = document.querySelector('canvas.webgl')
+const canvas = document.querySelector('canvas.webgl');
 
 // Scene
-const scene = new THREE.Scene()
+const scene = new THREE.Scene();
 
 /**
  * Object
  */
-const geometry = new THREE.BoxGeometry(1, 1, 1)
-const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
-const mesh = new THREE.Mesh(geometry, material)
-scene.add(mesh)
+const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+const mesh = new THREE.Mesh(geometry, material);
+scene.add(mesh);
 
 /**
  * Sizes
  */
 const sizes = {
-    width: 800,
-    height: 600
-}
+	width: window.innerWidth,
+	height: window.innerHeight
+};
+
+window.addEventListener('resize', () =>
+{
+	// Update sizes
+	sizes.width = window.innerWidth;
+	sizes.height = window.innerHeight;
+
+	// Update Camera
+	camera.aspect = sizes.width / sizes.height;
+	camera.updateProjectionMatrix();
+
+	// Update Renderer
+	renderer.setSize(sizes.width, sizes.height);
+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+});
+
+window.addEventListener('dblclick', () =>
+{
+	const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
+	if (!fullscreenElement)
+	{
+		if (canvas.requestFullscreen)
+		{
+			canvas.requestFullscreen();
+		}
+		else if (canvas.webkitRequestFullscreen)
+		{
+			canvas.webkitRequestFullscreen();
+		}
+	}
+	else
+	{
+		if (document.exitFullscreen)
+		{
+			document.exitFullscreen();
+		}
+		else if (document.webkitExitFullscreen)
+		{
+			document.webkitExitFullscreen();
+		}
+	}
+});
 
 /**
  * Camera
  */
 // Base camera
-const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
-camera.position.z = 3
-scene.add(camera)
+const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
+camera.position.z = 3;
+scene.add(camera);
 
 // Controls
-const controls = new OrbitControls(camera, canvas)
-controls.enableDamping = true
+const controls = new OrbitControls(camera, canvas);
+controls.enableDamping = true;
 
 /**
  * Renderer
  */
 const renderer = new THREE.WebGLRenderer({
-    canvas: canvas
-})
-renderer.setSize(sizes.width, sizes.height)
+	canvas: canvas
+});
+renderer.setSize(sizes.width, sizes.height);
 
 /**
  * Animate
  */
-const timer = new Timer()
-timer.connect(document) // pause otomatis saat tab tidak aktif
+const timer = new Timer();
+timer.connect(document); // pause otomatis saat tab tidak aktif
 
 const tick = () =>
 {
-    timer.update()
-    const elapsedTime = timer.getElapsed()
+	timer.update();
+	const elapsedTime = timer.getElapsed();
 
-    // Update controls
-    controls.update()
+	// Update controls
+	controls.update();
 
-    // Render
-    renderer.render(scene, camera)
+	// Render
+	renderer.render(scene, camera);
 
-    // Call tick again on the next frame
-    window.requestAnimationFrame(tick)
-}
+	// Call tick again on the next frame
+	window.requestAnimationFrame(tick);
+};
 
-tick()
+tick();

src/style.css

@@ -0,0 +1,14 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    overflow: hidden;
+}
+
+.webgl {
+    position: fixed;
+    top: 0;
+    left: 0;
+}