React-360：使用外部图像作为场景背景答案

【问题标题】：React-360: Use external Image as Scene BackgroundReact-360：使用外部图像作为场景背景
【发布时间】：2018-09-07 13:44:22
【问题描述】：

一段时间以来，我一直在尝试在环境中设置外部图像。这是我的 index.js：

import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    asset,
    View,
    VrButton,
} from 'react-360';

import {Environment} from 'react-360';

// Set the background to a 360 or 180 image
Environment.setBackgroundImage(
    {uri: 'https://devcdn.player360.de/dev/media-768-raw.jpg'}
    // asset('media-768-raw.jpg')
);

export default class Hello360 extends React.Component {
    // Our component will keep track of this state
    state = {
    };


    componentDidMount(){
    }


    render() {
        return (
            <View style={styles.panel}>
                <Text>
                    <Text>Hey</Text>
                </Text>
            </View>
        );
    }
};


const styles = StyleSheet.create({
    panel: {
        // Fill the entire surface
        width: 1000,
        height: 600,
        backgroundColor: 'rgba(255, 255, 255, 0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

AppRegistry.registerComponent('Hello360', () => Hello360);

React 似乎尝试加载图像，但由于某种原因它只是取消了。

Developer Tools: Network Screenshot

此外，控制台输出没有显示 CORS 或任何其他异常：

Console Output Screenshot

我场景的背景仍然是黑色的。在 react-360 中动态包含外部图像的正确方法是什么？

【问题讨论】：

也许有人可以创建标签 react-360？它需要 1500 个代表点，而我没有。

标签： web virtual-reality react-360

【解决方案1】：

这仍然是加载外部图像的正确方法。

问题是，我的控制台输出中有一个过滤器处于活动状态。因此，我无法在控制台中看到 CORS 警告。

这仍然是 devcdn.player360.de 服务器上的 CORS 问题。我们修复了 CORS 标头，现在可以加载外部图像。

【讨论】：