flutter_3d_controller
flutter_3d_controller
Le package Flutter le plus complet pour le rendu de modèles 3D interactifs dans différents formats ( GLB , GLTF , OBJ , FBX ), avec la possibilité de contrôler les animations, les textures, la caméra, etc.
Le package Flutter 3D Controller est la solution la plus complète pour le rendu de divers formats de modèles 3D, offrant des fonctionnalités étendues pour donner aux utilisateurs un contrôle optimal sur les modèles 3D.
Il conduit à la mise en œuvre de nouvelles fonctionnalités, tandis que certains autres packages viennent de copier les fonctionnalités et le code de Flutter 3D Controller sans crédit ni respect des licences.
Notamment, lors du test d'autres packages disponibles , les utilisateurs peuvent rencontrer des dysfonctionnements gestuels sur iOS et certains appareils Android. Cependant, Flutter 3D Controller est le premier et le seul package à résoudre ce problème avec sa fonctionnalité d'intercepteur de gestes , introduite dans la version 2.0.0 , publiée le 5 octobre 2024 .
//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 (Android uniquement) Configurez le android/app/src/main/AndroidManifest.xml de votre application comme suit :
+- android:label="example"> + android:label="example" + android:usesCleartextTraffic="true">
app/build.gradle (Android uniquement)Remplacez minSdkVersion par 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist (iOS uniquement) Pour utiliser ce package sur iOS, vous devez activer l'aperçu des vues intégrées en ajoutant une propriété booléenne au fichier ios/Runner/Info.plist de votre application, avec la clé io.flutter.embedded_views_preview et la valeur YES :
< key >io.flutter.embedded_views_previewkey >
< true />web/index.html (Web uniquement) Modifiez la balise de votre web/index.html pour charger le JavaScript, comme ceci :
< head >
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > script >
head > Description du problème : si vous rencontrez des difficultés pour charger des modèles 3D à partir d'une URL sur un véritable appareil iOS, le mode de verrouillage peut en être la cause. Le mode de verrouillage est une fonctionnalité de sécurité d'iOS qui restreint certaines fonctionnalités telles que les requêtes réseau ou le chargement de contenu intégré pour protéger les données des utilisateurs.
Suivez ces étapes pour désactiver le mode de verrouillage sur votre appareil :
Ce package utilise la visionneuse de modèles de Google pour restituer des modèles 3D et il peut rencontrer des problèmes lors du rendu de certains modèles/textures. Le cœur du package (Model Viewer) changera à l'avenir pour prendre en charge tous les types de modèles 3D.
