flutter_3d_controller
flutter_3d_controller
El paquete Flutter más completo para renderizar modelos 3D interactivos en varios formatos ( GLB , GLTF , OBJ , FBX ), con la capacidad de controlar animaciones, texturas, cámara y más.
El paquete Flutter 3D Controller es la solución más completa para renderizar varios formatos de modelos 3D y ofrece una amplia funcionalidad para brindar a los usuarios un control óptimo sobre los modelos 3D.
Es líder en la implementación de nuevas funciones, mientras que algunos otros paquetes simplemente han copiado las funciones y el código del controlador Flutter 3D sin el crédito adecuado ni el cumplimiento de la licencia.
En particular, al probar otros paquetes disponibles , los usuarios pueden experimentar fallas en los gestos en iOS y ciertos dispositivos Android. Sin embargo, Flutter 3D Controller es el primer y único paquete que resuelve este problema con su función de interceptor de gestos , introducida en la versión 2.0.0 , lanzada el 5 de octubre de 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 (solo Android) Configure android/app/src/main/AndroidManifest.xml de su aplicación de la siguiente manera:
+ <uses-permission android:name="android.permission.INTERNET"/>
<application
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher"
- android:label="example">
+ android:label="example"
+ android:usesCleartextTraffic="true">
<activity
android:name=".MainActivity"app/build.gradle (solo Android)Cambie minSdkVersion a 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist (solo iOS) Para usar este paquete en iOS, debe optar por la vista previa de vistas integradas agregando una propiedad booleana al archivo ios/Runner/Info.plist de su aplicación, con la clave io.flutter.embedded_views_preview y el valor YES :
< key >io.flutter.embedded_views_preview</ key >
< true />web/index.html (solo web) Modifique la etiqueta <head> de su web/index.html para cargar JavaScript, así:
< head >
<!-- Other stuff -->
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > </ script >
</ head > Descripción del problema : si tiene problemas para cargar modelos 3D desde una URL en un dispositivo iOS real, el modo de bloqueo podría ser la causa. El modo de bloqueo es una característica de seguridad en iOS que restringe ciertas funcionalidades como solicitudes de red o cargar contenido incrustado para proteger los datos del usuario.
Siga estos pasos para desactivar el modo de bloqueo en su dispositivo:
Este paquete utiliza el visor de modelos de Google para renderizar modelos 3D y puede tener algún problema al renderizar algunos modelos/texturas. El núcleo del paquete (Visor de modelos) cambiará en el futuro para admitir todo tipo de modelos 3D.
