Самый полный пакет Flutter для рендеринга интерактивных 3D-моделей в различных форматах ( GLB , GLTF , OBJ , FBX ), с возможностью управления анимацией, текстурами, камерой и многим другим.
Пакет Flutter 3D Controller — это наиболее комплексное решение для рендеринга различных форматов 3D-моделей, предлагающее обширные функциональные возможности, позволяющие пользователям оптимально контролировать 3D-модели.
Он лидирует в реализации новых функций, в то время как некоторые другие пакеты просто копируют функции и код Flutter 3D Controller без должного упоминания или соблюдения условий лицензирования.
Примечательно, что при тестировании других доступных пакетов пользователи могут столкнуться со сбоями в работе жестов на iOS и некоторых устройствах Android. Однако Flutter 3D Controller — первый и единственный пакет, решающий эту проблему с помощью функции перехватчика жестов , представленной в версии 2.0.0 , выпущенной 5 октября 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.2
AndroidManifest.xml
(только для Android) Настройте файл android/app/src/main/AndroidManifest.xml
вашего приложения следующим образом:
+- android:label="example"> + android:label="example" + android:usesCleartextTraffic="true">
app/build.gradle
(только для Android)Измените minSdkVersion на 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist
(только для iOS) Чтобы использовать этот пакет в iOS, вам необходимо подписаться на предварительный просмотр встроенных представлений, добавив логическое свойство в файл ios/Runner/Info.plist
вашего приложения с ключом io.flutter.embedded_views_preview
и значением YES
:
< key >io.flutter.embedded_views_preview key >
< true />
web/index.html
(только в Интернете) Измените тег вашего
web/index.html
чтобы загрузить JavaScript, например:
< head >
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > script >
head >
Описание проблемы . Если у вас возникли проблемы с загрузкой 3D-моделей по URL-адресу на реальном устройстве iOS, причиной может быть режим блокировки . Режим блокировки — это функция безопасности в iOS, которая ограничивает определенные функции, такие как сетевые запросы или загрузка встроенного контента, для защиты пользовательских данных.
Выполните следующие действия, чтобы отключить режим блокировки на вашем устройстве:
Этот пакет использует средство просмотра моделей Google для рендеринга 3D-моделей, и могут возникнуть проблемы с рендерингом некоторых моделей/текстур. В будущем ядро пакета (Model Viewer) изменится для поддержки всех типов 3D-моделей.