javascript - 结合 ReactJS + Marzipano 时出现白屏？

Question

我正在开发一个项目，我试图将 ReactJS 结合起来+ Marzipano .

我现在已经使用 create-react-app 创建了 React 项目，通过 npm 安装了 Marzipano，并复制/稍微修改了一些样板文件Marzipano 示例中的代码 here使其适合 React 应用程序。

注意我还安装了glslify作为我项目中的依赖项，因为当我尝试在没有它的情况下导入 Marzipano 时，出现以下错误:

Module not found: Can't resolve 'glslify'

另请注意，glslify 是 Marzipano 的开发依赖项，但不是生产依赖项。我认为通过将其安装为依赖项可能是我出错的地方，但如果没有它，它就会抛出上述错误，所以不知道该怎么做。

无论如何，现在发生的事情是我的浏览器正在渲染白屏，控制台中没有错误，但是当您单击并拖动光标时，光标会变成握紧的手，并且我附加的 div Marzipano to via React 的 ref 系统已经被修改，所以 Marzipano 肯定在做一些事情。

下面是我的 App.js 文件(其他所有内容都是全新的 create-react-app 安装):

import React, { Component } from 'react';
import './App.css';
import Marzipano from 'marzipano';

class App extends Component {
  componentDidMount() {
    this.panoViewer = new Marzipano.Viewer(this.pano);

    // Create source.
    const source = Marzipano.ImageUrlSource.fromString(
      "img/test.jpg"
    );

    // Create geometry.
    const geometry = new Marzipano.EquirectGeometry([{ width: 2048 }]);

    // Create view.
    const limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
    const view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);

    // Create scene.
    const scene = this.panoViewer.createScene({
      source: source,
      geometry: geometry,
      view: view,
      pinFirstLevel: true
    });

    // Display scene.
    scene.switchTo();
  }
  render() {
    return (
      <div>
        <div ref={pano => this.pano = pano} />
      </div>
    );
  }
}

export default App;

Answer 1

第一次(也是唯一一次)调用 render 方法时，您附加引用的 div 没有内容，因此以零高度进行渲染。

Marzipano 然后在此 div 中创建场景，但当它读取容器元素的尺寸时，它会渲染高度为零的 Canvas 。

要解决此问题，请在 div 上设置特定高度(例如使用 style 属性)，或者将其高度设置为 100%，并在 index.css 中对 html、body 和 #root 执行相同的操作