Белый экран при объединении ReactJS + Marzipano?

Question

Я работаю над проектом, в котором я пытаюсь объединить ReactJS + Marzipano.

Я на стадии, когда я создал свой проект React, используя create-react-app, установил Marzipano через npm и скопировал / немного изменил некоторый шаблонный код из примера Marzipano, чтобы он вписался в приложение React.

Обратите внимание, что я также установил glslify как зависимость в своем проекте, потому что, когда я попытался импортировать Marzipano без него, я получил следующую ошибку:

Модуль не найден: не удается разрешить "glslify"

Также обратите внимание, что glslify является зависимостью dev для Marzipano, но не является производственной. Я думаю, установив его в качестве зависимости, может быть, где я споткнулся, но он выдавал вышеуказанную ошибку без нее, поэтому не уверен, что с этим делать.

В любом случае, что происходит сейчас, мой браузер отображает белый экран без ошибок в консоли, однако при нажатии и перетаскивании курсор меняется на закрытую руку, и div к которому я прикрепил марципано через React's ref Система была модифицирована, поэтому Марципано определенно что-то делает.

Ниже мой файл 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

В первый (и единственный) раз вызывается метод рендеринга, div, к которому вы прикрепляете ссылку, не имеет содержимого и, следовательно, отображается с высотой ноль.

Затем Marzipano создает сцену в этом элементе div, но, считывая размеры элемента контейнера, он отображает холст с нулевой высотой.

Чтобы это исправить, либо установите конкретную высоту в div (например, с помощью атрибута style), либо задайте ему высоту 100% и сделайте то же самое в index.css для html, body и #root