从Flutter WebView打开Google场景查看器

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>

当我试图从Chrome打开ar时，它运行得很好，在flutter web视图中它不起作用，它给了我这个错误。

错误颤振

这是我使用的代码：

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有关：如果没有解决方法，就不可能从Android WebView启动谷歌的场景查看器。

要在Flutter中实现这一点，您只需使用Flutter的Model Viewer包，该包嵌入了谷歌的<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)