changes

harshcrop · Dec 26, 2023 · 9f50868 · 9f50868
1 parent f444cc7
commit 9f50868
Show file tree

Hide file tree

Showing 8 changed files with 546 additions and 636 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/libs/orbit-controls.js b/libs/orbit-controls.js
diff --git a/libs/trackball-controls.js b/libs/trackball-controls.js
diff --git a/scripts/app.js b/scripts/app.js
@@ -36,12 +36,12 @@ class App {
 
   initCamera = () => {
     this.ratio = window.innerWidth / window.innerHeight;
-    this.camera = new THREE.PerspectiveCamera(60, this.ratio, 0.1, 10000);
+    this.camera = new THREE.PerspectiveCamera(65, this.ratio, 0.1, 10000);
     this.camera.lookAt(this.scene.position);
     this.camera.position.set(0, 15, 30);
   }
-
   initControls = () => {
+
     this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
   }
 
@@ -51,6 +51,7 @@ class App {
     this.stats.domElement.style.position = 'absolute';
     this.stats.domElement.style.right = '10px';
     this.stats.domElement.style.bottom = '10px';
+    this.stats.domElement.style.display = 'none';
     document.body.appendChild( this.stats.domElement );
   }
 
@@ -67,10 +68,10 @@ class App {
     requestAnimationFrame(this.update);
   }
 
-  addControlGui = callback => {
-    var gui = new dat.GUI();
-    callback(gui);
-  }
+  // addControlGui = callback => {
+  //   var gui = new dat.GUI();
+  //   callback(gui);
+  // }
 
   handleResize = () => {
     this.camera.aspect = window.innerWidth / window.innerHeight;

diff --git a/scripts/config.js b/scripts/config.js
@@ -16,8 +16,8 @@ const config = {
     globe: 0.001,
   },
   colors: {
-    globeDotColor: "rgb(203, 168, 0)",
-    globeMarkerColor: "rgb(143, 216, 216)",
+    globeDotColor: "rgb(255, 255, 255)",
+    globeMarkerColor: "rgb(255, 255, 255)",
     globeMarkerGlow: "rgb(255, 255, 255)",
     globeLines: "rgb(255, 255, 255)",
     globeLinesDots: "rgb(255, 255, 255)",

diff --git a/scripts/dots.js b/scripts/dots.js
@@ -19,7 +19,7 @@ class Dots {
 
 class Dot {
 	constructor() {
-		this.radius = 2;
+		this.radius = 0.6;
 		this.segments = 32;
 		this.rings = 32;
 

diff --git a/scripts/index.js b/scripts/index.js
@@ -33,38 +33,38 @@ async function preload() {
 function setup(app) {
   const controllers = [];
 
-  app.addControlGui((gui) => {
-    const colorFolder = gui.addFolder("Colors");
-    controllers.push(colorFolder.addColor(config.colors, "globeDotColor"));
-    controllers.push(colorFolder.addColor(config.colors, "globeMarkerColor"));
-    controllers.push(colorFolder.addColor(config.colors, "globeMarkerGlow"));
-    controllers.push(colorFolder.addColor(config.colors, "globeLines"));
-    controllers.push(colorFolder.addColor(config.colors, "globeLinesDots"));
-
-    const sizeFolder = gui.addFolder("Sizes");
-    controllers.push(sizeFolder.add(config.sizes, "globeDotSize", 1, 5));
-    controllers.push(sizeFolder.add(config.scale, "globeScale", 0.1, 1));
-
-    const displayFolder = gui.addFolder("Display");
-    controllers.push(displayFolder.add(config.display, "map"));
-    controllers.push(displayFolder.add(config.display, "points"));
-    controllers.push(displayFolder.add(config.display, "markers"));
-    controllers.push(displayFolder.add(config.display, "markerLabel"));
-    controllers.push(displayFolder.add(config.display, "markerPoint"));
-
-    const animationsFolder = gui.addFolder("Animations");
-    controllers.push(animationsFolder.add(animations, "rotateGlobe"));
-
-    sizeFolder.open();
-  });
+  // app.addControlGui((gui) => {
+  //   const colorFolder = gui.addFolder("Colors");
+  //   controllers.push(colorFolder.addColor(config.colors, "globeDotColor"));
+  //   controllers.push(colorFolder.addColor(config.colors, "globeMarkerColor"));
+  //   controllers.push(colorFolder.addColor(config.colors, "globeMarkerGlow"));
+  //   controllers.push(colorFolder.addColor(config.colors, "globeLines"));
+  //   controllers.push(colorFolder.addColor(config.colors, "globeLinesDots"));
+
+  //   const sizeFolder = gui.addFolder("Sizes");
+  //   controllers.push(sizeFolder.add(config.sizes, "globeDotSize", 1, 5));
+  //   controllers.push(sizeFolder.add(config.scale, "globeScale", 0.1, 1));
+
+  //   const displayFolder = gui.addFolder("Display");
+  //   controllers.push(displayFolder.add(config.display, "map"));
+  //   controllers.push(displayFolder.add(config.display, "points"));
+  //   controllers.push(displayFolder.add(config.display, "markers"));
+  //   controllers.push(displayFolder.add(config.display, "markerLabel"));
+  //   controllers.push(displayFolder.add(config.display, "markerPoint"));
+
+  //   const animationsFolder = gui.addFolder("Animations");
+  //   controllers.push(animationsFolder.add(animations, "rotateGlobe"));
+
+  //   sizeFolder.open();
+  // });
 
   controllers.forEach((controller) => {
     controller.onChange((event) => {
       controls.changed = true;
     });
   });
 
-  app.camera.position.z = config.sizes.globe * 2.85;
+  app.camera.position.z = config.sizes.globe * 2;
   app.camera.position.y = config.sizes.globe * 0;
   app.controls.enableDamping = true;
   app.controls.dampingFactor = 0.05;

diff --git a/scripts/points.js b/scripts/points.js
@@ -78,7 +78,7 @@ class Points {
 
     const circle = new fabric.Circle({
       radius: radius / 2 - 2,
-      fill: 'blue',
+      fill: 'white',
       left: 1,
       top: 1
     })