src/lib/components/scene/Floor.svelte

<script lang="ts">
	import { T } from '@threlte/core';
	import * as THREE from 'three';

	/**
	 * Creates a grid texture for the ground plane
	 * Matches the original React implementation for visual consistency
	 */
	function createGridTexture(): THREE.CanvasTexture {
		const size = 200;
		const canvas = document.createElement('canvas');
		canvas.width = canvas.height = size;
		const ctx = canvas.getContext('2d');

		if (ctx) {
			// Base color
			ctx.fillStyle = '#aaa';
			ctx.fillRect(0, 0, size, size);

			// Grid lines
			ctx.strokeStyle = '#707070';
			ctx.lineWidth = 8;
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(0, size);
			ctx.lineTo(size, size);
			ctx.lineTo(size, 0);
			ctx.closePath();
			ctx.stroke();
		}

		const texture = new THREE.CanvasTexture(canvas);
		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
		texture.repeat.set(100, 100);
		return texture;
	}

	// Create texture reactively using Svelte 5 runes
	const gridTexture = createGridTexture();
</script>

<!-- Ground plane with grid texture matching React version -->
<T.Mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
	<T.PlaneGeometry args={[30, 30]} />
	<T.MeshPhysicalMaterial
		color={0x808080}
		metalness={0.7}
		roughness={0.3}
		reflectivity={0.1}
		clearcoat={0.3}
		side={THREE.DoubleSide}
		transparent
		opacity={0.7}
		map={gridTexture}
	/>
</T.Mesh>