spoint 0.1.0 → 0.1.11

package/bin/create-app.js

@@ -0,0 +1,337 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { resolve, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = import.meta.dirname || resolve(path.dirname(fileURLToPath(import.meta.url)))
+
+const TEMPLATES = {
+  simple: 'simple',
+  physics: 'physics',
+  interactive: 'interactive',
+  spawner: 'spawner'
+}
+
+function showHelp() {
+  console.log(`
+Usage: spoint create-app [options] <app-name>
+
+Options:
+  --template <type>   Template to use: simple, physics, interactive, spawner (default: simple)
+  --help              Show this help message
+
+Examples:
+  spoint create-app my-app
+  spoint create-app --template physics my-physics-object
+  spoint create-app --template spawner my-spawner
+`)
+}
+
+function parseArgs(argv) {
+  const args = { name: null, template: 'simple' }
+  
+  for (let i = 0; i < argv.length; i++) {
+    if (argv[i] === '--help') {
+      showHelp()
+      process.exit(0)
+    }
+    if (argv[i] === '--template' && argv[i + 1]) {
+      args.template = argv[++i]
+    } else if (!argv[i].startsWith('--')) {
+      args.name = argv[i]
+    }
+  }
+  
+  return args
+}
+
+function getTemplateContent(templateType) {
+  const templates = {
+    simple: `export default {
+  server: {
+    setup(ctx) {
+      ctx.entity.custom = {
+        mesh: 'box',
+        color: 0x00ff00
+      }
+      ctx.physics.setStatic(true)
+      ctx.physics.addBoxCollider([0.5, 0.5, 0.5])
+    },
+
+    update(ctx, dt) {
+      // Your update logic here
+    },
+
+    teardown(ctx) {
+      // Cleanup resources
+    }
+  },
+
+  client: {
+    render(ctx) {
+      return {
+        position: ctx.entity.position,
+        rotation: ctx.entity.rotation,
+        custom: ctx.entity.custom
+      }
+    }
+  }
+}`,
+
+    physics: `export default {
+  server: {
+    setup(ctx) {
+      ctx.entity.custom = {
+        mesh: 'box',
+        color: 0xff8800,
+        sx: 1,
+        sy: 1,
+        sz: 1
+      }
+      ctx.physics.setDynamic(true)
+      ctx.physics.setMass(5)
+      ctx.physics.addBoxCollider([0.5, 0.5, 0.5])
+    },
+
+    update(ctx, dt) {
+      const ent = ctx._entity
+      if (!ent?._physicsBodyId || !ctx._runtime?._physics) return
+      const pw = ctx._runtime._physics
+      ent.position = pw.getBodyPosition(ent._physicsBodyId)
+      ent.rotation = pw.getBodyRotation(ent._physicsBodyId)
+    },
+
+    teardown(ctx) {
+      const ent = ctx._entity
+      if (ent?._physicsBodyId && ctx._runtime?._physics) {
+        ctx._runtime._physics.removeBody(ent._physicsBodyId)
+        ent._physicsBodyId = null
+      }
+    }
+  },
+
+  client: {
+    render(ctx) {
+      return {
+        position: ctx.entity.position,
+        rotation: ctx.entity.rotation,
+        custom: ctx.entity.custom
+      }
+    }
+  }
+}`,
+
+    interactive: `export default {
+  server: {
+    setup(ctx) {
+      ctx.entity.custom = {
+        mesh: 'box',
+        color: 0x00ff88,
+        sx: 1.5,
+        sy: 0.5,
+        sz: 1.5,
+        label: 'INTERACT'
+      }
+      ctx.physics.setStatic(true)
+      ctx.physics.addBoxCollider([0.75, 0.25, 0.75])
+      ctx.state.interactionCount = 0
+      ctx.state.interactionRadius = 3.5
+      ctx.state.interactionCooldown = new Map()
+    },
+
+    update(ctx, dt) {
+      const nearby = ctx.players.getNearest(ctx.entity.position, ctx.state.interactionRadius)
+      if (!nearby?.state?.interact) return
+
+      const now = Date.now()
+      const playerId = nearby.id
+      const lastInteract = ctx.state.interactionCooldown.get(playerId) || 0
+
+      if (now - lastInteract > 500) {
+        ctx.state.interactionCooldown.set(playerId, now)
+        ctx.state.interactionCount++
+
+        ctx.players.send(playerId, {
+          type: 'interact_response',
+          message: 'You interacted!',
+          count: ctx.state.interactionCount
+        })
+
+        ctx.network.broadcast({
+          type: 'interact_effect',
+          position: ctx.entity.position
+        })
+      }
+    },
+
+    teardown(ctx) {
+      ctx.state.interactionCooldown?.clear()
+    }
+  },
+
+  client: {
+    setup(engine) {
+      this._lastMessage = null
+      this._messageExpire = 0
+      this._canInteract = false
+    },
+
+    onFrame(dt, engine) {
+      const ent = engine.client?.state?.entities?.find(e => e.app === 'my-app')
+      const local = engine.client?.state?.players?.find(p => p.id === engine.playerId)
+      if (!ent?.position || !local?.position) {
+        this._canInteract = false
+        return
+      }
+
+      const dx = ent.position[0] - local.position[0]
+      const dy = ent.position[1] - local.position[1]
+      const dz = ent.position[2] - local.position[2]
+      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz)
+      this._canInteract = dist < 3.5
+    },
+
+    onEvent(payload, engine) {
+      if (payload.type === 'interact_response') {
+        this._lastMessage = payload.message
+        this._messageExpire = Date.now() + 2000
+      }
+    },
+
+    render(ctx) {
+      const custom = { ...ctx.entity.custom }
+      if (this._canInteract) {
+        custom.glow = true
+        custom.glowColor = 0x00ff88
+      }
+
+      const ui = []
+      if (this._lastMessage && Date.now() < this._messageExpire) {
+        const opacity = Math.max(0, (this._messageExpire - Date.now()) / 2000)
+        if (ctx.h) {
+          ui.push(
+            ctx.h('div', {
+              style: `position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;background:rgba(0,0,0,0.8);border-radius:12px;color:#0f0;font-weight:bold;font-size:20px;opacity:${opacity}`
+            }, this._lastMessage)
+          )
+        }
+      }
+
+      return {
+        position: ctx.entity.position,
+        rotation: ctx.entity.rotation,
+        custom,
+        ui: ui.length > 0 ? ctx.h('div', null, ...ui) : null
+      }
+    }
+  }
+}`,
+
+    spawner: `const CONFIG = {
+  spawnInterval: 5,
+  maxEntities: 10,
+  entityApp: 'physics-crate'
+}
+
+export default {
+  server: {
+    setup(ctx) {
+      ctx.state.entities = new Set()
+      ctx.state.nextId = 0
+
+      ctx.entity.custom = {
+        mesh: 'box',
+        color: 0x4488ff,
+        sx: 1.5,
+        sy: 1.5,
+        sz: 1.5,
+        label: 'SPAWNER'
+      }
+
+      ctx.time.every(CONFIG.spawnInterval, () => {
+        if (ctx.state.entities.size >= CONFIG.maxEntities) return
+
+        const id = \`spawned_\${ctx.state.nextId++}\`
+        const pos = [
+          ctx.entity.position[0] + (Math.random() - 0.5) * 4,
+          ctx.entity.position[1] + 2,
+          ctx.entity.position[2] + (Math.random() - 0.5) * 4
+        ]
+
+        ctx.world.spawn(id, {
+          position: pos,
+          app: CONFIG.entityApp
+        })
+        ctx.state.entities.add(id)
+      })
+    },
+
+    onMessage(ctx, msg) {
+      if (msg.type === 'entity_destroyed') {
+        ctx.state.entities.delete(msg.entityId)
+      }
+    },
+
+    teardown(ctx) {
+      ctx.state.entities.forEach(id => ctx.world.destroy(id))
+      ctx.state.entities.clear()
+    }
+  },
+
+  client: {
+    render(ctx) {
+      return {
+        position: ctx.entity.position,
+        rotation: ctx.entity.rotation,
+        custom: ctx.entity.custom
+      }
+    }
+  }
+}`
+  }
+
+  return templates[templateType] || templates.simple
+}
+
+function createApp(name, template) {
+  const appsDir = resolve('apps')
+  const appDir = join(appsDir, name)
+
+  if (existsSync(appDir)) {
+    console.error(`Error: App '${name}' already exists at ${appDir}`)
+    process.exit(1)
+  }
+
+  mkdirSync(appDir, { recursive: true })
+
+  const indexJsPath = join(appDir, 'index.js')
+  const indexJsContent = getTemplateContent(template)
+  writeFileSync(indexJsPath, indexJsContent)
+
+  console.log(`✓ Created app: ${name}`)
+  console.log(`  Location: ${appDir}`)
+  console.log(`  Template: ${template}`)
+  console.log(`\nTo test your app:`)
+  console.log(`  1. Start server: npm start`)
+  console.log(`  2. Connect to http://localhost:3001`)
+  console.log(`  3. Spawn entity with app: \`${name}\``)
+  console.log(`  4. Edit ${indexJsPath} to make changes`)
+  console.log(`  5. Server hot-reloads automatically`)
+}
+
+const args = parseArgs(process.argv.slice(2))
+
+if (!args.name) {
+  console.error('Error: App name required')
+  showHelp()
+  process.exit(1)
+}
+
+if (args.template && !TEMPLATES[args.template]) {
+  console.error(`Error: Unknown template '${args.template}'`)
+  console.log(`Available: ${Object.keys(TEMPLATES).join(', ')}`)
+  process.exit(1)
+}
+
+createApp(args.name, args.template)

package/client/ARControls.js

@@ -0,0 +1,301 @@
+import * as THREE from 'three'
+
+export class ARControls {
+  constructor(options = {}) {
+    this.enabled = false
+    this.options = {
+      placementMode: true,
+      planeDetection: true,
+      scale: 1,
+      ...options
+    }
+
+    this.session = null
+    this.referenceSpace = null
+    this.hitTestSource = null
+    this.planeDetected = false
+    this.anchorPlaced = false
+    this.anchorPosition = new THREE.Vector3()
+    this.anchorRotation = new THREE.Quaternion()
+    this.cameraPosition = new THREE.Vector3()
+    this.cameraQuaternion = new THREE.Quaternion()
+    this.localOrigin = new THREE.Vector3()
+    this.offsetTransform = null
+
+    this.planes = new Map()
+    this.planeMeshes = []
+
+    this.reticle = null
+    this.reticleVisible = false
+  }
+
+  createReticle() {
+    const geometry = new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2)
+    const material = new THREE.MeshBasicMaterial({
+      color: 0x00ff00,
+      opacity: 0.7,
+      transparent: true,
+      side: THREE.DoubleSide
+    })
+    this.reticle = new THREE.Mesh(geometry, material)
+    this.reticle.visible = false
+    return this.reticle
+  }
+
+  createPlaneMesh(plane) {
+    const geometry = new THREE.PlaneGeometry(1, 1)
+    const material = new THREE.MeshBasicMaterial({
+      color: 0x00ff88,
+      opacity: 0.2,
+      transparent: true,
+      side: THREE.DoubleSide
+    })
+    const mesh = new THREE.Mesh(geometry, material)
+    mesh.userData.plane = plane
+    return mesh
+  }
+
+  async init(renderer) {
+    if (!navigator.xr) {
+      console.warn('[AR] WebXR not supported')
+      return false
+    }
+
+    const isSupported = await navigator.xr.isSessionSupported('immersive-ar')
+    if (!isSupported) {
+      console.warn('[AR] immersive-ar not supported')
+      return false
+    }
+
+    this.renderer = renderer
+    return true
+  }
+
+  async start() {
+    if (!this.renderer) return false
+
+    try {
+      const sessionInit = {
+        requiredFeatures: ['local-floor'],
+        optionalFeatures: ['hit-test', 'plane-detection', 'anchors', 'dom-overlay'],
+        domOverlay: { root: document.body }
+      }
+
+      this.session = await navigator.xr.requestSession('immersive-ar', sessionInit)
+      this.renderer.xr.setSession(this.session)
+      this.renderer.xr.setReferenceSpaceType('local-floor')
+
+      this.referenceSpace = await this.session.requestReferenceSpace('local-floor')
+      const viewerSpace = await this.session.requestReferenceSpace('viewer')
+
+      if (this.session.enabledFeatures?.includes('hit-test')) {
+        this.hitTestSource = await this.session.requestHitTestSource({ space: viewerSpace })
+      }
+
+      this.session.addEventListener('end', () => this.onSessionEnd())
+      this.session.addEventListener('planesdetected', (e) => this.onPlanesDetected(e))
+
+      this.enabled = true
+      console.log('[AR] Session started')
+      return true
+    } catch (err) {
+      console.error('[AR] Failed to start session:', err)
+      return false
+    }
+  }
+
+  async end() {
+    if (this.session) {
+      await this.session.end()
+    }
+  }
+
+  onSessionEnd() {
+    this.enabled = false
+    this.session = null
+    this.hitTestSource = null
+    this.planeDetected = false
+    this.anchorPlaced = false
+    console.log('[AR] Session ended')
+  }
+
+  onPlanesDetected(event) {
+    if (!this.options.planeDetection) return
+
+    for (const plane of event.detectedPlanes) {
+      if (!this.planes.has(plane)) {
+        const mesh = this.createPlaneMesh(plane)
+        this.planes.set(plane, mesh)
+        this.planeMeshes.push(mesh)
+      }
+    }
+    this.planeDetected = true
+  }
+
+  update(frame, camera, sceneRoot) {
+    if (!this.enabled || !frame) return
+
+    const pose = frame.getViewerPose(this.referenceSpace)
+    if (!pose) return
+
+    const view = pose.views[0]
+    const viewMatrix = new THREE.Matrix4().fromArray(view.transform.matrix)
+    viewMatrix.decompose(this.cameraPosition, this.cameraQuaternion, new THREE.Vector3())
+
+    if (!this.anchorPlaced && this.hitTestSource && this.options.placementMode) {
+      const results = frame.getHitTestResults(this.hitTestSource)
+      if (results.length > 0) {
+        const hit = results[0]
+        const pose = hit.getPose(this.referenceSpace)
+        if (pose) {
+          this.showReticle(pose.transform)
+        }
+      }
+    }
+
+    if (this.anchorPlaced && sceneRoot) {
+      this.updateSceneTransform(sceneRoot)
+    }
+  }
+
+  showReticle(transform) {
+    if (!this.reticle) return
+    this.reticle.position.setFromMatrixPosition(new THREE.Matrix4().fromArray(transform.matrix))
+    this.reticle.quaternion.setFromRotationMatrix(new THREE.Matrix4().fromArray(transform.matrix))
+    this.reticle.visible = true
+    this.reticleVisible = true
+  }
+
+  hideReticle() {
+    if (this.reticle) {
+      this.reticle.visible = false
+      this.reticleVisible = false
+    }
+  }
+
+  placeAnchor() {
+    if (!this.reticleVisible) return false
+
+    this.anchorPosition.copy(this.reticle.position)
+    this.anchorRotation.copy(this.reticle.quaternion)
+    this.anchorPlaced = true
+    this.hideReticle()
+    console.log('[AR] Anchor placed at:', this.anchorPosition)
+    return true
+  }
+
+  updateSceneTransform(sceneRoot) {
+    if (!sceneRoot || !this.anchorPlaced) return
+
+    sceneRoot.position.set(
+      -this.anchorPosition.x,
+      -this.anchorPosition.y,
+      -this.anchorPosition.z
+    )
+    sceneRoot.updateMatrixWorld(true)
+  }
+
+  placeAtCamera() {
+    this.anchorPosition.copy(this.cameraPosition)
+    this.anchorRotation.copy(this.cameraQuaternion)
+    this.anchorPlaced = true
+    this.hideReticle()
+    console.log('[AR] Anchor placed at camera:', this.anchorPosition)
+    return true
+  }
+
+  localizeAroundFPS(fpsPosition, fpsYaw, fpsPitch) {
+    if (!this.anchorPlaced) return
+
+    const offset = new THREE.Vector3()
+    offset.x = -fpsPosition[0]
+    offset.y = -fpsPosition[1] - 1.6
+    offset.z = -fpsPosition[2]
+
+    const yawQuat = new THREE.Quaternion()
+    yawQuat.setFromAxisAngle(new THREE.Vector3(0, 1, 0), fpsYaw)
+
+    this.anchorPosition.copy(offset)
+    this.anchorRotation.copy(yawQuat)
+  }
+
+  setInitialFPSPosition(fpsPosition, fpsYaw) {
+    const offset = new THREE.Vector3()
+    offset.x = this.cameraPosition.x
+    offset.y = this.cameraPosition.y - fpsPosition[1] - 1.6
+    offset.z = this.cameraPosition.z
+
+    const invYaw = fpsYaw !== undefined ? -fpsYaw : 0
+    const yawQuat = new THREE.Quaternion()
+    yawQuat.setFromAxisAngle(new THREE.Vector3(0, 1, 0), invYaw)
+
+    this.anchorPosition.copy(offset)
+    this.anchorRotation.copy(yawQuat)
+    this.anchorPlaced = true
+    this.hideReticle()
+    console.log('[AR] Set initial FPS position:', this.anchorPosition)
+    return true
+  }
+
+  getPlacementInfo() {
+    return {
+      placed: this.anchorPlaced,
+      position: this.anchorPosition.toArray(),
+      rotation: this.anchorRotation.toArray(),
+      planeDetected: this.planeDetected
+    }
+  }
+
+  dispose() {
+    this.end()
+    this.planes.clear()
+    this.planeMeshes = []
+    if (this.reticle) {
+      this.reticle.geometry.dispose()
+      this.reticle.material.dispose()
+      this.reticle = null
+    }
+  }
+}
+
+export async function createARButton(renderer, onStart, onEnd) {
+  if (!navigator.xr) return null
+
+  const isSupported = await navigator.xr.isSessionSupported('immersive-ar')
+  if (!isSupported) return null
+
+  const button = document.createElement('button')
+  button.id = 'ar-button'
+  button.textContent = 'Enter XR'
+  button.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 24px;
+    background: rgba(0, 150, 0, 0.8);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    z-index: 1001;
+    touch-action: none;
+  `
+
+  button.addEventListener('click', async () => {
+    if (onStart) {
+      const started = await onStart()
+      if (started) {
+        button.textContent = 'Exit AR'
+        button.style.background = 'rgba(150, 0, 0, 0.8)'
+        if (onEnd) {
+          button.onclick = onEnd
+        }
+      }
+    }
+  })
+
+  return button
+}