IsoCity

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16type Building = { x: number; z: number; h: number; shade: number }
17 
18function seedCity(size: number, density: number) {
19  const base: Building[] = []
20  const glow: Building[] = []
21  const half = (size - 1) / 2
22  for (let gx = 0; gx < size; gx++) {
23    for (let gz = 0; gz < size; gz++) {
24      if (Math.random() > density) continue
25      const falloff =
26        1 - Math.hypot(gx - half, gz - half) / Math.max(half * 1.45, 1)
27      const h =
28        0.25 + Math.pow(Math.random(), 1.8) * 2.6 * Math.max(0.2, falloff)
29      const building: Building = {
30        x: (gx - half) * 0.72,
31        z: (gz - half) * 0.72,
32        h,
33        shade: Math.random(),
34      }
35      // A few towers glow with --primary, like lit offices at night.
36      ;(Math.random() < 0.13 ? glow : base).push(building)
37    }
38  }
39  return { base, glow }
40}
41 
42function placeInstances(
43  mesh: THREE.InstancedMesh | null,
44  items: Building[],
45  colorFor: (b: Building, target: THREE.Color) => THREE.Color
46) {
47  if (!mesh) return
48  const dummy = new THREE.Object3D()
49  const color = new THREE.Color()
50  items.forEach((b, i) => {
51    dummy.position.set(b.x, b.h / 2, b.z)
52    dummy.scale.set(1, b.h, 1)
53    dummy.updateMatrix()
54    mesh.setMatrixAt(i, dummy.matrix)
55    mesh.setColorAt(i, colorFor(b, color))
56  })
57  mesh.instanceMatrix.needsUpdate = true
58  if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true
59}
60 
61function City({
62  size,
63  density,
64  speed,
65  theme,
66}: {
67  size: number
68  density: number
69  speed: number
70  theme: ThemeMode
71}) {
72  const { primaryColor, mutedColor, borderColor } = useShadcnTheme(theme)
73  const groupRef = React.useRef<THREE.Group>(null)
74  const baseRef = React.useRef<THREE.InstancedMesh>(null)
75  const glowRef = React.useRef<THREE.InstancedMesh>(null)
76  const glowMatRef = React.useRef<THREE.MeshStandardMaterial>(null)
77 
78  const { base, glow } = React.useMemo(
79    () => seedCity(size, density),
80    [size, density]
81  )
82 
83  React.useLayoutEffect(() => {
84    placeInstances(baseRef.current, base, (b, c) =>
85      c.copy(borderColor).lerp(mutedColor, 0.25 + b.shade * 0.5)
86    )
87    placeInstances(glowRef.current, glow, (_, c) => c.copy(primaryColor))
88// … truncated