feat: build procedural lifecycle-safe drive scene

src/scene/world/terrain.ts

@@ -0,0 +1,43 @@
+import * as THREE from 'three';
+import type { SceneResourceBag } from '@/scene/resources';
+
+export function createTerrain(resources: SceneResourceBag, segments: number) {
+  const group = new THREE.Group();
+  const geometry = resources.own(
+    'geometry',
+    new THREE.PlaneGeometry(72, 240, Math.max(4, Math.floor(segments / 4)), segments),
+  );
+  const cyan = resources.own('material', new THREE.MeshBasicMaterial({
+    color: 0x168fae,
+    wireframe: true,
+    transparent: true,
+    opacity: 0.34,
+  }));
+  const magenta = resources.own('material', new THREE.MeshBasicMaterial({
+    color: 0xbd317f,
+    wireframe: true,
+    transparent: true,
+    opacity: 0.22,
+  }));
+
+  const planes: Array<{ position: { z: number } }> = [];
+  for (const [x, material] of [[-44, magenta], [44, cyan]] as const) {
+    const plane = new THREE.Mesh(geometry, material);
+    plane.rotation.x = -Math.PI / 2;
+    plane.position.set(x, -0.2, -92);
+    planes.push(plane);
+    group.add(plane);
+  }
+
+  return {
+    group,
+    update(distance: number) {
+      const drift = modulo(distance * 1.4, 8);
+      for (const plane of planes) plane.position.z = -92 + drift;
+    },
+  };
+}
+
+function modulo(value: number, divisor: number): number {
+  return ((value % divisor) + divisor) % divisor;
+}