Safari 15 - THREE.WebGLRenderer: Context Lost.

[olihulland]

When running on Safari 15 I get a THREE.WebGLRenderer: Context Lost error causing the page to keep loading and the photosphere not to be shown.

Have been trying to update dependencies in a fork to see if this can be resolved.

Note: I had a similar error with a-frame which was fixed by updating to a newer version of aframe/THREE.

[olihulland]

Due to time limitations I have chosen to just implement my own component using the same underlying photo-sphere-viewer library (I used v4.2.1 rather than older version used here). This works fine which suggests issue is due to outdated dependency.

---

Source code for component if someone else is facing the same problem:

(Look into https://photo-sphere-viewer.js.org docs for options to change/set in componentDidMount)

yarn add photo-sphere-viewer

MyPhotoSphere.js:

import React, {Component} from 'react';
import { Viewer } from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';

class MyPhotoSphere extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const viewer = new Viewer({
            container: document.querySelector("#viewer"),
            panorama: this.props.src,
        });
        viewer.setOption('autorotateSpeed', this.props.animRPM+'rpm')
        viewer.startAutorotate();
    }

    render() {
        return <div id="viewer" style={{height: this.props.height}} />;
    }
}

export default MyPhotoSphere;

To Use:

<MyPhotoSphere src={url} height={400} animRPM={2} />