About

TypeScript port of the original Depth Player project.

Built with modern Three.js and TypeScript for better performance and maintainability.

Instructions

The application automatically loads default images and creates a 3D model on startup. You can also upload your own reference image and depth image (white is near and black is far) and create a new model by clicking the "Create model" button.

Controls:

  • Mouse: Position relative to center controls rotation (further from center = faster rotation)
  • WASD: W = forward, A = left, S = down, D = up (smooth movement)
  • TAB: Toggle debug panel (shows transform controls)
  • P: Toggle performance stats display
  • F: Toggle fullscreen mode
  • T: Switch directional light to translate mode (debug mode only)
  • R: Switch directional light to rotate mode (debug mode only)
  • Touch: Drag to rotate (auto-fullscreen on mobile)

Auto-reset: Camera resets to starting position after 3 seconds of mouse inactivity or 3 seconds after mouse leaves window.

Debug Mode: Press TAB to show transform controls. Yellow cube = center marker, Yellow wireframe sphere = directional light. Use T/R keys to switch between translate/rotate modes for the light.

Reference image

Loading...

Depth image

Loading...

Create model

Actions

Download .obj

Settings

You'll have to recreate the model (by clicking on the "Create model" button) for the changes to be effective.

  • Focal distance:
  • Near plane:
  • Far plane:
  • Smooth mesh:
  • Quad size:
  • Downsampling:
  • Model Scale:
  • Camera FOV:
  • Look Speed Horizontal:
  • Look Speed Vertical:
  • Lens Distortion:
  • Lens Dispersion:
  • Blur Strength:
  • Debug Overlay:
  • Scene Type:
  • Fast Loading (10x Elevator Speed):

Close