Adding Volume to a PlaneGeometry Terrain

To create a "boxed-up" terrain with volume from your existing PlaneGeometry, you have a few options. The most straightforward approach would be to use the ExtrudeGeometry, but since you're already manipulating vertices directly, here's a solution that builds on your current code:

Approach: Creating Side and Bottom Faces

You can create a volumetric terrain by:

1. Keeping your current top face (PlaneGeometry)
2. Adding side walls around the perimeter
3. Adding a bottom face

Here's how you could modify your code:

JAVASCRIPTCopied
function createTerain(data, scene) {
  const gridSize = Math.sqrt(data.length);
  const baseDepth = -5; // How deep the box extends below the terrain
  
  // Create top face (your existing terrain)
  const topGeometry = new THREE.PlaneGeometry(gridSize, gridSize, gridSize - 1, gridSize - 1);
  const positions = topGeometry.attributes.position.array;
  data.forEach(([x, y, z], j) => positions.set([x, y, z], j * 3));
  topGeometry.attributes.position.needsUpdate = true;
  
  // Create a BufferGeometry to hold all faces
  const fullGeometry = new THREE.BufferGeometryUtils.mergeBufferGeometries([
    topGeometry,
    createSideFaces(topGeometry, baseDepth),
    createBottomFace(topGeometry, baseDepth)
  ]);
  
  const material = new THREE.MeshLambertMaterial({ 
    color: COLOR,
    side: THREE.DoubleSide // Ensure both sides are visible
  });
  
  const mesh = new THREE.Mesh(fullGeometry, material);
  scene.add(mesh);
  
  return mesh;
}

function createSideFaces(topGeometry, baseDepth) {
  const positions = topGeometry.attributes.position.array;
  const indices = [];
  const vertices = [];
  
  // Get the perimeter vertices
  const width = Math.sqrt(positions.length / 3);
  const perimeterIndices = getPerimeterIndices(width);
  
  // For each perimeter vertex, create a face connecting to the base
  perimeterIndices.forEach((index, i) => {
    const nextIndex = perimeterIndices[(i + 1) % perimeterIndices.length];
    
    // Top vertices
    const x1 = positions[index * 3];
    const y1 = positions[index * 3 + 1];
    const z1 = positions[index * 3 + 2];
    
    const x2 = positions[nextIndex * 3];
    const y2 = positions[nextIndex * 3 + 1];
    const z2 = positions[nextIndex * 3 + 2];
    
    // Add vertices for the side face
    vertices.push(
      x1, y1, z1,  // Top left
      x2, y2, z2,  // Top right
      x1, y1, baseDepth,  // Bottom left
      x2, y2, baseDepth   // Bottom right
    );
    
    // Add indices for the side face (two triangles)
    const baseIndex = i * 4;
    indices.push(
      baseIndex, baseIndex + 1, baseIndex + 2,
      baseIndex + 1, baseIndex + 3, baseIndex + 2
    );
  });
  
  const sideGeometry = new THREE.BufferGeometry();
  sideGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  sideGeometry.setIndex(indices);
  sideGeometry.computeVertexNormals();
  
  return sideGeometry;
}

function createBottomFace(topGeometry, baseDepth) {
  // Create a copy of the top geometry for the bottom face
  const bottomGeometry = topGeometry.clone();
  const positions = bottomGeometry.attributes.position.array;
  
  // Set all z values to baseDepth
  for (let i = 2; i < positions.length; i += 3) {
    positions[i] = baseDepth;
  }
  
  // Flip the face normals for the bottom
  bottomGeometry.attributes.position.needsUpdate = true;
  bottomGeometry.computeVertexNormals();
  
  // Reverse the triangle indices to make them face outward
  const indices = bottomGeometry.index.array;
  for (let i = 0; i < indices.length; i += 3) {
    const temp = indices[i];
    indices[i] = indices[i + 2];
    indices[i + 2] = temp;
  }
  
  return bottomGeometry;
}

function getPerimeterIndices(width) {
  const indices = [];
  const lastIndex = width - 1;
  
  // Top row
  for (let i = 0; i < width; i++) {
    indices.push(i);
  }
  
  // Right column (excluding corners)
  for (let i = 1; i < width - 1; i++) {
    indices.push(i * width + lastIndex);
  }
  
  // Bottom row (in reverse)
  for (let i = width - 1; i >= 0; i--) {
    indices.push(lastIndex * width + i);
  }
  
  // Left column (excluding corners, in reverse)
  for (let i = width - 2; i > 0; i--) {
    indices.push(i * width);
  }
  
  return indices;
}

Alternative: Using ExtrudeGeometry

If you prefer a more built-in approach, you could convert your terrain to a Shape and use ExtrudeGeometry:

JAVASCRIPTCopied
function createVolumetricTerrain(data, scene) {
  const gridSize = Math.sqrt(data.length);
  
  // Create a 2D shape from the perimeter points
  const shape = new THREE.Shape();
  
  // Extract perimeter points and start the shape
  const perimeterPoints = extractPerimeterPoints(data, gridSize);
  shape.moveTo(perimeterPoints[0].x, perimeterPoints[0].y);
  
  // Add all perimeter points to the shape
  for (let i = 1; i < perimeterPoints.length; i++) {
    shape.lineTo(perimeterPoints[i].x, perimeterPoints[i].y);
  }
  
  // Close the shape
  shape.closePath();
  
  // Create extrusion settings
  const extrudeSettings = {
    steps: 1,
    depth: 5,
    bevelEnabled: false
  };
  
  // Create the extruded geometry
  const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  
  // Apply your height map to the top face
  applyHeightMapToExtrudedGeometry(geometry, data, gridSize);
  
  const material = new THREE.MeshLambertMaterial({ color: COLOR });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  return mesh;
}

Note that both approaches require additional helper functions that would need to be implemented based on your specific data structure. The first approach builds directly on your existing code and gives you more control over the exact geometry.