Spaces:
Running
Running
File size: 1,370 Bytes
3aea7c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<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>
|