Updates shadows and conditional ground plane

app2/src/lib/components/Visualization.svelte

@@ -14,6 +14,7 @@
     export let orbit = false
     export let panel = true
     export let debug = false
+    export let ground = true
 
 	let sceneManager = new SceneBuilder();
 	let canvas: HTMLCanvasElement
@@ -79,16 +80,18 @@
 			.addRenderer({ antialias: true, canvas, alpha: true })
 			.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
 			.addOrbitControls(8, 30, orbit)
-			.addGroundPlane()
+            .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 0.9 })
-			// .addGridHelper({ grid:{size: 250, divisions: 125 }})
+			.addAmbientLight({ color: 0xffffff, intensity: 0.6 })
-			.addAmbientLight({ color: 0xffffff, intensity: 0.7 })
-			.addDirectionalLight({ x: 10, y: 100, z: 10, color: 0xffffff, intensity: 1 })
-			// .addArrowHelper({ origin: { x: 0, y: 0, z: 0 }, direction: { x: 0, y: -2, z: 0 } })
 			.addFogExp2(0xcccccc, 0.015)
 			.addModel($model)
 			.fillParent()
 			.addRenderCb(render)
 			.startRenderLoop();
+            
+            if (ground) sceneManager
+			.addGroundPlane()
+            .addGridHelper({ size: 30, divisions: 25 })
+        
         
         if (sky) sceneManager.addSky()
         if (debug) sceneManager.addDragControl(updateAngles)

app2/src/lib/sceneBuilder.ts

@@ -18,7 +18,8 @@ import {
 	MeshPhongMaterial,
 	EquirectangularReflectionMapping,
 	ACESFilmicToneMapping,
-	MathUtils
+	MathUtils,
+	MeshStandardMaterial
 } from 'three';
 import { Sky } from 'three/addons/objects/Sky.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
@@ -75,6 +76,7 @@ export default class SceneBuilder {
 	private isLoaded: boolean = false;
 	public isDragging: boolean = false;
 	highlightMaterial: any;
+	sky: Sky;
 
 	constructor() {
 		this.scene = new Scene();
@@ -91,14 +93,14 @@ export default class SceneBuilder {
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.toneMapping = ACESFilmicToneMapping;
 		this.renderer.toneMappingExposure = 0.85;
-		if (!parameters.canvas) document.body.appendChild(this.renderer.domElement);
+		if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
 		return this;
 	};
 
 	public addSky = () => {
-		const sky = new Sky();
+		this.sky = new Sky();
-		sky.scale.setScalar(450000);
+		this.sky.scale.setScalar(450000);
-		this.scene.add(sky);
+		this.scene.add(this.sky);
 		const effectController = {
 			turbidity: 10,
 			rayleigh: 3,
@@ -108,7 +110,7 @@ export default class SceneBuilder {
 			azimuth: 180,
 			exposure: this.renderer.toneMappingExposure
 		};
-		const uniforms = sky.material.uniforms;
+		const uniforms = this.sky.material.uniforms;
 		uniforms['turbidity'].value = effectController.turbidity;
 		uniforms['rayleigh'].value = effectController.rayleigh;
 		uniforms['mieCoefficient'].value = effectController.mieCoefficient;
@@ -131,7 +133,8 @@ export default class SceneBuilder {
 	};
 
 	public addGroundPlane = (options?: position) => {
-		this.ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ side: 2 }));
+		var planeMaterial = new MeshStandardMaterial({ color: 0x808080, side: 2, opacity: 0.5 });
+		this.ground = new Mesh(new PlaneGeometry(), planeMaterial);
 		this.ground.rotation.x = -Math.PI / 2;
 		this.ground.scale.setScalar(30);
 		this.ground.position.set(options?.x ?? 0, options?.y ?? 0, options?.z ?? 0);
@@ -158,11 +161,13 @@ export default class SceneBuilder {
 	public addDirectionalLight = (options: directionalLight) => {
 		const directionalLight = new DirectionalLight(options.color, options.intensity);
 		directionalLight.castShadow = true;
-		directionalLight.shadow.mapSize.setScalar(2048);
+		directionalLight.shadow.camera.top = 10;
-		directionalLight.shadow.mapSize.width = 1024;
+		directionalLight.shadow.camera.bottom = -10;
-		directionalLight.shadow.mapSize.height = 1024;
+		directionalLight.shadow.camera.right = 10;
+		directionalLight.shadow.camera.left = -10;
+		directionalLight.shadow.mapSize.set(4096, 4096);
+
 		directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-		directionalLight.shadow.radius = 5;
 		this.scene.add(directionalLight);
 		return this;
 	};

app2/src/routes/+page.svelte

@@ -9,7 +9,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}/>
+            <Visualization sky={false} orbit panel={false} ground={false}/>
         </div>
 		<div class="card-body w-80">
 			<h2 class="card-title text-center text-2xl">Welcome to {data.app_name}</h2>

app2/src/routes/system/status/+page.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import SystemStatus from './SystemStatus.svelte';
-	import { user } from '$lib/stores/user';
-	import { page } from '$app/stores';
 
 	export let data: PageData;
 </script>