Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_source assets_
css
imgs
js
libs
README.md
index.html
wrinkled-paper-texture_1100-12.jpg

README.md

Point-Cloud Maps

Tutorial Image

Table of Contents

Introduction Usage Documentation

Introduction

Point-Cloud Maps (PCM) allows user to explore a Google Maps locations by viewing Sketchfab 3D content related to the Maps search.

Usage

PCM will first attempt to auto-detect a users location and provide results based on their location. At the same time a tutorial is displayed on how to use the web application. To remove the tutorial the user simply needs to either click on the tutorial image or one of the Sketchfab auto results. Or simply submit their own search which will remove the tutorial.

Once a search has been preformed Maps will update its postion and the sidebar will load with Sketchfab results. To view more results users simply click the "view more" button at the bottom of the results. When the end of the results has been reached the button will be removed from the results section.

To view 3D content, users simply need to click on on the the results sections. This will load the viewer and populate it with the Sketchfab model. Viewers and move, roatate, and zoom the 3D asset. To close users simply click the "close viewer button" at the top. This process is repeated for any model they would like to view.

For new searches users simply submit a new query. From there Google Maps will update along with the results section populating with new Sketchfab results.

Technology

Core

The core functionality of this application use's the standard web technologies, HTML, CSS, and JavaScript. Additional libraries include Jquery, Google Maps API, and Sketchfab-viewer.js.

Google Maps

Google Maps is loaded in by calling to the API iwth an initial call from inside the HTML document. This loads the inital map into the DOM. Further API use occurs during auto-location detection at startup and user searches. Both calls for LatLng values and reverse geoencoding occur receive user readable addresses.

Sketchfab

The Sketchfab viewer is loaded into initial memory at first load but not displayed. From there string are sent to the SketchFab API to recieve results. Embed url addresses are included as part of these returns. When a user views a model the viewer is added to the DOM along with an iframe which contains the Sketchfab viewer and the embed url is used to load the model. The viewer and uses WebGL to display 3D content in the browser. The underlying webgl tech is vanilla with a custom viewer built around that tech.

Changelog

2017.07.26

  • UI/CSS: Increased title & artist info...
  • UI/CSS: Increased line spacing for article > p elements...
  • UI/CSS: Adjusted breakpoint for above values.

2017.07.18

  • Removed wood desktop background...
  • Updated to to font paring from reliablepsd.com (Roboto / Cabin)...
  • Removed background image from menu, search, and viewer closing button...
  • Gradient background applied to menu, search, and viewer closing button...
  • Border radius has been adjust from large to smaller elements...
  • Increased text field input's height...
  • Added background gradient to Sketchfab label...
  • Background added to title and author elements in Sketchfab results...
  • Re-styled / Adjusted border, padding, and margins for paragraph, image, etc...
  • Styled "More Content" button to match the styling for the content label...
  • Cursor / pointer enabled for "Show More", article element, and magnify glass...

2017.07.16

  • Added inital Map and Sketchfab results under a single promise...

2017.07.15

  • UI/CSS: Updated loading text color & added background...

2017.07.14

  • HTML: Removed some inline styling in favor of external css sheet...
  • UI/CSS: Tutorial text select disabled, background color added to ease reading...
  • UI/CSS: Scaled loading gif...
  • UI/CSS: Fixed tutorial scale snapping...
  • UI: Adjust tutorial text TRS for Desktop, Tablet, & Mobile.
  • UI/CSS: Cursor pointer added for click-able "Click to Continue" text...
  • UI: Added text information in search field to clarify usage...
  • UI/CSS: Adjust search field scaling to adjust appropriately for Desktop, Tablet, & Mobile...
  • UI: Added text information in Sketchfab field to clarify usage...
  • UI/CSS: Fixed Sketchfab viewer bottom clipping for Tablet & Mobile setups.
  • UI/CSS: Updated positioning of tutorial text...
  • JS: Moved fn initMap into the dom module from html doc internal script...
  • JS: Added few comment to point out which functions are logic/vs gui templates.

2017.06.15

  • Misc: Project submission...
  • Misc: Added README.md...
You can’t perform that action at this time.