Giter VIP home page Giter VIP logo

grodno-vr / grodno-vr.github.io Goto Github PK

View Code? Open in Web Editor NEW
10.0 4.0 4.0 639.56 MB

Старые фотографии города Гродно в режиме виртуальной реальности

Home Page: https://grodno-vr.github.io

JavaScript 94.92% HTML 3.94% CSS 1.15%
reactjs reactvr webvr virtual-reality grodno belarus javascript threejs webgl 360degree vr react360 virtualreality grodnovr 360-photo 360-degree 360-view

grodno-vr.github.io's Introduction

⛪ Старые фотографии города Гродно в  режиме виртуальной реальности, демо с открытым исходным кодом на основе ReactVR библиотеки.

Подробнее о проекте можно почитать в статье GrodnoVR: My first and last experience with ReactVR

Screen 1 Screen 2 Screen 3

Старт проекта

Клонируйте репозиторий и установите все необходимые зависимости (для установки зависимостей вам понадобится node.js и npm):

git clone https://github.com/grodno-vr/grodno-vr.github.io
cd grodno-vr.github.io
npm i

После установки выполните команду запуска:

npm run start

Откройте демо-проект в браузере по следующему адресу:

http://localhost:8081/vr

Mobile 1 Mobile 2

Если браузер на вашей платформе поддерживает WebVR, то вы можете перейти в режим стереоизображения посредством нажатия на кнопку "View in VR":

VR 1

Поддержка платформ

Работоспособность сайта проверялась на следующих платформах:

  • Google Cardboard + Samsung Galaxy S7 (Chrome)
  • GearVR + Samsung Galaxy S7 (Oculus App)

Есть проблемы на следующих платформах:

  • Ubuntu 16 + Firefox 60 (64 bit)
  • Смартфоны Huawei (на нескольких моделях в разных браузерах)

Сборка проекта

npm run bundle

Титры

Разработка: Артур Басак

Помощь в разработке: Александр Зимаков, Максим Лысаков

Перевод на английский язык: Елизавета Чеканова

3d модели: Игорь Ламека, Артур Басак

360-фото: Артур Басак

Старинные фото из частных коллекций: Феликс Ворошильский, Виктор Саяпин, И. Пашпекина, Китурко Константин, Залы торгового центра OldCity

Большинство фото и текстов взято из публичных источников: wikipedia.org, newgrodno.by, oldgrodno.by, old.grodno.net, grodno.net, grodnonews.by, kinogrodno.by, vgr.by, hrodno.life, harodnia.com, grodno.in, holiday.by, galina-lukas.ru, radzima.org, s13.ru, ggau.by, trainer.by, tut.by, zetgrodno.com, allcastles.ru, ay.by, wikimedia.org, drama.grodno.by, katolik.life

grodno-vr.github.io's People

Contributors

alexzimakov avatar archik408 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

grodno-vr.github.io's Issues

Loading/Spinner Component

Создать компонент Loading/Spinner, что-то вроде того, что на прикрепленном скриншоте.
Компонент должен появляться во время загрузки локации/места (т.к. сфеерическое фото долго загружается)

screen shot 2018-01-15 at 12 25 34 pm

Пример спиннера можно посмотреть тут:
http://vr.britishmuseum.org/

Поворот камеры на 360 градусов

При открытии фотографий, мы поворачиваем камеру так, чтобы эти фото оказались по центру. Чаще всего подводка работает верно, но иногда она делает оборот в 360 градусов.

Нужно понять из-за чего это происходит и попытаться исправить.

Stereoscopy/stereo imaging

Нужно разобраться почему не работает кнопка "режим стерео"

screen shot 2018-01-15 at 12 37 00 pm

И как включить такой режим в браузерах и на девайсах

Scroll for information modal

В информационное окно нужно добавить скролл, на маленьком разрешении оно не прокручивается сейчас. Сейчас скролл появляется только при первом открытии окна.

screen shot 2018-01-15 at 12 34 28 pm

Сlose VR-button for old images

Необходимо добавить кнопку "Закрыть" к секции со старыми фотографиями, сейчас они закрываются по клику на сами фото. Нужно придумать где и как расположить новую кнопку, попытаться сделать это максимально эргономично.

screen shot 2018-01-15 at 12 31 19 pm

Portal component

Необходимо создать компонент перехода из одного места в другое. Вид компонента - задача творческая. За основу можно взять пример ниже:

screen shot 2018-01-15 at 12 25 16 pm

http://vr.britishmuseum.org/

Добавить модульные тесты

Добавить модульные тесты для существующих компонентов, установить hook на pre-commit и pre-bundle.

Подключить eslint, stylelint.

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.