从Webview获取（THREE.js）3D模型到我的Native-React（增强现实）应用程序

Posted 2021-05-02

在过去的几周里，我正在试图弄清楚如何将一个外部网络应用程序（通过THREE.js）包含到viro react应用程序中。我尝试过webview，但是我需要将模型导入到我的Viro应用程序中。我尝试了WebViewBridge模块（理论上它可以将.obj文件作为字符串从webview发送到我的应用程序，所以我可以在AR中显示它）但它似乎不适用于Viro使用的Native反应版本。

            <View >
                <WebViewBridge                      
                    ref="webviewbridge"                 
                    source={{uri: 'http://www.google.com'}}>
                </WebViewBridge>
            </View>

当我为“webview”更改“webviewbridge”时，如果按下按钮，它会在新视图中显示谷歌。我的目标是显示Web应用程序，点击按钮我可以获得所呈现的3D模型并在增强现实中显示它（viro-react的一个特征）。

技术信息：

• 电脑：Windows 10
• react-native-cli：2.0.1
• 反应原生：0.49.3
• Viro-react testbed版本：2.4.0
• 测试设备：三星s8（android）
• Webview桥：https://www.npmjs.com/package/react-native-webview-bridge-updated

答案

我的坏，它现在使用“injectjavascript”道具。

let jsCode = " document.querySelector('#myContent').style.backgroundColor = 'green';";

    return(
            <View style={localStyles.viroContainer}> //this just sets flex to 1


                <WebView
                    source={{ html: "<h1 id='myContent'>Hello</h1>" }}
                    style={{ flex: 1 }} 
                    ref={ webview => { this.webview = webview; }}
                    injectedJavaScript={jsCode}
                    javaScriptEnabled={true}>
                </WebView>

                <TouchableHighlight style={localStyles.overlayButton} 
                    onPress={this.sendMessageToWebView2} underlayColor='transparent'>
                        <Text>Send message to WebView</Text>
                </TouchableHighlight>

            </View>


        );
    }

我现在在buttonclick（sendmessagetowebview2）上设法在我的webview中获得一个带字符串的警报，但我还没有设法改变injectJavaScript。