shapes.js

import * as THREE from 'three'

function createMaterials (colors) {
  return [
    new THREE.MeshBasicMaterial({ color: colors[0] }), // right
    new THREE.MeshBasicMaterial({ color: colors[1] }), // left
    new THREE.MeshBasicMaterial({ color: colors[2] }), // top
    new THREE.MeshBasicMaterial({ color: colors[0] }), // bottom
    new THREE.MeshBasicMaterial({ color: colors[1] }), // front
    new THREE.MeshBasicMaterial({ color: colors[2] }) // back
  ]
}

function createCube (
  group,
  materials,
  x,
  y,
  z,
  scaleX = 1,
  scaleY = 1,
  scaleZ = 1,
  rotationY = 0
) {
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const cube = new THREE.Mesh(geometry, materials)
  cube.position.set(x, y, z)
  cube.scale.set(scaleX, scaleY, scaleZ)
  cube.rotation.y = rotationY
  group.add(cube)
  return cube
}

export function generateGrid (group, colors, config) {
  const materials = createMaterials(colors)
  const width = (config.cols - 1) * config.spacing
  const depth = (config.rows - 1) * config.spacing
  const startX = -width / 2
  const startZ = -depth / 2

  for (let row = 0; row < config.rows; row++) {
    for (let col = 0; col < config.cols; col++) {
      const x = startX + col * config.spacing
      const z = startZ + row * config.spacing
      createCube(group, materials, x, 0, z, config.blockWidth, config.blockHeight, config.blockDepth)
    }
  }
}

export function generateRotor (group, colors, config) {
  // Rotor like a cog:
  // - Outer tips (right/left faces): colors[0]
  // - Inside of wedges (front/back sides): colors[1]
  // - Top/bottom: colors[2]
  const materials = [
    new THREE.MeshBasicMaterial({ color: colors[0] }), // right - outer tip
    new THREE.MeshBasicMaterial({ color: colors[0] }), // left - inner tip
    new THREE.MeshBasicMaterial({ color: colors[2] }), // top
    new THREE.MeshBasicMaterial({ color: colors[2] }), // bottom
    new THREE.MeshBasicMaterial({ color: colors[1] }), // front - side of wedge
    new THREE.MeshBasicMaterial({ color: colors[1] }) // back - side of wedge
  ]

  for (let i = 0; i < config.count / 2; i++) {
    const angle = (i / config.count) * Math.PI * 2

    createCube(
      group,
      materials,
      Math.cos(angle) * config.radius,
      0,
      Math.sin(angle) * config.radius,
      config.blockWidth,
      config.blockHeight,
      config.blockDepth,
      -angle + Math.PI / 2
    )
  }
}

export function generateZiggurat (group, colors, config) {
  const materials = createMaterials(colors)

  let totalHeight = 0
  for (let i = 0; i < config.tiers; i++) {
    totalHeight += config.blockHeight
  }

  const startY = -totalHeight / 2
  let currentY = startY

  for (let i = 0; i < config.tiers; i++) {
    const ratio = config.tiers > 1 ? (config.tiers - 1 - i) / (config.tiers - 1) : 0
    const size = 1 + (config.baseSize - 1) * ratio

    const finalWidth = size * config.blockWidth
    const finalDepth = size * config.blockDepth
    const yPos = currentY + config.blockHeight / 2

    createCube(group, materials, 0, yPos, 0, finalWidth, config.blockHeight, finalDepth)
    currentY += config.blockHeight
  }
}

export function generateStack (group, colors, config) {
  const materials = createMaterials(colors)
  const totalHeight = config.count * (config.blockHeight + config.spacing)

  for (let i = 0; i < config.count; i++) {
    const y = i * (config.blockHeight + config.spacing) - totalHeight / 2
    const rotation = 0
    createCube(group, materials, 0, y, 0, config.blockWidth, config.blockHeight, config.blockDepth, rotation)
  }
}

export function generateSpire (group, colors, config) {
  // Spire rotates so all 4 sides are visible - make sure they have good color variation
  const materials = [
    new THREE.MeshBasicMaterial({ color: colors[0] }), // right
    new THREE.MeshBasicMaterial({ color: colors[1] }), // left
    new THREE.MeshBasicMaterial({ color: colors[2] }), // top
    new THREE.MeshBasicMaterial({ color: colors[2] }), // bottom (same as top)
    new THREE.MeshBasicMaterial({ color: colors[0] }), // front (same as right)
    new THREE.MeshBasicMaterial({ color: colors[1] }) // back (same as left)
  ]

  const totalHeight = config.count * (config.blockHeight + config.spacing)

  for (let i = 0; i < config.count; i++) {
    const y = i * (config.blockHeight + config.spacing) - totalHeight / 2
    const rotation = i * config.twistPerBlock
    createCube(group, materials, 0, y, 0, config.blockWidth, config.blockHeight, config.blockDepth, rotation)
  }
}

export function generateHelix (group, colors, config) {
  // Helix rotates so all 4 sides are visible - make sure they have good color variation
  const materials = [
    new THREE.MeshBasicMaterial({ color: colors[0] }), // right
    new THREE.MeshBasicMaterial({ color: colors[1] }), // left
    new THREE.MeshBasicMaterial({ color: colors[2] }), // top
    new THREE.MeshBasicMaterial({ color: colors[2] }), // bottom (same as top)
    new THREE.MeshBasicMaterial({ color: colors[0] }), // front (same as right)
    new THREE.MeshBasicMaterial({ color: colors[1] }) // back (same as left)
  ]

  const totalHeight = config.count * (config.blockHeight + config.spacing)

  for (let i = 0; i < config.count; i++) {
    const y = i * (config.blockHeight + config.spacing) - totalHeight / 2
    const rotation = i * config.twistPerBlock
    createCube(group, materials, 0, y, 0, config.blockWidth, config.blockHeight, config.blockDepth, rotation)
  }
}

export function generateShape (shapeConfig) {
  const group = new THREE.Group()
  const config = shapeConfig.config
  const colors = shapeConfig.palette.colors

  switch (config.shape) {
    case 'grid':
      generateGrid(group, colors, config)
      break
    case 'rotor':
      generateRotor(group, colors, config)
      break
    case 'ziggurat':
      generateZiggurat(group, colors, config)
      break
    case 'stack':
      generateStack(group, colors, config)
      break
    case 'spire':
      generateSpire(group, colors, config)
      break
    case 'helix':
      generateHelix(group, colors, config)
      break
  }

  return group
}