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

Question

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

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

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

Я все еще изучаю 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

Answer 1

Я бы предложил использовать aframe-react вместо react-360(переименован в response-vr). Я просто интегрировал его с проектом Gatsby:

1. Следуйте руководству по установке для aframe-react чтобы добавить необходимые зависимости в проект Gatsby:

            npm install --save aframe aframe-react
   

2. Создайте компонент / страницу Gatsby (например: src/pages/virtual-reality.tsx) с содержанием ниже, и используйте его:

            import 'aframe';
   import 'aframe-particle-system-component';
   
   import React from 'react';
   import { Entity, Scene } from 'aframe-react';
   
   const VRScene: React.FunctionComponent = () => {
     return (
       <Scene>
         <Entity
           geometry={{ primitive: 'box' }}
           material={{ color: 'red' }}
           position={{ x: 0, y: 0, z: -5 }}
         />
         <Entity particle-system={{ preset: 'snow' }} />
         <Entity light={{ type: 'point' }} />
         <Entity gltf-model={{ src: 'virtualcity.gltf' }} />
         <Entity text={{ value: 'Hello, WebVR!' }} />
       </Scene>
     );
   };
   
   export default VRScene;
   

3. Запустите свой проект Gatsby npm start:

   

Чем React 360 отличается от A-Frame?

A-Frame - это фреймворк для создания виртуальных миров с использованием декларативных HTML-подобных компонентов. Он имеет богатую коллекцию доступных компонентов от активного сообщества и отлично подходит для создания сложных 3D-сцен, которые можно просматривать в VR. Мы считаем, что React 360 служит другому варианту использования, оптимизированному для приложений, которые полагаются на пользовательские интерфейсы или по своей природе являются управляемыми событиями. Просмотрите наши примеры, чтобы увидеть, какие типы вещей вы можете легко создать с помощью React 360.

Пытаетесь понять, какой фреймворк вам подходит? Вот небольшой тест. Если ваше приложение управляется взаимодействием с пользователем и имеет много 2D или 3D элементов пользовательского интерфейса, React 360 предоставит вам необходимые инструменты. Если ваше приложение состоит из множества 3D-объектов или полагается на сложные эффекты, такие как шейдеры и постобработка, вы получите лучшую поддержку от A-Frame. В любом случае, вы создадите отличные впечатления от виртуального погружения!

Answer 2

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

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