从 Flutter WebView 打开 Google 场景查看器答案

【问题标题】：Open Google Scene Viewer from Flutter WebView从 Flutter WebView 打开 Google 场景查看器
【发布时间】：2020-04-30 16:45:45
【问题描述】：

我正在尝试从 Flutter 中的 web 视图打开以下脚本：

<model-viewer src="https://dashboard.impiattalo.com/storage/app/public/259/bistecca.gltf" alt="A 3D model of an astronaut" auto-rotate camera-controls ar ar-modes="web-xr scene-viewer quick-look fallback"  ar-scale="auto"></model-viewer>

当我尝试从 Chrome 打开 ar 时，它工作得很好，在颤动的 web 视图中它不起作用，它给了我这个错误。

Error Flutter

这是我使用的代码：

                    child: WebView(
                            initialUrl:
                                'https://dashboard.impiattalo.com/3DViewer?url=${_con.food?.fbx_model?.url}',
                            javascriptMode: JavascriptMode.unrestricted,
                            gestureRecognizers: <
                                Factory<OneSequenceGestureRecognizer>>{
                              Factory<VerticalDragGestureRecognizer>(
                                () => VerticalDragGestureRecognizer()
                                  ..onUpdate = (_) {},
                              )
                            },
                          ),

这是发布规范：

  webview_flutter: ^0.3.20+2

你有什么建议吗？谢谢指教

【问题讨论】：

见github.com/drydart/model_viewer.dart/issues/4

标签： flutter webview sceneform android-augmented-reality model-viewer

【解决方案1】：

您遇到的错误与已知问题 google/model-viewer#743 相关：无法从 Android WebView 启动 Google 的 Scene Viewer，没有解决方法。

要使用 Flutter，您只需使用 Flutter 的 Model Viewer 包，它嵌入了 Google 的 <model-viewer> Web 组件并包含必要的解决方法（请参阅 drydart/model_viewer.dart#4）：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
          src: 'https://dashboard.impiattalo.com/storage/app/public/259/bistecca.gltf',
          alt: "Bistecca",
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

请注意，由于主机名可能是非公开的，因此我实际上无法使用您的模型 URL 尝试此操作，但上面的代码确实适用于其他模型。

$ host dashboard.impiattalo.com
Host dashboard.impiattalo.com not found: 3(NXDOMAIN)

【讨论】：