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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

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

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️