🎨 Remove sky in favor of static background color

app/src/lib/components/Visualization.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
     import {
-        BufferGeometry,
-        Line,
-        LineBasicMaterial,
         Mesh,
         MeshBasicMaterial,
         type Object3D,
         SphereGeometry,
         Vector3,
-        type NormalBufferAttributes,
-        type Object3DEventMap
+        type Object3DEventMap,
+        Color
     } from 'three'
     import {
         ModesEnum,
@@ -26,12 +23,7 @@
         walkGait,
         walkGaitToMode
     } from '$lib/stores'
-    import {
-        extractFootColor,
-        populateModelCache,
-        throttler,
-        getToeWorldPositions
-    } from '$lib/utilities'
+    import { populateModelCache, throttler, getToeWorldPositions } from '$lib/utilities'
     import SceneBuilder from '$lib/sceneBuilder'
     import { lerp, degToRad } from 'three/src/math/MathUtils'
     import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
@@ -42,14 +34,20 @@
     import { get } from 'svelte/store'
 
     interface Props {
-        sky?: boolean
+        defaultColor?: string | null
         orbit?: boolean
         panel?: boolean
         debug?: boolean
         ground?: boolean
     }
 
-    let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props()
+    let {
+        defaultColor = '#0091ff',
+        orbit = false,
+        panel = true,
+        debug = false,
+        ground = true
+    }: Props = $props()
 
     let sceneManager = $state(new SceneBuilder())
     let canvas: HTMLCanvasElement
@@ -108,7 +106,7 @@
         xm: 0,
         ym: 0.7,
         zm: 0,
-        Background: 'black'
+        Background: defaultColor
     }
 
     onMount(async () => {
@@ -153,7 +151,7 @@
         visibility.add(settings, 'Trace points', 1, 1000, 1)
         visibility.add(settings, 'Target position')
         visibility.add(settings, 'Smooth motion')
-        visibility.addColor(settings, 'Background')
+        visibility.addColor(settings, 'Background').onChange(setSceneBackground).listen()
     }
 
     const updateKinematicPosition = () => {
@@ -167,6 +165,8 @@
         ])
     }
 
+    const setSceneBackground = (c: string | null) => (sceneManager.scene.background = new Color(c!))
+
     const updateAngles = (name: string, angle: number) => {
         modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
         Throttler.throttle(
@@ -203,7 +203,7 @@
                 })
             })
         }
-        if (sky) sceneManager.addSky()
+        if (defaultColor) setSceneBackground(settings['Background'] || defaultColor)
     }
 
     const calculate_kinematics = () => {

app/src/lib/sceneBuilder.ts

@@ -17,18 +17,15 @@ import {
     MeshPhongMaterial,
     EquirectangularReflectionMapping,
     ACESFilmicToneMapping,
-    MathUtils,
     Group,
     MeshBasicMaterial,
     RepeatWrapping
 } from 'three'
-import { Sky } from 'three/addons/objects/Sky.js'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
 import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
 import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader'
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
-import { sunCalculator } from './utilities/position-utilities'
 
 export const addScene = () => new Scene()
 
@@ -65,8 +62,6 @@ export default class SceneBuilder {
     private fog!: FogExp2
     private isLoaded: boolean = false
     public isDragging: boolean = false
-    highlightMaterial: MeshPhongMaterial
-    sky!: Sky
     transformControl: TransformControls
     public modelGroup!: Group
 
@@ -89,34 +84,6 @@ export default class SceneBuilder {
         return this
     }
 
-    public addSky = () => {
-        this.sky = new Sky()
-        this.sky.scale.setScalar(450000)
-        this.scene.add(this.sky)
-        const effectController = {
-            turbidity: 10,
-            rayleigh: 3,
-            mieCoefficient: 0.005,
-            mieDirectionalG: 0.7,
-            elevation: sunCalculator.calculateSunElevation(),
-            azimuth: 200,
-            exposure: this.renderer.toneMappingExposure
-        }
-        const uniforms = this.sky.material.uniforms
-        uniforms['turbidity'].value = effectController.turbidity
-        uniforms['rayleigh'].value = effectController.rayleigh
-        uniforms['mieCoefficient'].value = effectController.mieCoefficient
-        uniforms['mieDirectionalG'].value = effectController.mieDirectionalG
-        this.renderer.toneMappingExposure = 0.5
-        const phi = MathUtils.degToRad(90 - effectController.elevation)
-        const theta = MathUtils.degToRad(effectController.azimuth)
-        const sun = new Vector3()
-
-        sun.setFromSphericalCoords(1, phi, theta)
-        uniforms['sunPosition'].value.copy(sun)
-        return this
-    }
-
     public addPerspectiveCamera = (options: position) => {
         this.camera = new PerspectiveCamera()
         this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0)

app/src/lib/utilities/index.ts

@@ -4,6 +4,5 @@ export * from './svelte-utilities'
 export * from './math-utilities'
 export * from './buffer-utilities'
 export * from './model-utilities'
-export * from './position-utilities'
 export * from './string-utilities'
 export * from './color-utilities'

app/src/lib/utilities/position-utilities.ts

@@ -1,86 +0,0 @@
-class SunCalculator {
-    calculateSunElevation(lat: number = 55, lon: number = 12) {
-        const now = new Date()
-        const JD = this.getJulianDate(now)
-        const solarDec = this.getSolarDeclination(JD)
-        const solarTime = this.getSolarTime(now, lon)
-
-        const hourAngle = (solarTime - 12) * 15
-        const elevation = Math.asin(
-            Math.sin(this.degToRad(lat)) * Math.sin(solarDec) +
-                Math.cos(this.degToRad(lat)) *
-                    Math.cos(solarDec) *
-                    Math.cos(this.degToRad(hourAngle))
-        )
-
-        return this.radToDeg(elevation)
-    }
-
-    getJulianDate(date: Date) {
-        const Y = date.getUTCFullYear()
-        const M = date.getUTCMonth() + 1
-        const D =
-            date.getUTCDate() +
-            date.getUTCHours() / 24 +
-            date.getUTCMinutes() / 1440 +
-            date.getUTCSeconds() / 86400
-        const A = Math.floor((14 - M) / 12)
-        const Y1 = Y + 4800 - A
-        const M1 = M + 12 * A - 3
-        return (
-            D +
-            Math.floor((153 * M1 + 2) / 5) +
-            365 * Y1 +
-            Math.floor(Y1 / 4) -
-            Math.floor(Y1 / 100) +
-            Math.floor(Y1 / 400) -
-            32045
-        )
-    }
-
-    getSolarDeclination(JulianDate: number) {
-        const n = JulianDate - 2451545
-        const L = (280.46 + 0.9856474 * n) % 360
-        const g = this.degToRad((357.528 + 0.9856003 * n) % 360)
-        const lambda = this.degToRad(L + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g))
-        return Math.asin(Math.sin(lambda) * Math.sin(this.degToRad(23.44)))
-    }
-
-    getSolarTime(date: Date, lon: number) {
-        const EoT = this.getEquationOfTime(date)
-        const offset = date.getTimezoneOffset() / 60
-        const standardMeridian = Math.round(lon / 15) * 15
-        const solarTime =
-            date.getUTCHours() +
-            (date.getUTCMinutes() + (4 * (standardMeridian - lon) + EoT)) / 60 -
-            offset
-        return (solarTime + 24) % 24
-    }
-
-    getEquationOfTime(date: Date) {
-        const JD = this.getJulianDate(date)
-        const n = JD - 2451545
-        const g = this.degToRad((357.528 + 0.9856003 * n) % 360)
-        const q = this.degToRad((280.46 + 0.9856474 * n) % 360)
-        return (
-            4 *
-            this.radToDeg(
-                0.000075 +
-                    0.001868 * Math.cos(q) -
-                    0.032077 * Math.sin(g) -
-                    0.014615 * Math.cos(2 * q) -
-                    0.040849 * Math.sin(2 * g)
-            )
-        )
-    }
-
-    degToRad(deg: number) {
-        return deg * (Math.PI / 180)
-    }
-
-    radToDeg(rad: number) {
-        return rad * (180 / Math.PI)
-    }
-}
-
-export const sunCalculator = new SunCalculator()