白色屏幕时结合ReactJS + Marzipano？

Question

我正在做一个项目，我正在尝试将ReactJS + 马齐帕诺结合起来。

我正处在一个阶段，我使用create-react-app创建了自己的React项目，通过npm安装了Marzipano，并从Marzipano示例这里中复制/稍微修改了一些样板代码，以使其适合于React应用程序。

注意，我还将玻璃化作为一个依赖项安装在我的项目中，因为当我试图导入没有它的Marzipano时，我得到了以下错误：

模块未找到:无法解析“glslify”

还请注意，glslify是Marzipano的dev依赖项，而不是产品依赖项。我认为通过将它作为依赖项来安装可能是我绊倒的地方，但是它抛出了上面的错误而没有它，所以不知道该怎么做。

无论如何，现在发生的是我的浏览器呈现一个白色屏幕，控制台中没有错误，但是当您单击并拖动光标更改为关闭的手时，我将Marzipano附加到的div 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方法时，您将ref附加到的div没有内容，因此呈现的高度为零。

Marzipano然后在这个div中创建场景，但是当它读取容器元素的尺寸时，它会呈现一个零高度的画布。

要解决这个问题，可以在div上设置一个特定的高度(例如使用样式属性)，或者给它100%的高度，并在index.css中为html、body和#root设置相同的高度。