Open Google Scene Viewer from Flutter WebView

Question

i'm trying to open the follow script from a webview in 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>

When i try to open the ar from Chrome, it works quite well, in flutter web view it doesn't work and it give me this error.

Error Flutter

This is the code that i use :

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

and this is the pubspec :

  webview_flutter: ^0.3.20+2

Do you have any suggestion? thanks in advice

Answer 1

The error you encountered relates to the known issue google/model-viewer#743: it is not possible to launch Google's Scene Viewer from an Android WebView sans a workaround.

To make this work with Flutter, you can just use the Model Viewer package for Flutter, which embeds Google's <model-viewer> web component and incorporates the necessary workaround (see 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,
        ),
      ),
    );
  }
}

Note that I can't actually try this with your model URL since the hostname is presumably nonpublic, but the code above does work with other models.

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