@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/editor/first-person/build-collider-world.test.ts

@@ -105,6 +105,36 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     world?.dispose()
   })
 
+  test('skips meshes hidden by an invisible ancestor (stale roof segment CSG)', () => {
+    registerColliderDefinition('column', ColumnNode, 'structure')
+
+    // Mirror the roof's segments-wrapper shape: the registered mesh's own
+    // visible flag stays true while a hidden wrapper hides it at render
+    // time. The collider must match the render, not the own-flag.
+    const column = ColumnNode.parse({ id: 'column_test' })
+    const visibleColumn = ColumnNode.parse({ id: 'column_visible', position: [3, 0, 0] })
+    setSceneNodes([column, visibleColumn])
+
+    const wrapper = new Group()
+    wrapper.visible = false
+    const hiddenMesh = new Mesh(new BoxGeometry(10, 2, 10), new MeshBasicMaterial())
+    wrapper.add(hiddenMesh)
+    wrapper.updateMatrixWorld(true)
+    sceneRegistry.nodes.set(column.id, hiddenMesh)
+    sceneRegistry.byType[column.type]!.add(column.id)
+
+    mountNode(visibleColumn, [1, 2, 1], [3, 1, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    // Bounds reflect only the visible 1×1 column at x = 3; the 10×10 mesh
+    // under the hidden wrapper contributed no geometry.
+    expect(world?.bounds?.min.x).toBeCloseTo(2.5)
+    expect(world?.bounds?.max.x).toBeCloseTo(3.5)
+    world?.dispose()
+  })
+
   test('leaves elevators to their dedicated dynamic collider meshes', () => {
     registerColliderDefinition('elevator', ElevatorNode, 'structure')
 
@@ -141,9 +171,12 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     // Ground slab sits just below the site ground plane (y = 0).
     expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
     expect(world?.bounds?.max.y).toBeCloseTo(0)
-    // Default site footprint falls back to the 30 m minimum size.
-    expect(world?.bounds?.min.x).toBeCloseTo(-15)
-    expect(world?.bounds?.max.x).toBeCloseTo(15)
+    // The ground collider extends far past the site polygon so stepping out of
+    // the site boundary never drops the player below the ground plane.
+    expect(world?.bounds?.min.x).toBeCloseTo(-1000)
+    expect(world?.bounds?.max.x).toBeCloseTo(1000)
+    expect(world?.bounds?.min.z).toBeCloseTo(-1000)
+    expect(world?.bounds?.max.z).toBeCloseTo(1000)
     world?.dispose()
   })
 })

package/src/components/editor/first-person/build-collider-world.ts

@@ -27,6 +27,7 @@ const OPERATION_DOOR_COLLIDER_OPEN_THRESHOLD = 0.85
 const LEVEL_FALLBACK_FLOOR_THICKNESS = 0.08
 const LEVEL_FALLBACK_FLOOR_PADDING = 2
 const LEVEL_FALLBACK_FLOOR_MIN_SIZE = 30
+const SITE_GROUND_COLLIDER_MIN_SIZE = 2000
 
 export const FIRST_PERSON_SPAWN_EYE_HEIGHT = SPAWN_EYE_HEIGHT
 
@@ -49,6 +50,22 @@ function isMesh(object: THREE.Object3D): object is THREE.Mesh {
   return 'isMesh' in object && (object as THREE.Mesh).isMesh
 }
 
+// Renderer-effective visibility: an invisible ancestor hides the whole
+// subtree at render time even when the object's own flag is true. The
+// collider world must match what's rendered — the roof keeps stale,
+// UNCUT per-segment CSG inside its hidden `segments-wrapper` (full-edit
+// exit hides the wrapper without stripping geometry), and cloning those
+// meshes would block the walkthrough player at openings the visible
+// merged shell has cut through.
+function isEffectivelyVisible(object: THREE.Object3D) {
+  let current: THREE.Object3D | null = object
+  while (current) {
+    if (!current.visible) return false
+    current = current.parent
+  }
+  return true
+}
+
 function isColliderMaterialVisible(material: THREE.Material | THREE.Material[]) {
   return Array.isArray(material) ? material.some((entry) => entry.visible) : material.visible
 }
@@ -129,8 +146,10 @@ function collectLevelFallbackFloorGeometries(nodes: SceneNodes) {
 // a dedicated collider, a spawn on the bare ground (no slab, or not parented to
 // a level that triggers the per-level fallback) has no floor to stand on and the
 // walkthrough player falls through. Derive a thin ground slab from node data (not
-// the rendered mesh) so it exists regardless of geometry-mount timing, sized to
-// cover the whole scene footprint at the site's ground plane.
+// the rendered mesh) so it exists regardless of geometry-mount timing. The slab
+// is effectively unbounded (not sized to the site polygon): the ground plane must
+// keep holding the player up even after they step past the site boundary,
+// otherwise they fall below the ground plane into the void.
 function createSiteGroundColliderGeometry(site: SiteNode, nodes: SceneNodes) {
   if (site.visible === false) return null
 
@@ -142,11 +161,11 @@ function createSiteGroundColliderGeometry(site: SiteNode, nodes: SceneNodes) {
   const [boundsWidth, boundsDepth] = bounds?.size ?? [0, 0]
   const width = Math.max(
     boundsWidth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
-    LEVEL_FALLBACK_FLOOR_MIN_SIZE,
+    SITE_GROUND_COLLIDER_MIN_SIZE,
   )
   const depth = Math.max(
     boundsDepth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
-    LEVEL_FALLBACK_FLOOR_MIN_SIZE,
+    SITE_GROUND_COLLIDER_MIN_SIZE,
   )
 
   const geometry = createBoxColliderGeometry(width, LEVEL_FALLBACK_FLOOR_THICKNESS, depth)
@@ -316,9 +335,12 @@ function collectColliderGeometriesFromNode(
     if (visitedMeshes.has(object)) return
     visitedMeshes.add(object)
 
+    // Prune hidden subtrees — children of an invisible group never render,
+    // so they must not collide either (see isEffectivelyVisible).
+    if (!object.visible) return
+
     if (
       isMesh(object) &&
-      object.visible &&
       isColliderMaterialVisible(object.material) &&
       !SKIPPED_MESH_NAMES.has(object.name)
     ) {
@@ -361,6 +383,11 @@ export function buildFirstPersonColliderWorldFromRegistry(): FirstPersonCollider
     const root = sceneRegistry.nodes.get(nodeId)
     if (!root) continue
 
+    // Registered objects can sit inside a hidden wrapper (roof segments
+    // under `segments-wrapper`) — the per-node traversal starts AT the
+    // object, so the ancestor chain must be checked here.
+    if (!isEffectivelyVisible(root)) continue
+
     if (node.type === 'door') {
       const doorGeometry = createDoorLeafColliderGeometry(root, node)
       if (doorGeometry) {

package/src/components/editor/first-person-controls.tsx

@@ -45,6 +45,7 @@ import {
 } from 'three'
 import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
 import '../../three-types'
+import { BVHEcctrl, type BVHEcctrlApi, type MovementInput } from '@pascal-app/viewer'
 import {
   closeDoorOpenState,
   DOOR_SWING_OPEN_ANGLE,
@@ -64,8 +65,6 @@ import {
   type FirstPersonColliderWorld,
   type FirstPersonSpawn,
 } from './first-person/build-collider-world'
-import type { BVHEcctrlApi } from './first-person/bvh-ecctrl'
-import BVHEcctrl from './first-person/bvh-ecctrl'
 
 const CAMERA_EYE_OFFSET = 0.45
 const LOOK_SENSITIVITY = 0.002
@@ -78,7 +77,11 @@ const ELEVATOR_COLLIDER_FLOOR_THICKNESS = 0.08
 const ELEVATOR_COLLIDER_DOOR_DEPTH = 0.12
 const ELEVATOR_ENTRY_DOOR_OPEN_THRESHOLD = 0.72
 const DEFAULT_ELEVATOR_LEVEL_HEIGHT = 2.5
-const keyboardMap = [
+const VOID_FALL_RESPAWN_DEPTH = 12
+
+type MovementKeyName = Exclude<keyof MovementInput, 'joystick'>
+
+const movementKeyboardBindings: Array<{ name: MovementKeyName; keys: string[] }> = [
   { name: 'forward', keys: ['ArrowUp', 'KeyW'] },
   { name: 'backward', keys: ['ArrowDown', 'KeyS'] },
   { name: 'leftward', keys: ['ArrowLeft', 'KeyA'] },
@@ -86,6 +89,36 @@ const keyboardMap = [
   { name: 'jump', keys: ['Space'] },
   { name: 'run', keys: ['ShiftLeft', 'ShiftRight'] },
 ]
+const keyboardMap = movementKeyboardBindings
+const movementKeyToName = new Map<string, MovementKeyName>(
+  movementKeyboardBindings.flatMap(({ name, keys }) => keys.map((key) => [key, name] as const)),
+)
+
+const inactiveMovementInput: MovementInput = {
+  backward: false,
+  forward: false,
+  jump: false,
+  leftward: false,
+  rightward: false,
+  run: false,
+}
+
+function getMovementInputForKey(code: string, active: boolean): MovementInput | null {
+  const name = movementKeyToName.get(code)
+  return name ? ({ [name]: active } as MovementInput) : null
+}
+
+function focusFirstPersonCanvas(canvas: HTMLCanvasElement) {
+  const activeElement = document.activeElement
+  if (activeElement instanceof HTMLElement && !canvas.contains(activeElement)) {
+    activeElement.blur()
+  }
+
+  if (!canvas.hasAttribute('tabindex')) {
+    canvas.tabIndex = -1
+  }
+  canvas.focus({ preventScroll: true })
+}
 
 const cameraOffset = new Vector3(0, CAMERA_EYE_OFFSET, 0)
 const cameraEuler = new Euler(0, 0, 0, 'YXZ')
@@ -535,6 +568,8 @@ export const FirstPersonControls = () => {
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const placedSpawnNode = useScene((state) => resolvePlacedSpawnNode(state.nodes, selectedLevelId))
   const controllerRef = useRef<BVHEcctrlApi | null>(null)
+  const movementInputRef = useRef<MovementInput>({ ...inactiveMovementInput })
+  const hadPointerLockRef = useRef(false)
   const yawRef = useRef(0)
   const pitchRef = useRef(0)
   const interactableTargetRef = useRef<FirstPersonInteractableTarget | null>(null)
@@ -577,6 +612,13 @@ export const FirstPersonControls = () => {
     setIsElevatorRideLocked(locked)
   }, [])
 
+  const setControllerApi = useCallback((api: BVHEcctrlApi | null) => {
+    controllerRef.current = api
+    if (api) {
+      api.setMovement(movementInputRef.current)
+    }
+  }, [])
+
   const resolveInteractableDoorId = useCallback((): AnyNodeId | null => {
     const nodes = useScene.getState().nodes
     camera.updateMatrixWorld(true)
@@ -915,6 +957,14 @@ export const FirstPersonControls = () => {
     })
   }, [camera, controllerStart, placedSpawn, world])
 
+  useEffect(() => {
+    const canvas = gl.domElement
+    focusFirstPersonCanvas(canvas)
+
+    const frame = window.requestAnimationFrame(() => focusFirstPersonCanvas(canvas))
+    return () => window.cancelAnimationFrame(frame)
+  }, [gl])
+
   useEffect(() => {
     const canvas = gl.domElement
     const handleMouseMove = (e: MouseEvent) => {
@@ -945,14 +995,29 @@ export const FirstPersonControls = () => {
       toggleInteractableTarget()
     }
 
+    const handlePointerLockChange = () => {
+      const isLocked = document.pointerLockElement === canvas
+      if (isLocked) {
+        hadPointerLockRef.current = true
+        return
+      }
+
+      if (hadPointerLockRef.current && useEditor.getState().isFirstPersonMode) {
+        useEditor.getState().setFirstPersonMode(false)
+      }
+    }
+
+    handlePointerLockChange()
     document.addEventListener('mousemove', handleMouseMove)
     document.addEventListener('click', handleClick)
     document.addEventListener('mousedown', handleMouseDown, true)
+    document.addEventListener('pointerlockchange', handlePointerLockChange)
 
     return () => {
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('click', handleClick)
       document.removeEventListener('mousedown', handleMouseDown, true)
+      document.removeEventListener('pointerlockchange', handlePointerLockChange)
       if (document.pointerLockElement === canvas) {
         document.exitPointerLock()
       }
@@ -962,7 +1027,24 @@ export const FirstPersonControls = () => {
   useEffect(() => {
     const canvas = gl.domElement
 
+    const applyMovementKey = (event: KeyboardEvent, active: boolean) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        return false
+      }
+
+      const movement = getMovementInputForKey(event.code, active)
+      if (!movement) return false
+
+      event.preventDefault()
+      Object.assign(movementInputRef.current, movement)
+      controllerRef.current?.setMovement(movement)
+      return true
+    }
+
     const handleKeyDown = (event: KeyboardEvent) => {
+      const handledMovement = applyMovementKey(event, true)
+      if (handledMovement) return
+
       if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
         return
       }
@@ -985,9 +1067,15 @@ export const FirstPersonControls = () => {
       }
     }
 
+    const handleKeyUp = (event: KeyboardEvent) => {
+      applyMovementKey(event, false)
+    }
+
     document.addEventListener('keydown', handleKeyDown, true)
+    document.addEventListener('keyup', handleKeyUp, true)
     return () => {
       document.removeEventListener('keydown', handleKeyDown, true)
+      document.removeEventListener('keyup', handleKeyUp, true)
     }
   }, [closeInteractableTarget, gl, toggleInteractableTarget])
 
@@ -1217,6 +1305,29 @@ export const FirstPersonControls = () => {
     if (!controllerRef.current?.group) return
 
     const group = controllerRef.current.group
+
+    // The site ground collider is effectively unbounded, but scenes without a
+    // site node only have finite fallback floors — if the controller still ends
+    // up below every collider it can never land, so put it back at the spawn.
+    // Prefer the live spawn node over the mount-time start position so a spawn
+    // moved mid-walkthrough doesn't respawn the player at stale coordinates.
+    const worldBounds = worldRef.current?.bounds
+    if (worldBounds && group.position.y < worldBounds.min.y - VOID_FALL_RESPAWN_DEPTH) {
+      const respawnPosition = placedSpawn
+        ? [
+            placedSpawn.position[0],
+            placedSpawn.position[1] - CONTROLLER_CENTER_FROM_EYE,
+            placedSpawn.position[2],
+          ]
+        : controllerStart?.position
+      if (respawnPosition) {
+        group.position.set(respawnPosition[0]!, respawnPosition[1]!, respawnPosition[2]!)
+        controllerRef.current.resetLinVel()
+        ridingElevatorRef.current = null
+        setElevatorRideLocked(false)
+      }
+    }
+
     group.rotation.y = 0
     camera.position.copy(group.position).add(cameraOffset)
     cameraEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
@@ -1277,14 +1388,14 @@ export const FirstPersonControls = () => {
             floatSensorRadius={0.15}
             floatSpringK={1200}
             gravity={9.81}
-            jumpVel={6}
+            jumpVel={5}
             key="first-person-controller"
-            maxRunSpeed={5.5}
+            maxRunSpeed={5}
             maxSlope={1.2}
-            maxWalkSpeed={4}
+            maxWalkSpeed={2}
             paused={isElevatorRideLocked}
             position={controllerStart.position}
-            ref={controllerRef}
+            ref={setControllerApi}
           />
         </KeyboardControls>
       )}