Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Remove sky in favor of static background color

Browse Source
This commit is contained in:
Rune Harlyk
2025-10-20 21:04:26 +02:00
parent 64ef3d31eb
commit 48c0b01f93
5 changed files with 17 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/components/Visualization.svelte
+16 -16
View File
@@ -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
-33
View File
@@ -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
-1
View File
@@ -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
-86
View File
@@ -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()
app/src/routes/+page.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
<div class="hero bg-base-100 h-screen">
<div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
<div class="w-64 h-64">
<Visualization sky={false} orbit panel={false} ground={false} />
<Visualization defaultColor={null} orbit panel={false} ground={false} />
</div>
<div class="card-body w-80">
<h2 class="card-title text-center text-2xl">Begin you journey</h2>