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

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

• https://aframe.city/#NewYington
• https://aframe.city/#LosTierrashire
• https://aframe.city/#NewKusunoki

• 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

• See history of newly added features here https://github.com/kfarr/aframe-city-builder/blob/master/CHANGELOG.md

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.)

(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!

• 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

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.

NOT IN THIS RELEASE - LATER THINGS TO DO:

• remove old UI2D, add same icons as action menu bar! old dialog pops open kfarr#9
• updating hash should trigger loading new city kfarr#10
• show HUD message for save success with city name - in VR and on browser desktop kfarr#11
• scale large/small (and rotate?) with both grips being pressed (what would happen to undo?) kfarr#6
• remove load and save functions from index html file, can add to action-controls or new component kfarr#12
• add aframe.city to chrome/daydream vr whitelist kfarr#13
• erase tool kfarr#14
• placing an object directly over another (especially for snapping baseplates) should replace the existing object, not place both on same location
  • How to do this? One person on slack suggested use flushtodom to force update of position to DOM https://aframe.io/docs/0.4.0/components/debug.html#component-to-dom-serialization and then use javascript to figure out of another object is close.
• 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/

• most models made by Mike Judge, see more here: https://github.com/mikelovesrobots/mmmm
• table http://tf3dm.com/3d-model/table-65702.html
• tree and simple base plates created by kfarr using magicavoxel (https://ephtracy.github.io/)
• city builder text based on https://github.com/ngokevin/kframe/blob/master/components/text/examples/vaporwave/index.html
• vox/kfarr_veh_tram_avenio.vox inspired by https://sketchfab.com/models/7e3d9f90af9447dabcb813a4af43ae76

• The A-Frame City Builder codebase is MIT License Copyright (c) 2017 Kieran Farr
• Most nice looking objects are made by Mike Judge from his "Mini Mike's Metro Minis" project under the Creative Commons License.