Откройте Google Scene Viewer из Flutter WebView.

Question

Я пытаюсь открыть следующий скрипт из веб-просмотра во Flutter:

<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>

Когда я пытаюсь открыть ar из Chrome, он работает довольно хорошо, в веб-представлении Flutter он не работает, и он дает мне эту ошибку.

Ошибка 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 = (_) {},
                              )
                            },
                          ),

и это pubspec:

  webview_flutter: ^0.3.20+2

У вас есть какие-либо предложения? спасибо в совет

Answer 1

Ошибка, с которой вы столкнулись, связана с известной проблемой google / model-viewer#743: невозможно запустить Google Scene Viewer из Android WebView без обходного пути.

Чтобы это работало с Flutter, вы можете просто использовать пакет Model Viewer для Flutter, который включает в себя<model-viewer>веб-компонент и включает необходимое обходное решение (см. https://github.com/drydart/model_viewer.dart/issues/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)