3D Model Viewer in Flutter
Explore how to render interactive 3D models in Flutter using the model viewer widget that supports glTF and GLB formats embedded in a WebView - RRTutors.
In this example we will create how to show interactive 3d Models in Flutter application.
To view 3D models in flutter application we are using model_viewer library.
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.
Let's get started
Step 1: Create a Flutter application
Step 2: Add required dependencies in pubspec.yaml file
|
Step 3: Create dart file and import model_viewer package
|
ModelViewer constructor
ModelViewer(
{Key key,
this.backgroundColor = Colors.white,
@required this.src,
this.alt,
this.ar,
this.arModes,
this.arScale,
this.autoRotate,
this.autoRotateDelay,
this.autoPlay,
this.cameraControls,
this.iosSrc})
: super(key: key);
|
Step 4: Update dart file code
import 'package:flutter/material.dart';
import 'package:model_viewer/model_viewer.dart';
class DViewer extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
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,
),
),
);
}
}
|
Step 5: Run application
Tags: 3d Model Viewer, SceneViewer