Spaces:
Running
Running
File size: 1,053 Bytes
3aea7c6 18b0fa5 3aea7c6 ca4340e 18b0fa5 3aea7c6 18b0fa5 3aea7c6 18b0fa5 3aea7c6 18b0fa5 3aea7c6 ca4340e 3aea7c6 ca4340e 3aea7c6 ca4340e 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 |
<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>
|