1

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

2 回答 2

1

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.

于 2019-01-02T17:55:42.543 回答
1

我建议使用aframe-react而不是react-360（更名为 react-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 类组件构建 VR 世界的框架。它拥有来自充满活力的社区的丰富可用组件集合，非常适合创建可在 VR 中查看的复杂 3D 场景。我们相信 React 360 服务于一个不同的用例，围绕依赖于用户界面的应用程序进行了优化，或者本质上是事件驱动的。查看我们的示例，了解您可以使用 React 360 轻松构建的事物类型。

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

于 2020-11-13T23:56:50.643 回答