model_viewer 0.7.0
model_viewer: ^0.7.0 copied to clipboard
A Flutter widget for rendering interactive 3D models in the glTF and GLB formats.
3D Model Viewer for Flutter #
This is a Flutter widget for rendering interactive 3D models in the glTF and GLB formats.
The widget embeds Google's <model-viewer>
web component in a WebView.
Screenshot #
![Screenshot of astronaut model](https://raw.githubusercontent.com/drydart/model_viewer.dart/master/example/flutter_01.png)
Prerequisites #
Compatibility #
Android and iOS, with a recent system browser version.
Installation #
pubspec.yaml
#
dependencies:
model_viewer: ^0.7.0
Info.plist
(iOS only) #
To use this widget on iOS, you need to opt-in to the embedded views preview
by adding a boolean property to your app's Info.plist
file, with the key
io.flutter.embedded_views_preview
and the value YES
. See the
WebView plugin's documentation
for more information.
Features #
-
Renders glTF and GLB models. (Also, USDZ models on iOS 12+.)
-
Supports animated models, with a configurable auto-play setting.
-
Optionally supports launching the model into an AR viewer.
-
Optionally auto-rotates the model, with a configurable delay.
-
Supports a configurable background color for the widget.
Examples #
Importing the library #
import 'package:model_viewer/model_viewer.dart';
Creating a ModelViewer
widget #
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Model Viewer")),
body: ModelViewer(
src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
alt: "A 3D model of an astronaut",
ar: true,
autoRotate: true,
cameraControls: true,
),
),
);
}
}
Frequently Asked Questions #
Q: Why does the example app just show a blank screen? #
A: Most likely, the platform browser version on your device or emulator is too old and does not support the features that Model Viewer needs. For example, the stock Chrome version on the Android 10 emulator is too old and will display a blank screen; it must be upgraded from the Play Store in order to use this package. See google/model-viewer#1109.
Q: Why doesn't my 3D model load and/or render? #
A: There are several reasons why your model URL could fail to load and render:
-
It might not be possible to load the model URL due to CORS security restrictions. The server hosting the model file must send appropriate CORS response headers for Model Viewer to be able to load the file. See google/model-viewer#1015.
-
It might not be possible to parse the provided glTF or GLB file. Some tools can produce invalid files when exporting glTF. Always run your model files through the glTF Validator to check for this.
-
The platform browser might not support the features that Model Viewer needs. See google/model-viewer#1109.
Q: How do I load a local asset instead of loading a URL? #
A: This is not supported as yet. Due to CORS security restrictions, the
model file cannot be loaded from a file://
URL. That means local assets
must be served from a http://localhost:$PORT
web server. There are plans to
implement a built-in proxy that will enable this in a future version of this
package. (Do get in touch if your company would like to sponsor this work.)