src/lib/components/old/Floor.svelte

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

	function createGridTexture(): THREE.CanvasTexture {
		const size = 100;
		const canvas = document.createElement("canvas");
		canvas.width = canvas.height = size;
		const ctx = canvas.getContext("2d");

		if (ctx) {
			// Base color
			ctx.fillStyle = "#71717A";
			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(10, 10);
		return texture;
	}

	const gridTexture = createGridTexture();
</script>

<T.Mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
	<T.PlaneGeometry args={[10, 10]} />
	<T.MeshPhysicalMaterial
		color={0x808080}
		side={THREE.DoubleSide}
		transparent
		opacity={1}
		map={gridTexture}
	/>
</T.Mesh>