Skip to content

๐Ÿ—๏ธ A-Frame project demonstrating touch controls for building a VR city scene

License

Notifications You must be signed in to change notification settings

kfarr/aframe-city-builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ—๏ธ aframe-city-builder

A-Frame project demonstrating touch controls for building a VR city scene.

Build a New City Now: >> aframe.city <<

HTC Vive or Oculus Rift with accompanying controllers required to add items to scene.

Load Existing City

Screenshots

* https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot1.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot2.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot3.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot4.png

Feature Highlights

  • Place voxel objects in a fun virtual city of your creation
  • Navigate available voxel objects with a scrolling menu interface in VR
  • Place base plates for streets, grass, parks and residential lots that snap to a simple grid layout
  • Save and load your city to/from JSON format
  • Support for Oculus Touch and HTC Vive Controllers (VR headset and controllers required)
  • Convenience utilities in /utils for creating new object JSON groups for aspiring city voxel artists

Changelog

How do I add new objects to City Builder?

City Builder is only as cool as the objects you can place! So let's add more! (Some day I'd love to have a sketchfab-like fancy cloud interface for uploading objects, an in-app voxel editor and more, but for now you'll have to do a bunch of manual work.)

Step-By-Step Guide

(1) Make the object - I suggest using MagicaVoxel: https://ephtracy.github.io/

(2) Come up with a filename - Each object has unique filename according to this suggested naming convention: "creator_group_object". For example "kfarr_bases_valencia" or "mmmm_obj_candle".

(3) Export to OBJ and take preview image For each object, there are multiple files using the same filename but with different extensions to represent their function in the application:

  • .jpg - A preview image used to represent the object in a menu interface, stored here: /assets/preview/. Should be 1:1 aspect ratio, suggested 256 x 256 dimensions. (Required)
  • .obj, .mtl, .png - Object file format used when placing into A-Frame scene, stored as three files per model here: /assets/obj/ (Required)
  • .vox - The object's raw source file that can be edited again in the future, stored here: /assets/vox/ (Optional)

(4) Add to JSON File - To enable placement of the object within the City Builder app, the object needs to be included in a "creator_group" JSON file. Here's an example: /assets/mmmm_veh.json

To make it easier to add a large number of objects at once, there is a utility script to create a new "creator_group" JSON file here: /utils/json_builder.js

(5) Load JSON file from City Builder - You must add the newly created JSON "creator_group" file to the list of included model definitions upon load of City Builder app. Add your filename to this list: https://github.com/kfarr/aframe-city-builder/blob/master/lib/builder-controls.js#L57

(5) Test it out! Take a screenshot while you're testing! Submit a pull request and include a note and your fancy screenshot!

Need inspiration? What are some other objects to make?

  • more cool vehicles
  • flying things
  • more "bases" like intersection, left turn, right turn, green park only, pedestrian and bike path only
  • more advanced light poles, signals, signs
  • people
  • trains

How can I contribute to City Builder?

Fork this repo, start making changes, and submit a pull request! Also feel free to file an issue or reach out directly [email protected] with your idea and I can try to help make your idea work.

Need inspiration? Here is a partial wishlist for City Builder features:

NOT IN THIS RELEASE - LATER THINGS TO DO:

  • remove old UI2D, add same icons as action menu bar! old dialog pops open #9
  • updating hash should trigger loading new city #10
  • show HUD message for save success with city name - in VR and on browser desktop #11
  • scale large/small (and rotate?) with both grips being pressed (what would happen to undo?) #6
  • remove load and save functions from index html file, can add to action-controls or new component #12
  • add aframe.city to chrome/daydream vr whitelist #13
  • erase tool #14
  • placing an object directly over another (especially for snapping baseplates) should replace the existing object, not place both on same location
  • create a nice "screensaver" or "viewer" mode to entice people to enter VR. For example: show a list of cities and/or show a city at the start by default
  • try adding basic avatar presence using something like: https://github.com/haydenjameslee/networked-aframe
  • auto save with visual indicator (this might be required for multi-user collaboration - i want to see what they've added immediately)
  • try inverted teleport from forked repo
  • add sunlight day cycle as aframe component http://jeromeetienne.github.io/threex.daynight/examples/basic.html; try adding shadow to this too
  • error handling when city in hash cannot be loaded from firebase
  • inspect (magnifying glass)
  • show stats in addition to city name - size of city (objects, area), population (number of chr objects)
  • load directly from voxel https://gist.github.com/JoshGalvin/398ad2339ad7ae93e72489684d599466 https://github.com/daishihmr/vox.js
  • ability for select bar component to delay loading / init - fetch first set of optgroup options from database instead of in index.html
  • blender baking of AO texture and progressive application of AO textures after scene fully loaded
  • support for google draco object compression
  • add a small haptic feedback see: https://github.com/imgntn/jBow/blob/ab2d254f288c563f33e6ed745e41a72ee2b7f759/components/bow-and-arrow.js#L163
  • create components from the useful a-frame stuff (menu switcher, save/load json, desktop dialog ui, message notification)
  • sound effects - commodore 64 style?
  • aframe city website - have a central registry of objects (json file is fine to start) that is not in index.html file ui inspiration - https://buffy.run/model/578e438962c6c80000ea4c5e -> this could be done without a server -> use a git based site builder service. register this as aframe.city
  • try progressive enhancement to replace obj with baked ply after loading
  • load new scenes without destroying original (load by appending) - does not handle collision case
  • add some clouds
  • send a VR postcard to facebook / social media
  • integrate with http://streetmix.net/ to generate street blocks
  • auth / storage service
  • highlight currently overlapping grid location
  • cars to follow prescribed course on roads
  • add aframe snowplay type support https://github.com/rondagdag/aframe-snow-play
  • persistent multiuser world
  • use geolocation api to with virtual citybuilder locations to create "mini second life"
  • physics
  • try isometric view on mobile / non-vr devices (examples aframevr/aframe#84 and http://wafi.iit.cnr.it/webvis/lab/preview.php?gist_id=07b5887a1d57b40b6065)
  • add non-flat lowpoly terrain like this example https://playcanvas.com/

Credits

License

About

๐Ÿ—๏ธ A-Frame project demonstrating touch controls for building a VR city scene

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •