Creating Picture Frame Mouldings with Three.js

Based on your requirements for creating picture frame mouldings with proper 45° miter cuts at the corners, I can suggest a few approaches using Three.js geometries.

Approach 1: Using ExtrudeGeometry with CSG Operations

The most precise approach would be to:

1. Create straight extrusions for each side using ExtrudeGeometry
2. Apply Boolean operations to create the miter cuts

Here's how you might implement this:

JAVASCRIPTCopied
// First, define your profile shape
const profilePoints = [
  // Define your profile points here based on the moulding design
  new THREE.Vector2(0, 0),
  new THREE.Vector2(1, 0),
  new THREE.Vector2(1, 0.5),
  // ... more points to define your profile
];

const profileShape = new THREE.Shape(profilePoints);

// Create a straight extrusion for one side
const extrudeSettings = {
  steps: 1,
  depth: frameWidth, // Length of one side
  bevelEnabled: false
};

// Create the four sides
const side1 = new THREE.ExtrudeGeometry(profileShape, extrudeSettings);
const side1Mesh = new THREE.Mesh(side1, material);

// Create the other sides (rotated and positioned appropriately)
const side2 = side1.clone();
const side2Mesh = new THREE.Mesh(side2, material);
side2Mesh.rotation.y = Math.PI / 2;
side2Mesh.position.x = frameWidth;

// Similarly for sides 3 and 4...

// Now you need to apply CSG (Constructive Solid Geometry) operations
// to create the miter cuts at 45 degrees
// This would require a CSG library like ThreeBSP or similar

Approach 2: Using ExtrudeGeometry with a Custom Path

You could create a rectangular path and extrude your profile along it:

JAVASCRIPTCopied
// Define your profile shape
const profileShape = new THREE.Shape([
  // Your profile points
]);

// Create a rectangular path
const path = new THREE.Path();
path.moveTo(0, 0);
path.lineTo(frameWidth, 0);
path.lineTo(frameWidth, frameHeight);
path.lineTo(0, frameHeight);
path.lineTo(0, 0);

// Extrude settings
const extrudeSettings = {
  steps: 100,
  bevelEnabled: false,
  extrudePath: path
};

// Create the frame
const frameGeometry = new THREE.ExtrudeGeometry(profileShape, extrudeSettings);
const frameMesh = new THREE.Mesh(frameGeometry, material);

However, this approach has limitations with the corners as the extrusion will bend rather than create clean miter cuts.

Approach 3: Creating Four Separate Pieces with Angled Cuts

This is likely the most practical approach:

1. Create four straight extrusions
2. Use a plane to slice each end at 45°
3. Position them to form a frame

You could use the EdgeSplitModifier mentioned in the documentation to help with the edge splitting, or implement a custom solution to slice the geometry.

JAVASCRIPTCopied
// After creating your four extruded pieces:

// For each piece, create a slicing plane at 45 degrees
// You would need to implement a custom geometry cutting function
// or use a library that supports CSG operations

// Then position the pieces to form a frame
side1Mesh.position.set(0, 0, 0);
side2Mesh.position.set(frameWidth, 0, 0);
side3Mesh.position.set(frameWidth, frameHeight, 0);
side4Mesh.position.set(0, frameHeight, 0);

// Add all pieces to a group
const frameGroup = new THREE.Group();
frameGroup.add(side1Mesh, side2Mesh, side3Mesh, side4Mesh);

Recommendation

The third approach is likely the most straightforward and will give you the cleanest results. You'll need to:

1. Create each side separately using ExtrudeGeometry
2. Apply a 45° cut to each end (using a CSG library or custom geometry manipulation)
3. Position them precisely to form a complete frame

This will give you the proper miter joints shown in your reference image while maintaining the detailed profile of your moulding.