时间戳

首页 > 解决方案 > 如何在 Gatsby/React 中创建 360 度全景图像？

javascript - 如何在 Gatsby/React 中创建 360 度全景图像？

问题描述

我试图了解如何在 react/gatsbyjs 中创建基本的 360 度全景图像，用户可以在其中无限地水平滚动图像。这是我想要达到的结果：

样品站点

借助普通 html/css/js 中的 jquery 插件，我可以轻松实现此结果，但是，我无法弄清楚如何以“反应方式”正确地做到这一点。我尝试过使用 react-vr，但是，当我尝试从 react-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

标签： javascriptreactjsgatsbypanoramasreact-360

解决方案

I'm not familiar with the legacy React VR project, but this documentation suggests that it's not intended to be included within an existing React component but instead built as its own project.

This documentation offers two ways you can integrate a 360 project into an existing application, one of which is to use an iframe. To do this inside of Gatsby, you would set your React 360 project to build to a folder in the static folder of your Gatsby project (e.g: your-gatsby-site/static/vr-experience/index.html), and build/deploy it before you run gatsby build. This will copy your React 360 project over to your public folder on-build, making it available for HTTP requests.

推荐阅读