Как создать панорамное изображение 360 в Gatsby / React? - PullRequest
Новая
       43

Как создать панорамное изображение 360 в Gatsby / React?

0 голосов
/ 01 января 2019

Я пытаюсь понять, как создать базовое изображение 360 Panorama в реакции / gatsbyjs, где пользователь может бесконечно прокручивать изображение по горизонтали.Вот результат, которого я пытаюсь достичь:

образец сайта

Я мог бы легко достичь этого результата с помощью плагина jquery в обычном html / css /Но, однако, я не мог понять, как правильно сделать это «способом реагирования».Я попытался использовать response-vr, однако, когда я пытаюсь импортировать все необходимые модули из Reaction-vr, браузер выдает мне следующую ошибку:

enter image description here

Я все еще изучаю React, поэтому любые указания или предложения будут высоко оценены!

вот мой код компонента: 

import React, { Component } from 'react'
import { View, Pano } from 'react-vr'
import { Link } from 'gatsby'
import FooterMenu from '../../components/footer-menu/footer-menu'
import Content from '../../components/content-container/content'

import './upper.sass'

const UpperPage = () => {
  return (
    <Content>
      <div id="view-1" class="view-content">
        <Link to="/views" className="back-btn">
          &#8592; back
        </Link>
        <View>
          <Pano source={{ uri: '../../images/views/high.jpg' }} />
        </View>
      </div>
      <FooterMenu />
    </Content>
  )
}

export default UpperPage

1 Ответ

0 голосов
/ 02 января 2019

Я не знаком с устаревшим проектом React VR, но эта документация предполагает, что он не предназначен для включения в существующий компонент React, а построен как его собственный проект..

Эта документация предлагает два способа интеграции проекта 360 в существующее приложение, одним из которых является использование iframe.Чтобы сделать это внутри Gatsby, вы должны настроить свой проект React 360 на сборку в папку в папке static вашего проекта Gatsby (например: your-gatsby-site/static/vr-experience/index.html) и собрать / развернуть его перед запуском gatsby build.Это скопирует ваш проект React 360 в папку public при сборке, что сделает его доступным для HTTP-запросов.

...