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

Question

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

我可以在正常 html/css/js 的 jquery 插件的帮助下轻松实现这个结果，但是，我不知道如何正确地做到这一点 "react way"。我试过使用 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

Answer 1

我不熟悉 legacy React VR project, but this documentation 表明它不打算包含在现有的 React 组件中，而是作为自己的项目构建。

This documentation 提供了两种将 360 项目集成到现有应用程序的方法，其中一种是使用 iframe。要在 Gatsby 内部执行此操作，您可以将 React 360 项目设置为构建到 Gatsby 项目的 static 文件夹中的一个文件夹（例如：your-gatsby-site/static/vr-experience/index.html），并在您之前将其 build/deploy 运行gatsby build。这会将您的 React 360 项目复制到构建时的 public 文件夹中，使其可用于 HTTP 请求。

Answer 2

我建议使用 aframe-react instead of react-360（更名为 react-vr）。我只是将它与 Gatsby 项目集成：

按照 installation guide for aframe-react 将所需的依赖项添加到 Gatsby 项目：
```
npm install --save aframe aframe-react
```

使用以下内容创建 Gatsby component/page（例如：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;

运行你的 Gatsby 项目 npm start:

How is React 360 Different from A-Frame?

A-Frame is a framework for building VR worlds using declarative HTML-like components. It has a rich collection of available components from a vibrant community, and is great for creating intricate 3D scenes that can be viewed in VR. We believe that React 360 serves a different use case optimized around applications that rely on user interfaces, or are event-driven in nature. Look through our examples to see the types of things you can easily build with React 360.

Trying to figure out which framework is right for you? Here's a quick test. If your application is driven by user interaction, and has many 2D or 3D UI elements, React 360 will provide the tools you need. If your application consists of many 3D objects, or relies on complex effects like shaders and post-processing, you'll get better support from A-Frame. Either way, you'll be building great immersive experiences that are VR-ready!

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

How to create a 360 panorama image in Gatsby/React?

javascript

reactjs

gatsby

panoramas

react-360

How is React 360 Different from A-Frame?