flutter_3d_controller
flutter_3d_controller
O pacote Flutter mais completo para renderização de modelos 3D interativos em diversos formatos ( GLB , GLTF , OBJ , FBX ), com capacidade de controlar animações, texturas, câmera e muito mais.
O pacote Flutter 3D Controller é a solução mais abrangente para renderizar vários formatos de modelos 3D, oferecendo ampla funcionalidade para dar aos usuários controle ideal sobre modelos 3D.
Ele lidera na implementação de novos recursos, enquanto alguns outros pacotes apenas copiaram os recursos e o código do Flutter 3D Controller sem o devido crédito ou adesão ao licenciamento.
Notavelmente, ao testar outros pacotes disponíveis , os usuários podem enfrentar problemas de funcionamento de gestos no iOS e em determinados dispositivos Android. No entanto, Flutter 3D Controller é o primeiro e único pacote a resolver esse problema com seu recurso de interceptador de gestos , introduzido na versão 2.0.0 , lançada em 5 de outubro 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 (somente Android) Configure android/app/src/main/AndroidManifest.xml do seu aplicativo da seguinte maneira:
+- android:label="example"> + android:label="example" + android:usesCleartextTraffic="true">
app/build.gradle (somente Android)Altere minSdkVersion para 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist (somente iOS) Para usar este pacote no iOS, você precisa ativar a visualização de visualizações incorporadas adicionando uma propriedade booleana ao arquivo ios/Runner/Info.plist do seu aplicativo, com a chave io.flutter.embedded_views_preview e o valor YES :
< key >io.flutter.embedded_views_previewkey >
< true />web/index.html (somente Web) Modifique a tag do seu web/index.html para carregar o JavaScript, assim:
< head >
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > script >
head > Descrição do problema : se você estiver tendo problemas para carregar modelos 3D de um URL em um dispositivo iOS real, o Modo Lockdown pode ser a causa. O Modo Lockdown é um recurso de segurança do iOS que restringe certas funcionalidades, como solicitações de rede ou carregamento de conteúdo incorporado para proteger os dados do usuário.
Siga estas etapas para desativar o modo de bloqueio no seu dispositivo:
Este pacote usa o model-viewer do Google para renderizar modelos 3D e pode ter algum problema na renderização de alguns modelos/texturas, o núcleo do pacote (Model Viewer) mudará no futuro para suportar todos os tipos de modelos 3D.
