Creating a Right Triangle with Concave Arc in Three.js

To create a right triangle with a concave arc instead of a flat hypotenuse that supports multiple materials, you have a few options:

Option 1: Custom BufferGeometry

You can create a custom BufferGeometry by defining the vertices, faces, and UV coordinates manually:

JAVASCRIPTCopied
function createConcaveTriangleGeometry(width, height, depth, arcResolution = 10) {
  const geometry = new THREE.BufferGeometry();
  
  // Create arrays to hold the vertex data
  const vertices = [];
  const indices = [];
  const uvs = [];
  const groups = [];
  
  // Define the corners of the triangle
  const bottomLeft = [0, 0, 0];
  const bottomRight = [width, 0, 0];
  const topLeft = [0, height, 0];
  
  // Add front and back faces vertices
  // Front face
  vertices.push(
    ...bottomLeft, ...bottomRight, ...topLeft,
    ...bottomLeft, ...bottomRight, ...topLeft
  );
  
  // Add the arc vertices on the front face
  for (let i = 0; i <= arcResolution; i++) {
    const t = i / arcResolution;
    const angle = Math.PI * 0.5 * t;
    
    // Calculate point on arc (using a quadratic bezier curve as an example)
    const x = width * (1 - Math.sin(angle));
    const y = height * Math.sin(angle);
    
    vertices.push(x, y, 0);
    vertices.push(x, y, depth);
    
    uvs.push(x / width, y / height);
    uvs.push(x / width, y / height);
  }
  
  // Create indices for the faces
  // Front face (material group 0)
  indices.push(0, 6, 4);
  groups.push({ start: 0, count: 3, materialIndex: 0 });
  
  // Back face (material group 1)
  indices.push(1, 5, 7);
  groups.push({ start: 3, count: 3, materialIndex: 1 });
  
  // Arc face (material group 2)
  for (let i = 0; i < arcResolution; i++) {
    const base = 6 + i * 2;
    indices.push(base, base + 2, base + 1);
    indices.push(base + 1, base + 2, base + 3);
  }
  groups.push({ start: 6, count: arcResolution * 6, materialIndex: 2 });
  
  // Set the attributes
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
  geometry.setIndex(indices);
  geometry.groups = groups;
  
  return geometry;
}

Option 2: Combine Multiple Geometries

Another approach is to create separate geometries for each part and combine them:

JAVASCRIPTCopied
function createConcaveTriangleWithMultipleMaterials(width, height, depth, arcResolution = 10) {
  // Create a group to hold all meshes
  const group = new THREE.Group();
  
  // Create materials
  const materials = [
    new THREE.MeshStandardMaterial({ color: 0xff0000 }), // Front face
    new THREE.MeshStandardMaterial({ color: 0x00ff00 }), // Back face
    new THREE.MeshStandardMaterial({ color: 0x0000ff })  // Arc face
  ];
  
  // Create the front and back triangular faces
  const triangleShape = new THREE.Shape();
  triangleShape.moveTo(0, 0);
  triangleShape.lineTo(width, 0);
  triangleShape.lineTo(0, height);
  triangleShape.lineTo(0, 0);
  
  const triangleGeometry = new THREE.ShapeGeometry(triangleShape);
  
  // Front face
  const frontFace = new THREE.Mesh(triangleGeometry, materials[0]);
  frontFace.position.z = depth / 2;
  group.add(frontFace);
  
  // Back face
  const backFace = new THREE.Mesh(triangleGeometry, materials[1]);
  backFace.position.z = -depth / 2;
  backFace.rotation.y = Math.PI;
  group.add(backFace);
  
  // Create the arc
  const arcGeometry = new THREE.BufferGeometry();
  const arcVertices = [];
  const arcIndices = [];
  
  // Generate points along the arc
  for (let i = 0; i <= arcResolution; i++) {
    const t = i / arcResolution;
    const angle = Math.PI * 0.5 * t;
    
    const x = width * (1 - Math.sin(angle));
    const y = height * Math.sin(angle);
    
    arcVertices.push(x, y, depth / 2);
    arcVertices.push(x, y, -depth / 2);
  }
  
  // Create faces for the arc
  for (let i = 0; i < arcResolution; i++) {
    const base = i * 2;
    arcIndices.push(
      base, base + 1, base + 2,
      base + 1, base + 3, base + 2
    );
  }
  
  arcGeometry.setAttribute('position', new THREE.Float32BufferAttribute(arcVertices, 3));
  arcGeometry.setIndex(arcIndices);
  arcGeometry.computeVertexNormals();
  
  const arcMesh = new THREE.Mesh(arcGeometry, materials[2]);
  group.add(arcMesh);
  
  return group;
}

Option 3: Use ExtrudeGeometry with Groups

You can still use ExtrudeGeometry but manually define material groups:

JAVASCRIPTCopied
function createConcaveTriangleWithExtrude(width, height, depth, arcResolution = 20) {
  // Create the shape with a curved hypotenuse
  const shape = new THREE.Shape();
  shape.moveTo(0, 0);
  shape.lineTo(width, 0);
  
  // Create the arc for the hypotenuse
  const arcPoints = [];
  for (let i = 0; i <= arcResolution; i++) {
    const t = i / arcResolution;
    const angle = Math.PI * 0.5 * t;
    
    const x = width * (1 - Math.sin(angle));
    const y = height * Math.sin(angle);
    
    arcPoints.push(new THREE.Vector2(x, y));
  }
  
  // Add the arc points to the shape
  shape.splineThru(arcPoints);
  shape.lineTo(0, 0);
  
  // Extrude settings
  const extrudeSettings = {
    steps: 1,
    depth: depth,
    bevelEnabled: false
  };
  
  // Create the geometry
  const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  
  // Manually assign material groups
  // Count the faces to determine group sizes
  const faceCount = geometry.index.count / 3;
  
  // Assign material groups (this requires understanding the face order in ExtrudeGeometry)
  geometry.clearGroups();
  geometry.addGroup(0, faceCount / 3, 0);                // Front/back faces
  geometry.addGroup(faceCount / 3, faceCount / 3, 1);    // Sides
  geometry.addGroup(2 * faceCount / 3, faceCount / 3, 2); // Bottom
  
  // Create the mesh with an array of materials
  const materials = [
    new THREE.MeshStandardMaterial({ color: 0xff0000 }),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
    new THREE.MeshStandardMaterial({ color: 0x0000ff })
  ];
  
  return new THREE.Mesh(geometry, materials);
}

Each of these approaches allows you to create a right triangle with a concave arc hypotenuse while supporting multiple materials. The custom BufferGeometry approach gives you the most control but requires more manual work. The combined geometries approach is more modular, while the ExtrudeGeometry approach leverages Three.js's built-in functionality.