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

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

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

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay