Question

我试图了解如何在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

Answer 1

我对legacy React VR项目并不熟悉，但是this documentation建议不要将它包含在现有的React组件中，而应将其构建为自己的项目。

This documentation提供了两种将360项目集成到现有应用程序中的方法，其中一种方法是使用iframe。要在盖茨比内部执行此操作，您需要将React 360项目设置为在盖茨比项目的Private Sub InitializeWebDriver() Dim driver As SeleniumWrapper.WebDriver Set driver = New SeleniumWrapper.WebDriver driver.Start "firefox", "https://www.barchart.com/futures/quotes/ZWH9|530P/price-history/historical" End Sub文件夹中构建一个文件夹（例如：static），然后在运行{ {1}}。这会将您的React 360项目复制到构建中的your-gatsby-site/static/vr-experience/index.html文件夹中，使其可用于HTTP请求。

Answer 2

我建议使用aframe-react而不是react-360（更名为react-vr）。我只是将其与Gatsby项目集成在一起：

按照aframe-react的{{3}}向Gatsby项目添加所需的依赖项：
```
npm install --save aframe aframe-react
```

使用以下内容创建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;

通过npm start运行Gatsby项目：

installation guide

A-Frame是一个框架，用于使用类似HTML的声明性组件来构建VR世界。它具有来自活跃社区的大量可用组件，非常适合创建可在VR中查看的复杂3D场景。我们认为，React 360可为围绕依赖用户界面或本质上是事件驱动的应用程序优化的不同用例提供服务。查看我们的示例，了解可以使用React 360轻松构建的事物类型。

试图找出适合您的框架？这是一个快速测试。如果您的应用程序是由用户交互驱动的，并且具有许多2D或3D UI元素，那么React 360将提供您所需的工具。如果您的应用程序由许多3D对象组成，或者依赖于诸如着色器和后处理之类的复杂效果，那么A-Frame将为您提供更好的支持。无论哪种方式，您都将构建出色的身临其境的VR体验！

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

2 个答案: