r3f

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.18.0.cjs"

packages/app/package.json

@@ -15,11 +15,14 @@
     "@types/d3-zoom": "^2.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/three": "^0.125.3",
     "d3-selection": "^2.0.0",
     "d3-zoom": "^2.0.0",
     "react": "^0.0.0-experimental-3310209d0",
     "react-dom": "^0.0.0-experimental-3310209d0",
     "react-scripts": "4.0.1",
+    "react-three-fiber": "^5.3.19",
+    "three": "^0.126.0",
     "web-vitals": "^0.2.4",
     "zustand": "^3.2.0"
   },

packages/app/src/App.tsx

@@ -16,6 +16,8 @@ import { useSystemStore } from './stores/system'
 import { useDateStore, useIsPaused } from './stores/date'
 import { useFrame } from './hooks/useFrame'
 import { useCanvasTransformStore } from './stores/canvasTransform'
+import { CanvasThree } from './components/CanvasThree'
+import { renderInThree } from './config'
 
 css.global({ body: { fontFamily: '$sansSerif' } })
 
@@ -69,11 +71,16 @@ export const App = () => {
 
   const isPaused = useIsPaused()
   useFrame(!isPaused ? useDateStore.getState().runFrame : null)
+
   return (
     <>
-      <SvgRoot>
-        <SystemComponent />
-      </SvgRoot>
+      {renderInThree ? (
+        <CanvasThree />
+      ) : (
+        <SvgRoot>
+          <SystemComponent />
+        </SvgRoot>
+      )}
       <CanvasTooltips />
       <StatusBarComponent />
     </>

packages/app/src/components/Canvas/SVGView.tsx

@@ -59,6 +59,8 @@ export const useToScaleAdapter = () => {
   const { k } = useViewContext()
   const globalK = useCanvasTransformZoom()
   const scale = (k / globalK) * GLOBAL_SCALE_MULTIPLIER
+  console.log(scale)
+
   return (distance: number) => distance / scale
 }
 

packages/app/src/components/Canvas/SvgRoot.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import {
   useCanvasTransform,
-  useCanvasTransformStore,
+  useCanvasTransformRef,
 } from '../../stores/canvasTransform'
 import { MesureInfo, SVGMesure } from './SVGMesure'
 import { SVGView } from './SVGView'
@@ -46,16 +46,10 @@ const useMesureInfo = () => {
 }
 
 export const SvgRoot: React.FC = ({ children }) => {
-  const svgRef = React.useRef<SVGSVGElement>(null)
+  const svgRef = useCanvasTransformRef<SVGSVGElement>()
   const { x, y, k } = useCanvasTransform()
-  const applyZoomEvents = useCanvasTransformStore((s) => s.applyZoomEvents)
   const { mesureInfo, eventHandlers } = useMesureInfo()
 
-  React.useEffect(() => {
-    if (!svgRef.current) return
-    applyZoomEvents(svgRef.current)
-  }, [applyZoomEvents])
-
   return (
     <SVG ref={svgRef} id="canvas" {...eventHandlers}>
       <SVGView

packages/app/src/components/CanvasThree/OrbitComponent.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Orbit, isOrbitElliptical } from '@othrworld/orbit'
+
+import { OrbitEllipseComponent } from './OrbitEllipse'
+import { OrbitItem } from './OrbitItem'
+
+interface OrbitComponentProps {
+  orbit: Orbit
+}
+export const OrbitComponent: React.FC<OrbitComponentProps> = ({
+  orbit,
+  children,
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+  return (
+    <>
+      <group
+        onPointerOver={() => setIsHovered(true)}
+        onPointerOut={() => setIsHovered(false)}
+      >
+        {isOrbitElliptical(orbit) && (
+          <OrbitEllipseComponent isHovered={isHovered} orbit={orbit} />
+        )}
+      </group>
+      <OrbitItem orbit={orbit}>{children}</OrbitItem>
+    </>
+  )
+}

packages/app/src/components/CanvasThree/OrbitEllipse.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { getSemiMinorAxis, OrbitEllipse } from '@othrworld/orbit'
+import { multUnit } from '@othrworld/units'
+
+import { useToScaleAdapter } from './hooks'
+
+export interface OrbitEllipseProps {
+  orbit: OrbitEllipse
+  isHovered: boolean
+  baseStrokeWidth?: number
+}
+export const OrbitEllipseComponent = ({
+  orbit,
+  isHovered,
+  baseStrokeWidth = 1,
+}: OrbitEllipseProps) => {
+  const toScale = useToScaleAdapter()
+  return null
+  // return (
+  //   <line
+  //     // @ts-expect-error `<line>` is a Three Line, not a SVG Line
+  //     scale={[toScale(orbit.a), toScale(getSemiMinorAxis(orbit)), 0]}
+  //     rotation={[0, 0, (orbit.phi * 360) / (Math.PI * 2)]}
+  //     position={[-toScale(multUnit(orbit.a, orbit.e)), 0, 0]}
+  //   >
+  //     <circleGeometry args={[1, 32]} />
+  //     <lineBasicMaterial />
+  //   </line>
+  // )
+}

packages/app/src/components/CanvasThree/OrbitItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Orbit, getCarthesianCoords } from '@othrworld/orbit'
+
+import { useCurrentDate } from '../../stores/date'
+import { useToScaleAdapter } from './hooks'
+
+/** Translation group for an orbit */
+export const OrbitItem: React.FC<{ orbit: Orbit }> = ({ orbit, children }) => {
+  const currentDate = useCurrentDate()
+  const toScale = useToScaleAdapter()
+  const { x, y } = getCarthesianCoords(orbit, currentDate)
+
+  return <group position={[toScale(x), -toScale(y), 0]}>{children}</group>
+}

packages/app/src/components/CanvasThree/SystemComponentThree.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import shallow from 'zustand/shallow'
+import { Body, Planet, Spacecraft, Star } from '@othrworld/core'
+import { unit } from '@othrworld/units'
+
+import { useSystemStore, SystemState } from '../../stores/system'
+import { useFixedSizeAdapter, useToScaleAdapter } from './hooks'
+import { OrbitComponent } from './OrbitComponent'
+import { useCanvasTooltipStore } from '../../stores/canvasTooltips'
+
+const StarComponent: React.FC<{ star: Star }> = ({ star, children }) => {
+  const toScale = useToScaleAdapter()
+  const fixed = useFixedSizeAdapter()
+  return (
+    <>
+      <mesh>
+        <sphereGeometry args={[toScale(star.radius), 32, 32]} />
+        <meshLambertMaterial color="#fcef99" opacity={0.6} transparent />
+      </mesh>
+      <mesh scale={[fixed(10), fixed(10), 1]}>
+        <circleGeometry args={[1, 32]} />
+        <meshBasicMaterial color="#fcef99" opacity={0.2} transparent />
+      </mesh>
+      <pointLight args={['#fcef99', 1]} />
+      {children}
+    </>
+  )
+}
+
+const PlanetComponent: React.FC<{ planet: Planet }> = ({
+  planet,
+  children,
+}) => {
+  const toScale = useToScaleAdapter()
+  const fixed = useFixedSizeAdapter()
+  const r = toScale(planet.radius)
+  return (
+    <OrbitComponent orbit={planet.orbit}>
+      <group
+        onPointerDown={(e) =>
+          useCanvasTooltipStore
+            .getState()
+            .open(e, { type: 'planet', id: planet.id })
+        }
+      >
+        {/* Real planet */}
+        <mesh scale={[r, r, r]}>
+          <sphereGeometry args={[1, 32, 32]} />
+          <meshLambertMaterial color="#5f5c59" opacity={0.6} transparent />
+        </mesh>
+
+        {/* Planet Icon */}
+        <mesh scale={[fixed(8), fixed(8), 1]}>
+          <circleGeometry args={[1, 32]} />
+          <meshBasicMaterial color="#5f5c59" opacity={0.2} transparent />
+        </mesh>
+      </group>
+      {children}
+    </OrbitComponent>
+  )
+}
+
+const BodyComponent: React.FC<{ body: Body }> = ({ body, children }) => {
+  switch (body.type) {
+    case 'planet':
+      return <PlanetComponent planet={body}>{children}</PlanetComponent>
+    case 'star':
+      return <StarComponent star={body}>{children}</StarComponent>
+    case 'asteroid':
+      // TODO
+      return null
+  }
+}
+const SpacecraftComponent = ({ spacecraft }: { spacecraft: Spacecraft }) => {
+  const fixed = useFixedSizeAdapter()
+  const toScale = useToScaleAdapter()
+  return (
+    <OrbitComponent orbit={spacecraft.orbit}>
+      <group
+        onPointerDown={(e) =>
+          useCanvasTooltipStore
+            .getState()
+            .open(e, { type: 'spacecraft', id: spacecraft.id })
+        }
+      >
+        <mesh scale={[fixed(2), fixed(2), 1]}>
+          <circleGeometry args={[1, 8]} />
+          <meshBasicMaterial color="#888888" />
+        </mesh>
+        <mesh scale={[toScale(unit(5)), toScale(unit(5)), 1]}>
+          <circleGeometry args={[1, 8]} />
+          <meshBasicMaterial color="#FF0000" />
+        </mesh>
+        <mesh scale={[fixed(10), fixed(10), 1]}>
+          <circleGeometry args={[1, 8]} />
+          <meshBasicMaterial opacity={0} transparent />
+        </mesh>
+      </group>
+    </OrbitComponent>
+  )
+}
+
+interface BodyTreeProps {
+  body: Body
+}
+// Recursive component to draw bodies in subsequent orbits
+const BodyTree = ({ body }: BodyTreeProps) => {
+  const subBodies = useSystemStore(
+    React.useCallback(
+      (s) =>
+        s.system.bodies.filter(
+          (b) => b.type !== 'star' && b.orbit.parentId === body.id
+        ),
+      [body.id]
+    ),
+    shallow
+  )
+  const spacecrafts = useSystemStore(
+    React.useCallback(
+      (s) => s.system.spacecrafts.filter((s) => s.orbit.parentId === body.id),
+      [body.id]
+    ),
+    shallow
+  )
+
+  return (
+    <BodyComponent body={body}>
+      {subBodies.map((b) => (
+        <BodyTree key={b.id} body={b} />
+      ))}
+      {spacecrafts.map((s) => (
+        <SpacecraftComponent key={s.id} spacecraft={s} />
+      ))}
+    </BodyComponent>
+  )
+}
+
+const starSelector = (s: SystemState) =>
+  s.system.bodies.filter((b) => b.type === 'star')
+export const SystemComponentThree = () => {
+  const stars = useSystemStore(starSelector, shallow)
+
+  return (
+    <>
+      {stars.map((star) => (
+        <BodyTree key={star.id} body={star} />
+      ))}
+    </>
+  )
+}

packages/app/src/components/CanvasThree/hooks.ts

@@ -0,0 +1,10 @@
+import { Distance } from '@othrworld/units'
+import { useCanvasTransformZoom } from '../../stores/canvasTransform'
+
+// Hook because it might depend on context later on
+export const useToScaleAdapter = () => (size: Distance) => size * 1e-8
+
+export const useFixedSizeAdapter = () => {
+  const k = useCanvasTransformZoom()
+  return (size: number) => size / k
+}

packages/app/src/components/CanvasThree/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Canvas, useFrame, useThree } from 'react-three-fiber'
+import { OrthographicCamera } from 'three'
+
+import {
+  useCanvasTransform,
+  useCanvasTransformRef,
+} from '../../stores/canvasTransform'
+import { SystemComponentThree } from './SystemComponentThree'
+
+const CanvasContainer: React.FC = ({ children }) => {
+  const ref = useCanvasTransformRef<HTMLDivElement>()
+  return (
+    <div ref={ref} style={{ height: '100%' }}>
+      <Canvas>
+        <CanvasCamera />
+        {children}
+      </Canvas>
+    </div>
+  )
+}
+
+const CanvasCamera = () => {
+  const { setDefaultCamera, camera, size } = useThree()
+  const { x, y, k } = useCanvasTransform()
+  const cameraRef = React.useRef<OrthographicCamera>(null)
+
+  useFrame(() => {
+    if (!cameraRef.current) return
+    cameraRef.current.updateProjectionMatrix()
+  })
+
+  React.useLayoutEffect(() => {
+    if (!cameraRef.current) return
+    const oldCam = camera
+    setDefaultCamera(cameraRef.current)
+    return () => setDefaultCamera(oldCam)
+    // `camera` is missing on purpose
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setDefaultCamera])
+
+  return (
+    <orthographicCamera
+      ref={cameraRef}
+      left={size.width / -2}
+      right={size.width / 2}
+      top={size.height / 2}
+      bottom={size.height / -2}
+      position={[-(x - size.width / 2) / k, (y - size.height / 2) / k, 6]}
+      zoom={k}
+    />
+  )
+}
+
+const GlobalLamps = () => (
+  <>
+    <directionalLight args={['#FFFFFF', 0.01]} position={[-1, -1, -1]} />
+    <directionalLight args={['#fdfbf3', 0.03]} position={[0.2, 0.1, 1]} />
+  </>
+)
+
+export const CanvasThree = () => {
+  return (
+    <CanvasContainer>
+      <GlobalLamps />
+      <SystemComponentThree />
+    </CanvasContainer>
+  )
+}

packages/app/src/config.ts

@@ -0,0 +1 @@
+export const renderInThree = new URL(document.URL).searchParams.has('r3f')