Giter Site home page Giter Site logo

mchlggr / streetview3doverlay Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rbejar/streetview3doverlay

0.0 1.0 0.0 836 KB

An example showing how to overlay 3D models on Google Street View Panoramas using three.js

License: MIT License

JavaScript 88.33% HTML 11.67%

streetview3doverlay's Introduction

StreetView3DOverlay

An example showing how to overlay 3D models on interactive Google Street View Panoramas using three.js.

You can "try before you buy" :-P http://rbejar.github.io/streetviewdemo/StreetView3DOverlay.html. That is not the same code included in this repository, but the differences are negligible.

It shows a 3D model (a ferris wheel) placed on a parking lot (behind my building at EINA - Universidad de Zaragoza) with a Google Street View Panorama as the background. You can change the viewpoint and zoom in and out, and the model keeps its position and rotates as the viewpoint changes. You can also change the panorama, among a fixed set of them, by clicking the spacebar to see the 3D wheel in its place from different points. The panoramas are included via the API offered by Google, but the user interaction (keys, mouse) has been developed for the example.

There are a number of parameters related to the Street View Panoramas which have been established by trial-and-error. This means that both the position and orientation of the ferris wheel is not very precise. The method itself is not very precise, as the distortion in the panoramic images is not uniform, and this will be difficult to make up for, but even thus it may be useful for different purposes.

It works better with WebGL support in the browser, but it will automatically fall back to a simpler version if WebGL support is not detected (thanks three.js!). It has been reported to work at least in the current versions of Firefox in Windows, Linux and Mac OS X, Chrome/ium in Linux and Windows and Internet Explorer 10 in Windows.

The code is not a terrible mess, but it is not following current Web developement standards and it has a few hacks in it (read the comments).

Credits

The ferris wheel 3D model has been downloaded from http://www.archibaseplanet.com/download/33b26753.html and loaded into the scene with the 3DS Loader of three.js.

three.js

http://threejs.org/ The MIT License Copyright (c) 2010-2013 three.js authors

jQuery

Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors Released under the MIT license http://jquery.org/license

jQuery mouse wheel

Copyright (c) 2013 Brandon Aaron http://brandon.aaron.sh Licensed under the MIT License Version: 3.1.6

streetview3doverlay's People

Contributors

rbejar avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.