m-r-davari / 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.

About Me

Hey this is MohammadReza 🙋🏻‍♂️

I'm a seasoned software engineer with a profound expertise in Android and Flutter development. With over 7 years of tech industry experience, including 4 years dedicated to Flutter, I possess a strong track record of designing, implementing, and maintaining production-ready mobile applications based on cutting-edge technologies such as Java/Kotlin for Android and Dart for Flutter. My journey includes leadership roles where I've successfully led teams. as a creative, hardworking team player who enjoys sharing my experience and helping to solve challenges from different perspectives, such as business, management, and software, I can play an essential role in the decision-making of cross-functional teams.

This banner 👇🏻 and the widgets below have been created by the Github Readme Beautifier project which I have developed.

Its a web app to beautify and enhance your Github README file, that provides interesting widgets in GIF(animated) formats.

Show some ❤️️ and support me with Github star ⭐️ . (How To Use)
You are welcomed to contribute.

Notes

This project has been developed using Flutter web.

flutter_3d_controller's Issues

support this library for desktop?

Hi
Is it possible to support this library for Desktop?
Like Windows

Formats Support

Will you please tell that this package currently support how many formats?

Load glb file from device internal storage in AOS & iOS

In my app, glb files are downloaded from the server and saved in internal storage.
I used getApplicationSupportDirectory() of the path_provider library to save the glb file.
I confirmed that it was downloaded from the server and saved in that path(/data/user/0/[package name]/files/Model_1.glb).

The body of the scaffold is as follows

        color: Palette.darkGrey,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Flutter3DViewer(
          progressBarColor: Palette.valueSky,
          controller: controller,
          src: filePath,
        )
      )

The filePath means the path where the glb file is saved. Although the file works well and exists in the path, the following error occurs when loading it into the 3D viewer.

E/flutter (12723): The asset does not exist or has empty data.
E/flutter (12723): #0      PlatformAssetBundle.load.<anonymous closure> (package:flutter/src/services/asset_bundle.dart:324:9)
E/flutter (12723): <asynchronous suspension>
E/flutter (12723): #1      ModelViewerState._readAsset (package:flutter_3d_controller/src/modules/model_viewer/model_viewer_mobile.dart:313:18)
E/flutter (12723): <asynchronous suspension>
E/flutter (12723): #2      ModelViewerState._initProxy.<anonymous closure> (package:flutter_3d_controller/src/modules/model_viewer/model_viewer_mobile.dart:264:26)
E/flutter (12723): <asynchronous suspension>

Is it working by loading from internal storage in device of Android and iOS?

Loading animations from a separate file

I have a glb model for a character and their animations in a separate gltf and glb file. How can i load them and apply the animation on the main character?

Dynamically add textures from a path

I have a simple sofa with white background in my .glb file. I want to change the fabric based on the option selected by the user, I have url's for the fabric images. Is this possible?

No way to determine when controller is ready (model is loaded)

Problem: Need to play a specific animation and set camera to a specific position when model is loaded. Animations and positions are not same every time, so setting it via glb is not an option (if it's even possible for glb)

Possible solutions:

• add a callback which triggers when model is loaded
• specify initial animation and camera position for controller which is set after model is loaded

is it possible to add decorations?

ls it possible ike 3d avatar to let model change clothes hair or glasses .....???

Custom progress bar

Can the progress bar for resource value be customized or removed?

Unable to fetch Animations and textures on iOS.

After the model is loaded, I am calling the controller.getAvailableTextures() and controller.getAvailableAnimations(). This works on Android and it returns the list of Textures and Animations. But on iOS, I don't get any response, instead see this printed on the console - Return type of evaluateJavaScript is not directly supported: __NSArrayM. Returned description of value. Also the code terminates there and doesn't go further. There is no crash though, but the execution just stops their.

Flutter doctor -v

[!] Flutter (Channel stable, 3.19.2, on macOS 13.6.4 22G513 darwin-arm64, locale en-IN)
• Flutter version 3.19.2 on channel stable at /Users/vishakakamath/development/flutter
! Warning: dart on your path resolves to /opt/homebrew/Cellar/dart/2.18.6/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/vishakakamath/development/flutter. Consider adding
/Users/vishakakamath/development/flutter/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 7482962148 (3 months ago), 2024-02-27 16:51:22 -0500
• Engine revision 04817c99c9
• Dart version 3.3.0
• DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/vishakakamath/Library/Android/sdk
• Platform android-34, build-tools 33.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2

Not working on iOS

When I try to load a glb object in iOS and invoke this method:

animations = await _controller.getAvailableAnimations();

I get the following error:

Exception has occurred.
FormatException (FormatException: Unexpected character (at character 1)
(
^
)

Any idea how I can solve this issue?

Note that its working well on Android.

DIspose not present

Hi I was trying out the package for the POC and I've managed to expirience the memory related issues.
After using the hot reload feature the app leaks the controller and setState is called after the widget is not mounted in the tree.

[log] setState() called after dispose(): ModelViewerState#c07b1(lifecycle state: defunct, not mounted)
      This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
      The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
      This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
[log] #0      State.setState.<anonymous closure> (package:flutter/src/widgets/framework.dart:1167:9)
      #1      State.setState (package:flutter/src/widgets/framework.dart:1202:6)
      #2      ModelViewerState._initController (package:flutter_3d_controller/src/modules/model_viewer/model_viewer_mobile.dart:219:5)
      <asynchronous suspension>

Clicking on 3D Models and Feature to Zoom In on the Clicked Model Part

First of all, congratulations on creating a successful library. Upon inspecting the library, I noticed that it only covers basic features such as viewing, animation, etc. However, I would like to request the addition of features like clicking on a multi-part object in OBJ format and displaying a selected effect when clicked. Thank you.

3D asset from files

Hi. thank you for this awesome package.
are there any ways to present 3D objects from file system?

Can't able to open obj format

i want to open obj format with mtl and texture , also can i add multile objs at one space?

View Application Directory Models

I want to download models from the network and preview them after saving them in the application's directory. Is this approach feasible? I noticed that in your example, you passed a static file path; can it instead reference files within the application's directory?