spoint 0.1.0 → 0.1.11

package/client/camera.js

@@ -7,14 +7,61 @@ const camDesired = new THREE.Vector3()
 const camLookTarget = new THREE.Vector3()
 const aimRaycaster = new THREE.Raycaster()
 const aimDir = new THREE.Vector3()
-const shoulderOffset = 0.35
-const headHeight = 0.4
-const camFollowSpeed = 12.0
-const camSnapSpeed = 30.0
-const zoomStages = [0, 1.5, 3, 5, 8]
+let shoulderOffset = 0.35
+let headHeight = 0.4
+let camFollowSpeed = 12.0
+let camSnapSpeed = 30.0
+let zoomStages = [0, 1.5, 3, 5, 8]
+let mouseSensitivity = 0.002
+let pitchMin = -1.4, pitchMax = 1.4
+
+function isDescendant(obj, ancestor) {
+  let cur = obj
+  while (cur) {
+    if (cur === ancestor) return true
+    cur = cur.parent
+  }
+  return false
+}
+
+const _boneWorldPos = new THREE.Vector3()
+const _boneForward = new THREE.Vector3()
 
 export function createCameraController(camera, scene) {
   let yaw = 0, pitch = 0, zoomIndex = 2, camInitialized = false
+  let mode = 'tps'
+  let editMode = false
+  let editCamPos = new THREE.Vector3(0, 5, 10)
+  let editCamSpeed = 8
+  const envMeshes = []
+  let rayTimer = 0, cachedClipDist = 10, cachedAimPoint = null
+  let cameraBone = null
+  let headBone = null
+  let fpsForwardOffset = 0.7
+  let fpsHeadDownOffset = 0.2
+  camRaycaster.firstHitOnly = true
+  aimRaycaster.firstHitOnly = true
+
+  function setEnvironment(meshes) { envMeshes.length = 0; envMeshes.push(...meshes) }
+  function setCameraBone(bone) { cameraBone = bone }
+  function setHeadBone(bone) { headBone = bone }
+
+  function setMode(m) {
+    const prev = mode
+    mode = m
+    if (m === 'fps' && headBone) {
+      headBone.scale.set(0, 0, 0)
+      headBone.position.y -= fpsHeadDownOffset
+    }
+    if (prev === 'fps' && m !== 'fps' && headBone) {
+      headBone.scale.set(1, 1, 1)
+      headBone.position.y += fpsHeadDownOffset
+    }
+  }
+  function getMode() { return mode }
+
+  function setPosition(x, y, z) { camera.position.set(x, y, z) }
+  function setTarget(x, y, z) { camera.lookAt(x, y, z) }
 
   function restore(saved) {
     if (saved) { yaw = saved.yaw || 0; pitch = saved.pitch || 0; zoomIndex = saved.zoomIndex ?? 2 }
@@ -23,9 +70,9 @@ export function createCameraController(camera, scene) {
   function save() { return { yaw, pitch, zoomIndex } }
 
   function onMouseMove(e) {
-    yaw -= e.movementX * 0.002
-    pitch -= e.movementY * 0.002
-    pitch = Math.max(-1.4, Math.min(1.4, pitch))
+    yaw -= e.movementX * mouseSensitivity
+    pitch -= e.movementY * mouseSensitivity
+    pitch = Math.max(pitchMin, Math.min(pitchMax, pitch))
   }
 
   function onWheel(e) {
@@ -51,19 +98,85 @@ export function createCameraController(camera, scene) {
     return len > 0.001 ? [dx / len, dy / len, dz / len] : [fwdX, fwdY, fwdZ]
   }
 
-  function update(localPlayer, localMesh, frameDt) {
-    if (!localPlayer) return
-    const dist = zoomStages[zoomIndex]
+  function update(localPlayer, localMesh, frameDt, inputState) {
+    if (mode === 'custom' || mode === 'fixed') return
+    if (!localPlayer && !editMode) return
+
+    if (editMode && inputState) {
+      const sy = Math.sin(yaw), cy = Math.cos(yaw)
+      const fwdX = sy, fwdZ = cy
+      const rightX = -cy, rightZ = sy
+      const moveForward = (inputState.forward ? 1 : 0) - (inputState.backward ? 1 : 0)
+      const moveRight = (inputState.right ? 1 : 0) - (inputState.left ? 1 : 0)
+      const moveUp = (inputState.jump ? 1 : 0) - (inputState.crouch ? 1 : 0)
+      const speed = editCamSpeed * frameDt
+      editCamPos.x += (moveForward * fwdX + moveRight * rightX) * speed
+      editCamPos.y += moveUp * speed
+      editCamPos.z += (moveForward * fwdZ + moveRight * rightZ) * speed
+      camera.position.copy(editCamPos)
+      const sp = Math.sin(pitch), cp = Math.cos(pitch)
+      camera.lookAt(
+        camera.position.x + fwdX * 100,
+        camera.position.y + sp * 100,
+        camera.position.z + fwdZ * 100
+      )
+      return
+    }
+
+    const dist = mode === 'fps' ? 0 : zoomStages[zoomIndex]
     camTarget.set(localPlayer.position[0], localPlayer.position[1] + headHeight, localPlayer.position[2])
-    if (localMesh) localMesh.visible = dist > 0.5
+    const punchLerp = 1 - Math.exp(-972 * frameDt)
+    punchYaw += (punchYawTarget - punchYaw) * punchLerp
+    punchPitch += (punchPitchTarget - punchPitch) * punchLerp
+    punchYawTarget *= 1 - Math.min(1, 18 * frameDt)
+    punchPitchTarget *= 1 - Math.min(1, 18 * frameDt)
+    yaw += punchYaw * frameDt
+    pitch = Math.max(pitchMin, Math.min(pitchMax, pitch + punchPitch * frameDt))
     const sy = Math.sin(yaw), cy = Math.cos(yaw)
     const sp = Math.sin(pitch), cp = Math.cos(pitch)
     const fwdX = sy * cp, fwdY = sp, fwdZ = cy * cp
     const rightX = -cy, rightZ = sy
     if (dist < 0.01) {
-      camera.position.copy(camTarget)
-      camera.lookAt(camTarget.x + fwdX, camTarget.y + fwdY, camTarget.z + fwdZ)
+      if (cameraBone && localMesh) {
+        localMesh.updateMatrixWorld(true)
+        cameraBone.getWorldPosition(_boneWorldPos)
+        _boneForward.set(fwdX, 0, fwdZ).normalize()
+        camera.position.copy(_boneWorldPos).addScaledVector(_boneForward, fpsForwardOffset)
+        camera.position.y += 0.35
+      } else {
+        camera.position.copy(camTarget)
+      }
+      if (headBone) headBone.scale.set(0, 0, 0)
+      const rayTargets = envMeshes.length ? envMeshes : scene.children
+      const wallDist = 0.35
+      const fpsRayOrigin = new THREE.Vector3().copy(camera.position)
+      const rayDirs = [
+        [fwdX, fwdY, fwdZ],
+        [rightX, 0, rightZ],
+        [-rightX, 0, -rightZ],
+        [0, 1, 0],
+        [0, -1, 0]
+      ]
+      for (const d of rayDirs) {
+        camDir.set(-d[0], -d[1], -d[2])
+        camRaycaster.set(fpsRayOrigin, camDir)
+        camRaycaster.far = wallDist
+        camRaycaster.near = 0
+        const hits = camRaycaster.intersectObjects(rayTargets, true)
+        for (const hit of hits) {
+          if (localMesh && isDescendant(hit.object, localMesh)) continue
+          const push = wallDist - hit.distance
+          if (push > 0) {
+            camera.position.x += d[0] * push
+            camera.position.y += d[1] * push
+            camera.position.z += d[2] * push
+          }
+          break
+        }
+      }
+      camera.lookAt(camera.position.x + fwdX, camera.position.y + fwdY, camera.position.z + fwdZ)
     } else {
+      if (headBone) headBone.scale.set(1, 1, 1)
       camDesired.set(
         camTarget.x - fwdX * dist + rightX * shoulderOffset,
         camTarget.y - fwdY * dist + 0.2,
@@ -71,16 +184,22 @@ export function createCameraController(camera, scene) {
       )
       camDir.subVectors(camDesired, camTarget).normalize()
       const fullDist = camTarget.distanceTo(camDesired)
-      camRaycaster.set(camTarget, camDir)
-      camRaycaster.far = fullDist
-      camRaycaster.near = 0
-      const hits = camRaycaster.intersectObjects(scene.children, true)
-      let clippedDist = fullDist
-      for (const hit of hits) {
-        if (hit.object === localMesh || localMesh?.children?.includes(hit.object)) continue
-        if (hit.distance < clippedDist) clippedDist = hit.distance - 0.2
+      rayTimer += frameDt
+      const doRaycast = rayTimer >= 0.05
+      if (doRaycast) {
+        rayTimer = 0
+        camRaycaster.set(camTarget, camDir)
+        camRaycaster.far = fullDist
+        camRaycaster.near = 0
+        const hits = camRaycaster.intersectObjects(envMeshes.length ? envMeshes : scene.children, true)
+        cachedClipDist = fullDist
+        for (const hit of hits) {
+          if (localMesh && isDescendant(hit.object, localMesh)) continue
+          if (hit.distance < cachedClipDist) cachedClipDist = hit.distance - 0.2
+        }
+        if (cachedClipDist < 0.3) cachedClipDist = 0.3
       }
-      if (clippedDist < 0.3) clippedDist = 0.3
+      const clippedDist = Math.min(cachedClipDist, fullDist)
       camDesired.set(
         camTarget.x + camDir.x * clippedDist,
         camTarget.y + camDir.y * clippedDist,
@@ -93,16 +212,19 @@ export function createCameraController(camera, scene) {
         camera.position.lerp(camDesired, 1.0 - Math.exp(-speed * frameDt))
       }
       aimDir.set(fwdX, fwdY, fwdZ)
-      aimRaycaster.set(camera.position, aimDir)
-      aimRaycaster.far = 500
-      aimRaycaster.near = 0.5
-      const aimHits = aimRaycaster.intersectObjects(scene.children, true)
-      let aimPoint = null
-      for (const ah of aimHits) {
-        if (ah.object === localMesh || localMesh?.children?.includes(ah.object)) continue
-        aimPoint = ah.point; break
+      if (doRaycast) {
+        aimRaycaster.set(camera.position, aimDir)
+        aimRaycaster.far = 500
+        aimRaycaster.near = 0.5
+        const aimHits = aimRaycaster.intersectObjects(envMeshes.length ? envMeshes : scene.children, true)
+        cachedAimPoint = null
+        for (const ah of aimHits) {
+          if (localMesh && isDescendant(ah.object, localMesh)) continue
+          cachedAimPoint = ah.point; break
+        }
       }
-      if (aimPoint) {
+      if (cachedAimPoint) {
+        const aimPoint = cachedAimPoint
         if (!camLookTarget.lengthSq()) camLookTarget.copy(aimPoint)
         camLookTarget.lerp(aimPoint, 1.0 - Math.exp(-camFollowSpeed * frameDt))
       } else {
@@ -112,5 +234,41 @@ export function createCameraController(camera, scene) {
     }
   }
 
-  return { restore, save, onMouseMove, onWheel, getAimDirection, update, get yaw() { return yaw }, get pitch() { return pitch } }
+  function applyConfig(cfg) {
+    if (cfg.mode != null) mode = cfg.mode
+    if (cfg.shoulderOffset != null) shoulderOffset = cfg.shoulderOffset
+    if (cfg.headHeight != null) headHeight = cfg.headHeight
+    if (cfg.zoomStages) zoomStages = cfg.zoomStages
+    if (cfg.defaultZoomIndex != null) zoomIndex = cfg.defaultZoomIndex
+    if (cfg.followSpeed != null) camFollowSpeed = cfg.followSpeed
+    if (cfg.snapSpeed != null) camSnapSpeed = cfg.snapSpeed
+    if (cfg.mouseSensitivity != null) mouseSensitivity = cfg.mouseSensitivity
+    if (cfg.pitchRange) { pitchMin = cfg.pitchRange[0]; pitchMax = cfg.pitchRange[1] }
+    if (cfg.fov) { camera.fov = cfg.fov; camera.updateProjectionMatrix() }
+  }
+
+  let punchYawTarget = 0, punchPitchTarget = 0, punchYaw = 0, punchPitch = 0
+  function punch(intensity) {
+    punchYawTarget += (Math.random() - 0.5) * intensity * 0.9
+    punchPitchTarget += (Math.random() - 0.3) * intensity * 0.9
+  }
+
+function setVRYaw(vrYaw) { yaw = vrYaw }
+function getVRYaw() { return yaw }
+function setVRPitch(vrPitch) { pitch = vrPitch }
+function getVRPitch() { return pitch }
+function adjustVRPitch(delta) {
+  pitch = Math.max(pitchMin, Math.min(pitchMax, pitch + delta))
+}
+
+function setEditMode(enabled) {
+  if (enabled && !editMode) {
+    editCamPos.copy(camera.position)
+  }
+  editMode = enabled
+}
+function getEditMode() { return editMode }
+function getEditCameraPosition() { return editCamPos }
+
+return { restore, save, onMouseMove, onWheel, getAimDirection, update, setEnvironment, setCameraBone, setHeadBone, applyConfig, setMode, getMode, setPosition, setTarget, punch, setVRYaw, getVRYaw, setVRPitch, getVRPitch, adjustVRPitch, setEditMode, getEditMode, getEditCameraPosition, get yaw() { return yaw }, get pitch() { return pitch }, get mode() { return mode } }
 }

package/client/createLoadingScreen.js

@@ -0,0 +1,69 @@
+export function createLoadingScreen(loadingManager) {
+  const overlay = document.createElement('div')
+  overlay.id = 'loading-overlay'
+  overlay.className = 'loading-overlay'
+  overlay.innerHTML = `
+    <div class="loading-container">
+      <div class="loading-header">
+        <h1>Spawnpoint</h1>
+        <p class="loading-stage-text">Connecting...</p>
+      </div>
+      <div class="loading-progress-wrapper">
+        <div class="loading-progress-bar">
+          <div class="loading-progress-fill"></div>
+        </div>
+        <div class="loading-percent">0%</div>
+      </div>
+      <div class="loading-details">
+        <span class="loading-current">0</span> / <span class="loading-total">0</span> bytes
+      </div>
+      <div class="loading-spinner">
+        <div class="spinner-dot"></div>
+        <div class="spinner-dot"></div>
+        <div class="spinner-dot"></div>
+      </div>
+    </div>
+  `
+  document.body.insertBefore(overlay, document.body.firstChild)
+
+  const progressFill = overlay.querySelector('.loading-progress-fill')
+  const percentText = overlay.querySelector('.loading-percent')
+  const stageText = overlay.querySelector('.loading-stage-text')
+  const currentBytes = overlay.querySelector('.loading-current')
+  const totalBytes = overlay.querySelector('.loading-total')
+
+  const updateUI = (detail) => {
+    const percent = detail.percent || 0
+    progressFill.style.width = percent + '%'
+    percentText.textContent = Math.round(percent) + '%'
+    stageText.textContent = detail.label || ''
+
+    if (detail.current !== undefined && detail.total !== undefined) {
+      currentBytes.textContent = formatBytes(detail.current)
+      totalBytes.textContent = formatBytes(detail.total)
+    }
+  }
+
+  const formatBytes = (bytes) => {
+    if (bytes === 0) return '0'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 10) / 10 + sizes[i]
+  }
+
+  loadingManager.addEventListener('progress', (e) => updateUI(e.detail))
+  loadingManager.addEventListener('stagechange', (e) => updateUI(e.detail))
+
+  return {
+    element: overlay,
+    hide: async () => {
+      overlay.classList.add('fade-out')
+      await new Promise(resolve => setTimeout(resolve, 500))
+      overlay.remove()
+    },
+    dispose: () => {
+      overlay.remove()
+    }
+  }
+}

package/client/editor/bridge.js

@@ -0,0 +1,113 @@
+import { PhysicsNetworkClient } from '/src/index.client.js'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+
+export function connectEditorToGame(editor, THREE) {
+  const gltfLoader = new GLTFLoader()
+  const playerMeshes = new Map()
+  const entityMeshes = new Map()
+
+  const liveGroup = new THREE.Group()
+  liveGroup.name = 'Game Scene (Live)'
+  editor.addObject(liveGroup)
+
+  const playersGroup = new THREE.Group()
+  playersGroup.name = 'Players'
+  liveGroup.add(playersGroup)
+
+  const entitiesGroup = new THREE.Group()
+  entitiesGroup.name = 'Entities'
+  liveGroup.add(entitiesGroup)
+
+  editor.signals.sceneGraphChanged.dispatch()
+
+  const client = new PhysicsNetworkClient({
+    url: `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`,
+    predictionEnabled: false,
+    onStateUpdate(state) {
+      for (const p of state.players) {
+        let mesh = playerMeshes.get(p.id)
+        if (!mesh) {
+          mesh = new THREE.Group()
+          mesh.name = `Player_${p.id}`
+          const capsule = new THREE.Mesh(
+            new THREE.CapsuleGeometry(0.3, 1.0, 8, 16),
+            new THREE.MeshStandardMaterial({ color: 0x4488ff })
+          )
+          capsule.name = 'Capsule'
+          capsule.position.y = 0.8
+          mesh.add(capsule)
+          playersGroup.add(mesh)
+          playerMeshes.set(p.id, mesh)
+          editor.signals.sceneGraphChanged.dispatch()
+        }
+        mesh.position.set(p.position[0], p.position[1] - 1.3, p.position[2])
+        if (p.rotation) mesh.quaternion.set(p.rotation[0], p.rotation[1], p.rotation[2], p.rotation[3])
+      }
+      const activeIds = new Set(state.players.map(p => p.id))
+      for (const [id, mesh] of playerMeshes) {
+        if (!activeIds.has(id)) {
+          playersGroup.remove(mesh)
+          playerMeshes.delete(id)
+          editor.signals.sceneGraphChanged.dispatch()
+        }
+      }
+      editor.signals.objectChanged.dispatch(liveGroup)
+    },
+    onEntityAdded(id, entityState) {
+      if (entityState.model) {
+        const url = entityState.model.startsWith('./') ? '/' + entityState.model.slice(2) : entityState.model
+        gltfLoader.load(url, (gltf) => {
+          const model = gltf.scene
+          model.name = `Entity_${id}`
+          model.position.set(...entityState.position)
+          if (entityState.rotation) model.quaternion.set(...entityState.rotation)
+          entitiesGroup.add(model)
+          entityMeshes.set(id, model)
+          editor.signals.sceneGraphChanged.dispatch()
+        })
+      } else {
+        const c = entityState.custom || {}
+        const geo = c.mesh === 'sphere' ? new THREE.SphereGeometry(c.r || 0.5) :
+                    c.mesh === 'cylinder' ? new THREE.CylinderGeometry(c.r || 0.4, c.r || 0.4, c.h || 0.1) :
+                    new THREE.BoxGeometry(c.sx || 1, c.sy || 1, c.sz || 1)
+        const mat = new THREE.MeshStandardMaterial({ color: c.color ?? 0xff8800 })
+        const mesh = new THREE.Mesh(geo, mat)
+        mesh.name = `Entity_${id}`
+        mesh.position.set(...entityState.position)
+        if (entityState.rotation) mesh.quaternion.set(...entityState.rotation)
+        entitiesGroup.add(mesh)
+        entityMeshes.set(id, mesh)
+        editor.signals.sceneGraphChanged.dispatch()
+      }
+    },
+    onEntityRemoved(id) {
+      const mesh = entityMeshes.get(id)
+      if (mesh) {
+        entitiesGroup.remove(mesh)
+        entityMeshes.delete(id)
+        editor.signals.sceneGraphChanged.dispatch()
+      }
+    },
+    onWorldDef(wd) {
+      if (wd.scene) {
+        if (wd.scene.skyColor != null) editor.scene.background = new THREE.Color(wd.scene.skyColor)
+        if (wd.scene.fogColor != null) editor.scene.fog = new THREE.Fog(wd.scene.fogColor, wd.scene.fogNear ?? 80, wd.scene.fogFar ?? 200)
+        editor.signals.sceneBackgroundChanged.dispatch()
+      }
+    },
+    onPlayerLeft(id) {
+      const mesh = playerMeshes.get(id)
+      if (mesh) {
+        playersGroup.remove(mesh)
+        playerMeshes.delete(id)
+        editor.signals.sceneGraphChanged.dispatch()
+      }
+    },
+    onHotReload() {}
+  })
+
+  client.connect().then(() => console.log('[editor-bridge] Connected to game server'))
+
+  window.gameClient = client
+  window.liveGroup = liveGroup
+}