Белый экран при объединении ReactJS + Marzipano? - PullRequest
Новая
       14

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

0 голосов
/ 29 июня 2018

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

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

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

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

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

В любом случае, что происходит сейчас, мой браузер отображает белый экран без ошибок в консоли, однако при нажатии и перетаскивании курсор меняется на закрытую руку, и div, к которому я прикрепил Marzipano через 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;

1 Ответ

0 голосов
/ 12 сентября 2018

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

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

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

...