Я работаю над проектом, в котором пытаюсь объединить 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;