@directivegames/genesys.js 3.1.24

package/games/examples/vr-game/VRPressableButton.ts

@@ -0,0 +1,113 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+export interface VRPressableButtonOptions {
+  baseSize?: THREE.Vector3; // console base size
+  plungerSize?: THREE.Vector3; // button size
+  surfaceY?: number; // local Y at contact plane (relative to parent)
+  restingY?: number; // local Y when unpressed
+  fullPressDistance?: number; // max travel distance (positive number)
+  recoverySpeed?: number; // m/s toward resting
+  onPressed?: () => void;
+}
+
+export class VRPressableButtonActor extends ENGINE.Actor<{}> {
+  private base: ENGINE.MeshComponent;
+  private plunger: ENGINE.MeshComponent;
+  private contactZone: ENGINE.TriggerZoneComponent;
+
+  private surfaceY: number;
+  private restingY: number;
+  private fullPressDistance: number;
+  private recoverySpeed: number;
+  private pressedFired = false;
+  private onPressed?: () => void;
+
+  constructor(options: VRPressableButtonOptions = {}) {
+    super({
+      rootComponent: new ENGINE.SceneComponent({})
+    });
+
+    const baseSize = options.baseSize ?? new THREE.Vector3(0.5, 0.12, 0.15);
+    const plungerSize = options.plungerSize ?? new THREE.Vector3(0.08, 0.1, 0.08);
+    this.surfaceY = options.surfaceY ?? 0.05;
+    this.restingY = options.restingY ?? 0.04;
+    this.fullPressDistance = options.fullPressDistance ?? 0.02;
+    this.recoverySpeed = options.recoverySpeed ?? 0.4;
+    this.onPressed = options.onPressed;
+
+    // Base
+    this.base = new ENGINE.MeshComponent({
+      geometry: new THREE.BoxGeometry(baseSize.x, baseSize.y, baseSize.z),
+      material: new THREE.MeshStandardMaterial({ color: 0x595959 }),
+      physicsOptions: {
+        motionType: ENGINE.PhysicsMotionType.Static,
+        generateCollisionEvents: false
+      }
+    });
+    this.rootComponent.add(this.base);
+
+    // Plunger (kinematic in local Y; no physics)
+    this.plunger = new ENGINE.MeshComponent({
+      geometry: new THREE.BoxGeometry(plungerSize.x, plungerSize.y, plungerSize.z),
+      material: new THREE.MeshStandardMaterial({ color: 0x355c7d }),
+      physicsOptions: { enabled: false }
+    });
+    this.plunger.position.set(0, this.restingY, 0);
+    this.base.add(this.plunger);
+
+    // Contact zone above the plunger cap (trigger only)
+    this.contactZone = new ENGINE.TriggerZoneComponent({
+      size: new THREE.Vector3(plungerSize.x * 1.2, plungerSize.y * 1.2, plungerSize.z * 1.2),
+      enableStayEvents: true,
+      offset: new THREE.Vector3(0, this.restingY + (plungerSize.y * 0.5), 0),
+      enableDebugVisualization: false
+    });
+    this.base.add(this.contactZone);
+
+    // Tick each frame to update motion/state
+    this.rootComponent.onTickPrePhysics.add((_comp, dt) => this.updateButton(dt));
+  }
+
+  private updateButton(deltaTime: number): void {
+    // Gather overlapping actors; find any with a fingertip pointer component name
+    const overlapping = this.contactZone.getActorsInZone();
+    let pressingDistance = 0;
+
+    if (overlapping.length > 0) {
+      for (const actor of overlapping) {
+        // Use actor world position (assumes fingertip collider actor root at tip)
+        const tipWorld = actor.rootComponent.getWorldPosition(new THREE.Vector3());
+        // Convert to plunger parent local
+        const local = this.base.worldToLocal(tipWorld.clone());
+        const depth = this.surfaceY - local.y;
+        if (depth > pressingDistance) pressingDistance = depth;
+      }
+    }
+
+    if (pressingDistance > 0) {
+      const targetY = THREE.MathUtils.clamp(
+        this.restingY - pressingDistance,
+        this.restingY - this.fullPressDistance,
+        this.restingY
+      );
+      this.plunger.position.y = targetY;
+
+      const fraction = (this.restingY - targetY) / this.fullPressDistance;
+      if (fraction >= 0.99 && !this.pressedFired) {
+        this.pressedFired = true;
+        if (this.onPressed) this.onPressed();
+      }
+    } else {
+      // Recover toward resting
+      if (this.plunger.position.y < this.restingY) {
+        this.plunger.position.y = Math.min(this.restingY, this.plunger.position.y + this.recoverySpeed * deltaTime);
+      } else {
+        this.plunger.position.y = this.restingY;
+        this.pressedFired = false;
+      }
+    }
+  }
+}
+
+

package/games/examples/vr-game/VRProjectileActor.ts

@@ -0,0 +1,69 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+/**
+ * Simple projectile actor for rifle shots
+ */
+export class VRProjectileActor extends ENGINE.Actor {
+  private direction: THREE.Vector3;
+  private speed: number;
+  private lifetime: number;
+  private startTime: number;
+
+  constructor(options: {
+    startPosition: THREE.Vector3;
+    direction: THREE.Vector3;
+    speed: number;
+    lifetime: number;
+  }) {
+    super({
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.SphereGeometry(0.02, 8, 8),
+        material: new THREE.MeshBasicMaterial({
+          color: 0xffff00,
+          transparent: true,
+          opacity: 0.8
+        })
+      })
+    });
+
+    // Set initial position
+    this.rootComponent.position.copy(options.startPosition);
+
+    this.direction = options.direction.normalize();
+    this.speed = options.speed;
+    this.lifetime = options.lifetime;
+    this.startTime = Date.now();
+  }
+
+  protected override doBeginPlay(): void {
+    super.doBeginPlay();
+
+    // Set up tick to move projectile
+    this.onTickPrePhysics.add((actor, deltaTimeMS) => {
+      this.updateProjectile(deltaTimeMS);
+    });
+  }
+
+  private updateProjectile(deltaTimeMS: number): void {
+    const currentTime = Date.now();
+
+    // Check lifetime
+    if (currentTime - this.startTime > this.lifetime) {
+      this.destroy();
+      return;
+    }
+
+    // Move projectile
+    const deltaSeconds = deltaTimeMS / 1000;
+    const movement = this.direction.clone().multiplyScalar(this.speed * deltaSeconds);
+    this.rootComponent.position.add(movement);
+
+    // Simple collision check with world bounds
+    const pos = this.rootComponent.position;
+    if (pos.y < -5 || Math.abs(pos.x) > 50 || Math.abs(pos.z) > 50) {
+      console.log('[VRProjectile] Hit boundary, destroying');
+      this.destroy();
+    }
+  }
+}

package/games/examples/vr-game/VRRifleActor.ts

@@ -0,0 +1,138 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+import { VRProjectileActor } from './VRProjectileActor.js';
+
+/**
+ * VR Rifle Actor that can be attached to hands and fired
+ */
+export class VRRifleActor extends ENGINE.Actor<{}> {
+  private audioComponent: ENGINE.SoundComponent;
+  private muzzleFlashLight: ENGINE.PointLightComponent | null = null;
+  private fireCount = 0;
+  private lastFireTime = 0;
+  private meshComponent: ENGINE.MeshComponent;
+
+  constructor() {
+    super({
+      rootComponent: new ENGINE.GLTFMeshComponent({
+        modelUrl: '@engine/assets/dev/models/Weapons/Rifle.glb',
+        physicsOptions: {
+          motionType: ENGINE.PhysicsMotionType.KinematicPositionBased,
+          collisionMeshType: ENGINE.CollisionMeshType.BoundingBox,
+        }
+      }),
+    });
+
+    this.meshComponent = this.rootComponent as ENGINE.MeshComponent;
+
+    // Add audio component for gunshot sound
+    this.audioComponent = new ENGINE.SoundComponent({
+      audioClips: [{
+        key: 'gunshot',
+        audioUrl: '@engine/assets/sounds/game-gun-short.mp3'
+      }],
+      volume: 0.7,
+      loop: false,
+      positional: true
+    });
+    this.addComponent(this.audioComponent);
+
+    // Create muzzle flash light (disabled by default)
+    this.muzzleFlashLight = new ENGINE.PointLightComponent({
+      color: new THREE.Color(0xffaa44),
+      intensity: 2,
+      distance: 5
+    });
+    this.muzzleFlashLight.position.set(0, 0, -0.4);
+    this.muzzleFlashLight.visible = false;
+    this.addComponent(this.muzzleFlashLight);
+
+    const grabbable = new ENGINE.VRGrabbableComponent({
+      vrAttachmentInputType: 'grip',
+      offsetPosition: new THREE.Vector3(0, 0, 0),
+      offsetRotation: new THREE.Euler(0, Math.PI / 2, 0),
+      attachmentMode: 'hand',
+      hideController: true
+    });
+    this.addComponent(grabbable);
+
+    grabbable.onVRInput.add(this.handleVRInput.bind(this));
+  }
+
+  // ===== VR Input Handling =====
+  // VR input is now handled through VRPawn when this actor is attached
+  public handleVRInput(hand: 'left' | 'right', buttonIndex: ENGINE.XRButton | ENGINE.XRAxis, pressed: boolean, value: number): boolean {
+    // Trigger button (index 0) fires the gun when pressed
+    if (pressed && buttonIndex === ENGINE.XRButton.Trigger) {
+      this.fire(hand);
+      return true; // Consume the input
+    }
+
+    return false; // Let other systems handle it
+  }
+
+  private fire(hand: 'left' | 'right'): void {
+    const currentTime = Date.now();
+
+    // Rate limiting
+    if (currentTime - this.lastFireTime < 200) {
+      return;
+    }
+    this.lastFireTime = currentTime;
+    this.fireCount++;
+
+    console.log(`[VRRifle] BANG! (${this.fireCount} shots fired)`);
+
+    // Play gunshot sound
+    this.audioComponent.play('gunshot');
+
+    // Muzzle flash effect
+    this.showMuzzleFlash();
+
+    // Create and fire projectile
+    this.createProjectile(hand);
+  }
+
+  private showMuzzleFlash(): void {
+    if (this.muzzleFlashLight) {
+      this.muzzleFlashLight.visible = true;
+
+      // Disable after brief flash
+      setTimeout(() => {
+        if (this.muzzleFlashLight) {
+          this.muzzleFlashLight.visible = false;
+        }
+      }, 50);
+    }
+  }
+
+  private createProjectile(hand: 'left' | 'right'): void {
+    const world = this.getWorld();
+    if (!world) return;
+
+    // Get controller position and direction using VRPawn convenience method
+    const vrPawn = world.getActors().find(actor => actor.constructor.name === 'VRPawn') as ENGINE.VRPawn;
+    if (!vrPawn) return;
+
+    const rayPose = vrPawn.getTargetRayPose(hand);
+    if (!rayPose) return;
+
+    const controllerPosition = rayPose.origin;
+    const rifleForward = rayPose.direction;
+
+    // Offset muzzle position slightly forward from controller
+    const muzzleOffset = rifleForward.clone().multiplyScalar(0.5);
+    const muzzlePosition = controllerPosition.clone().add(muzzleOffset);
+
+    // Create projectile
+    const projectile = new VRProjectileActor({
+      startPosition: muzzlePosition,
+      direction: rifleForward,
+      speed: 5000,
+      lifetime: 2000
+    });
+
+    world.addActor(projectile);
+  }
+}

package/games/examples/vr-game/game.ts

@@ -0,0 +1,69 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+import { createVRScene } from './scene.js';
+
+// ============================================================================
+// VR DEMO GAME
+// ============================================================================
+
+/**
+ * Main VR Demo Game showcasing the unified attachment system
+ */
+export class VRDemoGame extends ENGINE.BaseGameLoop {
+
+  constructor(container: HTMLElement) {
+    super(container, {
+      xrEnabled: true,
+      vrSessionOptions: {
+        optionalFeatures: ['hand-tracking', 'local-floor'],
+        requiredFeatures: []
+      }
+    });
+  }
+
+  protected override async preStart(): Promise<void> {
+    // Disable tone mapping for VR
+    this.world.postProcessManager.disablePasses(ENGINE.PostProcessPass.ToneMapping);
+
+    // Create basic lighting
+    ENGINE.GameBuilder.createDefaultLighting(this.world);
+
+    // Create VR pawn
+    const vrPawn = new ENGINE.VRPawn({
+      movementComponent: null,
+      camera: new THREE.PerspectiveCamera(ENGINE.CAMERA_FOV, 1, ENGINE.CAMERA_NEAR, ENGINE.CAMERA_FAR),
+      controllerOptions: {
+        rayVisualizationEnabled: true,
+        maxRayDistance: 10
+      },
+      snapTurnAngle: 25,
+      maxTeleportDistance: 15
+    });
+
+    this.world.addActor(vrPawn);
+
+    // Create player controller
+    const controller = new ENGINE.PlayerController();
+    controller.possess(vrPawn);
+    this.world.addActor(controller);
+    // Add VR pawn components (two-hand grab + snap turn + interact + teleport)
+    vrPawn.addComponent(new ENGINE.VRGrabComponent({}));
+    vrPawn.addComponent(new ENGINE.VRSnapTurnComponent({ angleDeg: vrPawn.getSnapTurnAngleDegrees() }));
+    vrPawn.addComponent(new ENGINE.VRInteractComponent({ button: ENGINE.XRButton.Trigger }));
+    // Interact is handled by VRInteractableComponent on actors; no separate pawn component needed.
+    vrPawn.addComponent(new ENGINE.VRTeleportComponent({ maxDistance: 15 }));
+
+
+
+    // Create skybox for immersion
+    ENGINE.GameBuilder.createDefaultSkybox(this.world);
+
+    // Create the interactive VR scene
+    createVRScene(this.world);
+  }
+
+  protected override postStart(): void {
+    // BaseGameLoop will automatically call createVRButton() after this with hand tracking support
+  }
+}

package/games/examples/vr-game/index.ts

@@ -0,0 +1,9 @@
+// ============================================================================
+// VR DEMO GAME - MAIN EXPORTS
+// ============================================================================
+
+export { VRDemoGame } from './game.js';
+export { VRRifleActor } from './VRRifleActor.js';
+export { VRProjectileActor } from './VRProjectileActor.js';
+export { VRAttachableCube } from './VRAttachableCube.js';
+export * from './scene.js';

package/games/examples/vr-game/scene.ts

@@ -0,0 +1,99 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+import { VRAttachableCube } from './VRAttachableCube.js';
+import { VRInteractableCylinder } from './VRInteractableCylinder.js';
+import { VRPressableButtonActor } from './VRPressableButton.js';
+import { VRRifleActor } from './VRRifleActor.js';
+
+// ============================================================================
+// SCENE CREATION
+// ============================================================================
+
+/**
+ * Creates the complete VR demo scene with all interactive objects
+ */
+export function createVRScene(world: ENGINE.World): void {
+  createGround(world);
+  createAttachableObjects(world);
+  createInteractables(world);
+  createRifle(world);
+  createEnvironmentObjects(world);
+}
+
+/**
+ * Creates the ground plane with physics
+ */
+function createGround(world: ENGINE.World): void {
+  ENGINE.GameBuilder.createDefaultGround(world);
+}
+
+/**
+ * Creates VR attachable objects (cubes and sphere)
+ */
+function createAttachableObjects(world: ENGINE.World): void {
+  // Create VR attachable cubes in a circle
+  const cubeColors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];
+  for (let i = 0; i < 6; i++) {
+    const cube = new VRAttachableCube(cubeColors[i]);
+    const angle = (i / 6) * Math.PI * 2;
+    cube.rootComponent.position.set(
+      Math.cos(angle) * 3,
+      1,
+      Math.sin(angle) * 3
+    );
+    world.addActor(cube);
+  }
+}
+
+/**
+ * Creates VR interactable-only objects
+ */
+function createInteractables(world: ENGINE.World): void {
+  const cylinder = new VRInteractableCylinder(new THREE.Vector3(-2, 1, -2));
+  world.addActor(cylinder);
+
+  // Simple pressable button at a console position
+  const button = new VRPressableButtonActor({
+    onPressed: () => {
+      console.log('[VRPressableButton] Pressed');
+    }
+  });
+  button.rootComponent.position.set(0, 1, -1);
+  world.addActor(button);
+}
+
+/**
+ * Creates the rifle that can be picked up
+ */
+function createRifle(world: ENGINE.World): void {
+  const rifle = new VRRifleActor();
+  rifle.rootComponent.position.set(2, 1.5, -1);
+  world.addActor(rifle);
+}
+
+/**
+ * Creates environment objects for reference and atmosphere
+ */
+function createEnvironmentObjects(world: ENGINE.World): void {
+  // Create pillars for reference
+  for (let i = 0; i < 4; i++) {
+    const pillar = new ENGINE.Actor({
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.CylinderGeometry(0.3, 0.3, 4, 8),
+        material: new THREE.MeshStandardMaterial({
+          color: 0x888888,
+          roughness: 0.6,
+          metalness: 0.8
+        })
+      })
+    });
+    const angle = (i / 4) * Math.PI * 2;
+    pillar.rootComponent.position.set(
+      Math.cos(angle) * 8,
+      2,
+      Math.sin(angle) * 8
+    );
+    world.addActor(pillar);
+  }
+}

package/games/hand-tracking-demo.ts

@@ -0,0 +1,71 @@
+/**
+ * Hand Tracking Demo - demonstrates WebXR hand tracking integration
+ */
+
+import * as ENGINE from '../src/index.js';
+
+export class HandTrackingDemo extends ENGINE.BaseGameLoop {
+  private vrPawn?: ENGINE.VRPawn;
+
+  constructor(container: HTMLElement) {
+    super(container, {
+      xrEnabled: true,
+      vrSessionOptions: {
+        optionalFeatures: ['hand-tracking', 'local-floor'],
+        requiredFeatures: []
+      }
+    });
+  }
+
+  protected override async preStart(): Promise<void> {
+    this.world.postProcessManager.disablePasses(ENGINE.PostProcessPass.ToneMapping);
+    // Create VR pawn with hand tracking support
+    this.vrPawn = new ENGINE.VRPawn({
+      movementComponent: null,
+      camera: null, // VR handles its own cameras
+      enableTeleportation: true,
+      enableSnapTurn: true,
+      snapTurnAngle: 45,
+      maxTeleportDistance: 10
+    });
+
+    this.world.addActor(this.vrPawn);
+    this.vrPawn.setupVRTracking(this.renderer.renderer);
+
+    // Create player controller for input handling
+    const controller = new ENGINE.PlayerController();
+    controller.possess(this.vrPawn);
+    this.world.addActor(controller);
+
+    // Update controllers every frame
+    this.vrPawn.onTickPrePhysics.add(() => {
+      this.vrPawn!.updateControllers();
+    });
+
+    // Listen for hand tracking events
+    this.vrPawn.onControllerAdded.add((controllerInfo) => {
+      const handedness = controllerInfo.inputSource.handedness;
+      const isHand = !!controllerInfo.inputSource.hand;
+      console.log(`[HandTrackingDemo] ${isHand ? 'Hand' : 'Controller'} added: ${handedness}`);
+
+      if (isHand) {
+        console.log(`[HandTrackingDemo] Hand tracking active for ${handedness} hand`);
+      }
+    });
+
+    this.vrPawn.onControllerRemoved.add((inputSource) => {
+      const handedness = inputSource.handedness;
+      const isHand = !!inputSource.hand;
+      console.log(`[HandTrackingDemo] ${isHand ? 'Hand' : 'Controller'} removed: ${handedness}`);
+    });
+
+    // Create basic scene
+    ENGINE.GameBuilder.createDefaultLighting(this.world);
+    ENGINE.GameBuilder.createDefaultSkybox(this.world);
+    ENGINE.GameBuilder.createDefaultGround(this.world);
+  }
+
+  protected override postStart(): void {
+    // BaseGameLoop will automatically call createVRButton() with hand tracking support from vrSessionOptions
+  }
+}

package/games/index.ts

@@ -0,0 +1,21 @@
+export * from './animation-demo.js';
+export * from './animation-retarget-demo.js';
+export * from './behavior-tree-demo.js';
+export * from './character_animation.js';
+export * from './collision-demo.js';
+export * from './hand-tracking-demo.js';
+export * from './manifold-demo.js';
+export * from './instanced-mesh-demo.js';
+export * from './navigation-demo.js';
+export * from './navmesh-primitives-demo.js';
+export * from './performance-test-demo.js';
+export * from './postprocess-demo.js';
+export * from './ragdoll-demo-simple.js';
+export * from './ragdoll-demo.js';
+export * from './swipe-tap-demo.js';
+export * from './tween-demo.js';
+export * from './ui-demo.js';
+export * from './vfx-demo.js';
+export * from './vfx-wawa-demo.js';
+export * from './vr-ui-demo-minimal.js';
+export * from './vr-ui-demo.js';