added drawable floor

js/main.js

@@ -23,7 +23,7 @@ import { ItemManager } from './ItemManager';
 let scene, renderer;
 let player;
 let rapierWorld, debugLines, itemManager;
-let debugRapier = true;
+let debugRapier = false;
 let isPaused = false;
 
 let socket;
@@ -66,7 +66,8 @@ async function init() {
   const blocker = document.getElementById( 'blocker' );
   const instructions = document.getElementById('instructions');
 
-  fragmentedFloor();
+  fragmentedFloor(10 * 200);
+  createTiledFloor(10, 200);
 
   renderer = new THREE.WebGLRenderer( { antialias: true } );
   renderer.setPixelRatio( window.devicePixelRatio );
@@ -174,10 +175,10 @@ async function animate() {
 
 //-- Other functions --//
 
-function fragmentedFloor() {
+function fragmentedFloor(size) {
   // floor
   
-  let floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
+  let floorGeometry = new THREE.PlaneGeometry( size, size, 100, 100 );
   floorGeometry.rotateX( - Math.PI / 2 );
 
   // vertex displacement
@@ -214,11 +215,6 @@ function fragmentedFloor() {
 
   const floor = new THREE.Mesh( floorGeometry, material );
   scene.add( floor );
-
-  const rbDesc = RAPIER.RigidBodyDesc.fixed();
-  const floorBody = rapierWorld.createRigidBody(rbDesc);
-  let floorCollider = RAPIER.ColliderDesc.cuboid(1000, 1, 1000).setFriction(0.7).setFrictionCombineRule(RAPIER.CoefficientCombineRule.Min);;
-  rapierWorld.createCollider(floorCollider, floorBody);
 }
 
 function onWindowResize() {
@@ -304,4 +300,48 @@ function drawDebugRapier() {
       new THREE.BufferAttribute(buffers.vertices, 3)
     );
   }
+}
+
+function createTiledFloor(gridSize = 20, tileSize = 50) {
+  const textureResolution = 1024;
+
+  for (let i = -gridSize / 2; i < gridSize / 2; i++) {
+    for (let j = -gridSize / 2; j < gridSize / 2; j++) {
+      const canvas = document.createElement('canvas');
+      canvas.width = canvas.height = textureResolution;
+      const context = canvas.getContext('2d');
+        // context.fillStyle = '#ffd500ff';
+        // context.fillRect(0, 0, textureResolution, textureResolution);
+
+      const canvasTexture = new THREE.CanvasTexture(canvas);
+      canvasTexture.flipY = false;
+      canvasTexture.needsUpdate = true;
+
+      const floorGeometry = new THREE.PlaneGeometry(tileSize, tileSize);
+      floorGeometry.rotateX(-Math.PI / 2);
+
+      const floorMaterial = new THREE.MeshStandardMaterial({
+        map: canvasTexture,
+        color: 0xffffff,
+        transparent: true
+      });
+
+      const floorTile = new THREE.Mesh(floorGeometry, floorMaterial);
+      floorTile.position.set(i * tileSize + tileSize / 2, 1, j * tileSize + tileSize / 2);
+      scene.add(floorTile);
+
+      // Make it drawable
+      spawnedObjects.push({ mesh: floorTile, body: null });
+
+      // --- Rapier Physics Body ---
+      const rbDesc = RAPIER.RigidBodyDesc.fixed().setTranslation(
+        floorTile.position.x,
+        floorTile.position.y,
+        floorTile.position.z
+      );
+      const floorBody = rapierWorld.createRigidBody(rbDesc);
+      const floorCollider = RAPIER.ColliderDesc.cuboid(tileSize / 2, 0.1, tileSize / 2);
+      rapierWorld.createCollider(floorCollider, floorBody);
+    }
+  }
 }