Background and Orbit Calculations

assets/css/phoenix.css

@@ -17,6 +17,10 @@ h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4}
 h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2}
 pre{padding: 1em;}
 
+body {
+  background: #272730;
+}
+
 #sphere {
   height: 100% !important;
   width: 100% !important;
@@ -31,6 +35,11 @@ pre{padding: 1em;}
   width: 100% !important;
 }
 
+#points {
+  border-radius: 20px;
+}
+
+
 /* Phoenix promo and logo */
 .phx-hero {
   text-align: center;

assets/js/react/src/components/satelites.js

@@ -7,25 +7,39 @@ const Satelites = (props) => {
   const pointsRef = useRef();
   // Set up state for the hovered and active state
   const [sats, setSats] = useState([]);
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
   const [positions, colors] = useMemo(() => {
     let positions = [],
       colors = [];
+    ///R = 6371 (Radius of the earth in km)
+    const R = 6.371
     for (let i = 0; i < 500; i++) {
-      positions.push(5 - Math.random() * 10);
-      positions.push(5 - Math.random() * 10);
-      positions.push(5 - Math.random() * 10);
-      colors.push(0)
-      colors.push(0.5)
-      colors.push(0.5)
+    const lat =  Math.random() * 10 //Need to be recieved from the server
+    const lon = Math.random() * 10
+    const altitude = 1.25 //Altitude is a multipler on the coords
+    //Colors are stored as RGB and divided by 255
+    const colorRed = 206, colorGreen = 71, colorBlue = 96
+    positions.push((R * Math.cos(lat) * Math.cos(lon)) * altitude);    //X-AXIS
+    positions.push((R * Math.sin(lat)) * altitude);    //Z-AXIS
+    positions.push((R * Math.cos(lat) * Math.sin(lon)) * altitude);    //Y-AXIS
+    // positions.push(0);    //X-AXIS
+    // positions.push(0);    //Z-AXIS
+    // positions.push(i);    //Y-AXIS
+    colors.push(colorRed / 255)
+    colors.push(colorGreen / 255)
+    colors.push(colorBlue / 255)
     }
     return [new Float32Array(positions), new Float32Array(colors)];
   }, [1000])
 
+  //Hover is still not working
   const hover = useCallback((e) => {
     e.stopPropagation()
-    pointsRef.current.array[e.index * 3].colors = 1
-    pointsRef.current.array[e.index * 3 + 1].colors = 1
-    pointsRef.current.array[e.index * 3 + 2].colors = 1
+    pointsRef.current.array[e.index * 3] = 1
+    pointsRef.current.array[e.index * 3 + 1] = 1
+    pointsRef.current.array[e.index * 3 + 2] = 1
     pointsRef.current.needsUpdate = true
   }, [])
 
@@ -38,16 +52,18 @@ const Satelites = (props) => {
 
   // Return view, these are regular threejs elements expressed in JSX
   return (
-    <points onPointerOver={hover} onPointerOut={unhover}>
-      <bufferGeometry attach="geometry" >
+    <points
+    onPointerOver={(event) => hover()}
+    onPointerOut={(event) => unhover()}>
+      <bufferGeometry  attach="geometry" >
         <bufferAttribute
           attachObject={["attributes", "position"]}
           count={positions.length}
           array={positions}
           itemSize={3}
         />
         <bufferAttribute
-          ref={pointsRef}
+          ref={pointsRef} 
           attachObject={["attributes", "color"]}
           count={colors.length / 3}
           array={colors}
@@ -57,7 +73,7 @@ const Satelites = (props) => {
         <pointsMaterial
             attach="material"
             vertexColors
-            size={0.25}
+            size={0.75}
             sizeAttenuation={true}
         />
     </points>

assets/js/react/src/components/test.js

@@ -1,22 +1,49 @@
-import Test2 from "./test2";
-import Satelites from "./satelites";
-import React, { useRef, useState, Suspense } from "react";
-import { Canvas, useFrame, useThree, extend } from "@react-three/fiber";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import Test2 from "./test2"
+import Satelites from "./satelites"
+import React, { useRef, useState, Suspense } from "react"
+import { Canvas, useFrame, useThree, extend } from "@react-three/fiber"
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import { Stars } from '@react-three/drei'
 
-extend({ OrbitControls });
+extend({ OrbitControls })
 
 const CameraControls = () => {
-  // Get a reference to the Three.js Camera, and the canvas html element.
-  // We need these to setup the OrbitControls component.
-  // https://threejs.org/docs/#examples/en/controls/OrbitControls
   const {
     camera,
     gl: { domElement },
-  } = useThree();
-  // Ref to the controls, so that we can update them on every frame using useFrame
-  const controls = useRef();
-  useFrame((state) => controls.current.update());
-  return <orbitControls ref={controls} args={[camera, domElement]} />;
-};
+  } = useThree()
+  const controls = useRef()
+  useFrame((state) => controls.current.update())
+
+  return <orbitControls ref={controls} args={[camera, domElement]} />
+}
 
+
+const Test = () => (
+    <Canvas
+      colorManagement
+      camera={{ position: [25, 25, 25], fov: 10, far: 10000 }}
+      raycaster={{ params: { Points: { threshold: 0.2 } } }}
+    >
+      <ambientLight />
+      <CameraControls />
+      {/* <spotLight position={[10, 10, 10]} angle={0.15} /> */}
+      <CameraControls />
+      {/* Stars package takes time, comment out when working! */}
+      <Suspense fallback={null}>
+        <Test2 />
+        <Satelites id="points" />
+        <Stars
+        radius={75} // Radius of the inner sphere (default=100)
+        depth={35} // Depth of area where stars should fit (default=50)
+        count={5000} // Amount of stars (default=5000)
+        factor={20} // Size factor (default=4)
+        saturation={0.2} // Saturation 0-1 (default=0)
+        fade // Faded dots (default=false)
+      />
+      </Suspense>
+    </Canvas>
+
+);
+
+export default Test;

assets/js/react/src/components/test2.js

@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom'
 import React, { useRef, useState } from 'react'
 import { useFrame, useThree } from '@react-three/fiber'
 import * as THREE from 'three/build/three.module';
@@ -15,6 +14,8 @@ const Test2 = (props) => {
 
     // useFrame((state, delta) => (hovered ? null: mesh.current.rotation.y += 0.0001))
 
+    ///R = 6371 (Radius of the earth in km)
+
     // Return view, these are regular threejs elements expressed in JSX
     return (
       <mesh
@@ -23,7 +24,7 @@ const Test2 = (props) => {
         onClick={(event) => setActive(!active)}
         onPointerOver={(event) => setHover(true)}
         onPointerOut={(event) => setHover(false)}>
-        <sphereBufferGeometry attach="geometry" args={[4, 64, 64]} />
+        <sphereBufferGeometry attach="geometry" args={[6.371, 64, 64, 0, Math.PI * 2, 0, Math.PI]} />
         <meshStandardMaterial attach="material" map={texture} />
       </mesh>
     )