Site icon Flutter Packages | Pub dev Packages – Flutter Mobile App World

A Flutter package for rendering interactive 3D models

Flutterappworld

Flutter 3D Controller

A Flutter package for rendering interactive 3D models in different formats(glb, gltf, fbx, obj), with ability to control animations, textures and camera.

Features

Samples

       

Compatibility

Notes

Brief Example

//Create controller object to control 3D model.
Flutter3DController controller = Flutter3DController();

//It will play 3D model animation, you can use it to play or switch between animations.
controller.playAnimation();

//If you pass specific animation name it will play that specific animation.
//If you pass null and your model has at least 1 animation it will play first animation.
controller.playAnimation(animationName: chosenAnimation);

//It will pause the animation at current frame.
controller.pauseAnimation();

//It will reset and play animation from first frame (from beginning).
controller.resetAnimation();

//It will return available animation list of 3D model.
await controller.getAvailableAnimations();

//It will load desired texture of 3D model, you need to pass texture name.
controller.setTexture(textureName: chosenTexture);

//It will return available textures list of 3D model.
await controller.getAvailableTextures();

//It will set your desired camera target.
controller.setCameraTarget(0.3, 0.2, 0.4);

//It will reset the camera target to default.
controller.resetCameraTarget();

//It will set your desired camera orbit.
controller.setCameraOrbit(20, 20, 5);

//It will reset the camera orbit to default.
controller.resetCameraOrbit();

//The 3D viewer widget
Flutter3DViewer(
  controller: controller,
  src: 'assets/business_man.glb',
)

Installation

pubspec.yaml

dependencies:
  flutter_3d_controller: ^1.2.1

AndroidManifest.xml (Android 9+ only)

To use this widget on Android 9+ devices, your app must be permitted to make an HTTP connection to http://localhost:XXXXX. Android 9 (API level 28) changed the default for [android:usesCleartextTraffic] from true to false, so you will need to configure your app’s android/app/src/main/AndroidManifest.xml as follows:

     <application
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
-       android:label="example">
+       android:label="example"
+       android:usesCleartextTraffic="true">
        <activity
            android:name=".MainActivity"

This does not affect Android 8 and earlier. See [#7] for more information.

app/build.gradle (Android only)

Change minSdkVersion to 21.

defaultConfig {
    ...
    minSdkVersion 21
    ...
}

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 ios/Runner/Info.plist file, with the key io.flutter.embedded_views_preview and the value YES:

  <key>io.flutter.embedded_views_preview</key>
  <true/>

web/index.html (Web only)

Modify the <head> tag of your web/index.html to load the JavaScript, like so:

<head>

  <!-- Other stuff -->

  <script type="module" src="./assets/packages/flutter_3d_controller/assets/model-viewer.min.js" defer></script>
</head>

More Info

This package uses ‘Model Viewer’ to render 3D models and it may have some issues in rendering some models/textures, the core of the package (Model Viewer) will change in the future to support all types of 3D models

Download and/or contribute to this package source code on GitHub

The most complete Flutter package for rendering interactive 3D models in various formats (GLB, GLTF, OBJ, FBX), with the ability to control animations, textures, camera, and more.
https://github.com/m-r-davari/flutter_3d_controller
12 forks.
100 stars.
3 open issues.

Recent commits:
Exit mobile version