0

我正在做一个项目,我试图将ReactJS + Marzipano结合起来。

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

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

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

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

无论如何,现在发生的事情是我的浏览器在控制台中呈现一个没有错误的白屏,但​​是当您单击并拖动光标时,它会变成一只闭合的手,并且div我通过 React 的ref系统附加 Marzipano 的那个已经被修改了,所以 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;
4

1 回答 1

1

第一次(也是唯一一次)调用 render 方法时,将 ref 附加到的 div 没有内容,因此以零高度呈现。

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

要解决这个问题,要么在 div 上设置一个特定的高度(例如使用 style 属性),要么给它一个 100% 的高度,然后在 index.css 中对 html、body 和 #root 执行相同的操作

于 2018-09-12T07:41:19.847 回答