flutter_3d_controller
flutter_3d_controller
Das umfassendste Flutter-Paket zum Rendern interaktiver 3D-Modelle in verschiedenen Formaten ( GLB , GLTF , OBJ , FBX ) mit der Möglichkeit, Animationen, Texturen, Kamera und mehr zu steuern.
Das Flutter 3D Controller- Paket ist die umfassendste Lösung zum Rendern verschiedener 3D-Modellformate und bietet umfangreiche Funktionen, um Benutzern eine optimale Kontrolle über 3D-Modelle zu ermöglichen.
Es ist führend bei der Implementierung neuer Funktionen, während einige andere Pakete einfach die Funktionen und den Code des Flutter 3D Controllers ohne entsprechende Nennung oder Einhaltung der Lizenzierung kopiert haben .
Insbesondere beim Testen anderer verfügbarer Pakete kann es bei Benutzern auf iOS- und bestimmten Android-Geräten zu Gestenstörungen kommen. Allerdings ist Flutter 3D Controller das erste und einzige Paket, das dieses Problem mit seiner Gesten-Interceptor-Funktion löst, die in der am 5. Oktober 2024 veröffentlichten Version 2.0.0 eingeführt wurde.
//Create controller object to control 3D model.
Flutter3DController controller = Flutter3DController ();
//Listen to model loading state via controller
controller.onModelLoaded. addListener (() {
debugPrint ( 'model is loaded : ${ controller . onModelLoaded . value }' );
});
//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 stop the animation.
controller. stopAnimation ();
//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 for glb and gltf format
Flutter3DViewer (
//If you pass 'true' the flutter_3d_controller will add gesture interceptor layer
//to prevent gesture recognizers from malfunctioning on iOS and some Android devices.
//the default value is true
activeGestureInterceptor : true ,
//If you don't pass progressBarColor, the color of defaultLoadingProgressBar will be grey.
//You can set your custom color or use [Colors.transparent] for hiding loadingProgressBar.
progressBarColor : Colors .orange,
//You can disable viewer touch response by setting 'enableTouch' to 'false'
enableTouch : true ,
//This callBack will return the loading progress value between 0 and 1.0
onProgress : ( double progressValue) {
debugPrint ( 'model loading progress : $ progressValue ' );
},
//This callBack will call after model loaded successfully and will return model address
onLoad : ( String modelAddress) {
debugPrint ( 'model loaded : $ modelAddress ' );
},
//this callBack will call when model failed to load and will return failure error
onError : ( String error) {
debugPrint ( 'model failed to load : $ error ' );
},
//You can have full control of 3d model animations, textures and camera
controller : controller,
src : 'assets/business_man.glb' , //3D model with different animations
//src: 'assets/sheen_chair.glb', //3D model with different textures
//src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb', // 3D model from URL
) //The 3D viewer widget for obj format
Flutter3DViewer . obj (
src : 'assets/flutter_dash.obj' ,
//src: 'https://raw.githubusercontent.com/m-r-davari/content-holder/refs/heads/master/flutter_3d_controller/flutter_dash_model/flutter_dash.obj',
scale : 5 ,
// Initial scale of obj model
cameraX : 0 ,
// Initial cameraX position of obj model
cameraY : 0 ,
//Initial cameraY position of obj model
cameraZ : 10 ,
//Initial cameraZ position of obj model
//This callBack will return the loading progress value between 0 and 1.0
onProgress : ( double progressValue) {
debugPrint ( 'model loading progress : $ progressValue ' );
},
//This callBack will call after model loaded successfully and will return model address
onLoad : ( String modelAddress) {
debugPrint ( 'model loaded : $ modelAddress ' );
},
//this callBack will call when model failed to load and will return failure erro
onError : ( String error) {
debugPrint ( 'model failed to load : $ error ' );
},
)pubspec.yaml dependencies :
flutter_3d_controller : ^2.0.2AndroidManifest.xml (nur Android) Konfigurieren Sie android/app/src/main/AndroidManifest.xml Ihrer App wie folgt:
+- android:label="example"> + android:label="example" + android:usesCleartextTraffic="true">
app/build.gradle (nur Android)Ändern Sie minSdkVersion auf 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist (nur iOS) Um dieses Paket unter iOS zu verwenden, müssen Sie sich für die Vorschau eingebetteter Ansichten anmelden, indem Sie der Datei ios/Runner/Info.plist Ihrer App eine boolesche Eigenschaft mit dem Schlüssel io.flutter.embedded_views_preview und dem Wert YES hinzufügen:
< key >io.flutter.embedded_views_previewkey >
< true />web/index.html (nur Web) Ändern Sie das -Tag Ihrer web/index.html um das JavaScript zu laden, etwa so:
< head >
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > script >
head > Problembeschreibung : Wenn Sie Probleme beim Laden von 3D-Modellen von einer URL auf einem echten iOS-Gerät haben, könnte der Sperrmodus die Ursache sein. Der Sperrmodus ist eine Sicherheitsfunktion in iOS, die bestimmte Funktionen wie Netzwerkanfragen oder das Laden eingebetteter Inhalte einschränkt, um Benutzerdaten zu schützen.
Befolgen Sie diese Schritte, um den Sperrmodus auf Ihrem Gerät zu deaktivieren:
Dieses Paket verwendet den Model-Viewer von Google zum Rendern von 3D-Modellen und es kann zu Problemen beim Rendern einiger Modelle/Texturen kommen. Der Kern des Pakets (Model Viewer) wird sich in Zukunft ändern, um alle Arten von 3D-Modellen zu unterstützen.
