DEV Community

Kofi Owusu-Afriyie
Kofi Owusu-Afriyie

Posted on

Building a Web Game Engine: Controls

Devlog Web Game Engine with threejs and rapierjs using Angular

  • Camera Movement (WASD/Arrows), Pan, Zoom & Orbit Changed
  • Added Undo/Redo to Viewport Editor for Scene
  • Added Building System (Pick/Place/Deselect/Delete Object)
  • Modeling Build Assets - floors/walls
  • --plenty errors to fix--

Camera Control

  • Orbit - middle mouse or Q & E
  • Zoom- ctrl + middle mouse or scroll mouse wheel
  • Pan - shift + middle mouse or WASD or ArrowKeys
  • Reset Camera To Origin - F2

Object In Scene

  • Pick Object- shift + left mouse
  • Place picked Object - left mouse
  • Deselect Picked Object / Reset Grid - right mouse
  • Delete - shift + right mouse
Picked Mode
  • Move Grid - ctrl +mouse-move
  • Set Origin to Object - Double Right Click
  • Undo/Redo - Ctrl + Z/ Ctrl + Y
  • when object is picked, you can move the grid up/down while holding control.
  • you can also rotate picked object to face your mouse direction when holding Alt

https://play.aiira.co

Image descriptionImage descriptionImage description

Top comments (1)

Collapse
 
projectair profile image
Kofi Owusu-Afriyie

only works on a chromium and safari browser since it use a web core api that firefox and brave does not support.

Also, if you don't see anything or no button shows up, please disable adBlocker for the site. For some reasons, the extension thinks there are ads on the site