Как создать панораму 360 в Gatsby / React?

Я пытаюсь понять, как создать базовое изображение 360 Panorama в react / 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

reactjs javascript gatsby react-360 panoramas
person York Wang    schedule 01.01.2019    source источник
comment
Я сомневаюсь, что это причина, но я заметил, что вы не заключили свой uri в метод «asset». Мелочь, но стоит попробовать. См. Объяснение здесь: facebook.github.io / response-360 / docs / См., например, здесь: github.com/facebook/react-360/blob/master/Examples/TourSample/   -  person Shawn    schedule 01.01.2019
comment
Вы пытались воссоздать node_modules, удалив его, а затем запустив yarn install или npm install?   -  person Anthony Kong    schedule 01.01.2019
comment
@AnthonyKong Я пробовал это, не работает. Это вызывает у меня ту же ошибку. Я предполагаю, что это как-то связано с GatsbyJs и как я импортирую response-vr? Я не совсем уверен   -  person York Wang    schedule 02.01.2019
comment
@Shawn Спасибо за предложение, но я не думаю, что это решит проблему. Это может иметь какое-то отношение к тому, как устроен мой проект. Я использую GatsbyJs (генератор статических сайтов на основе реакции) для создания своего проекта, а не response-vr-cli. Я сделал npm install response-vr, а затем импортировал его в один из компонентов страницы, почему-то эта настройка не работает. Я не уверен, что я что-то пропустил.   -  person York Wang    schedule 02.01.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я бы предложил использовать aframe-react вместо _ 2_ (с измененным брендом 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. В любом случае вы создадите отличные впечатления от погружения, готовые к виртуальной реальности!

person Alexandr Tovmach    schedule 13.11.2020

arrow_upward
1
arrow_downward

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

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

person coreyward    schedule 02.01.2019