حزمة Flutter الأكثر اكتمالاً لعرض نماذج ثلاثية الأبعاد تفاعلية بتنسيقات مختلفة ( GLB ، GLTF ، OBJ ، FBX )، مع القدرة على التحكم في الرسوم المتحركة والأنسجة والكاميرا والمزيد.
تعد حزمة Flutter 3D Controller هي الحل الأكثر شمولاً لعرض تنسيقات النماذج ثلاثية الأبعاد المختلفة، حيث توفر وظائف واسعة النطاق لمنح المستخدمين التحكم الأمثل في النماذج ثلاثية الأبعاد.
إنها رائدة في تنفيذ ميزات جديدة، في حين أن بعض الحزم الأخرى قامت للتو بنسخ ميزات ورمز 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 >
وصف المشكلة : إذا كنت تواجه مشكلة في تحميل نماذج ثلاثية الأبعاد من عنوان URL على جهاز iOS حقيقي، فقد يكون وضع التأمين هو السبب. يعد وضع التأمين بمثابة ميزة أمان في iOS تعمل على تقييد وظائف معينة مثل طلبات الشبكة أو تحميل المحتوى المضمن لحماية بيانات المستخدم.
اتبع هذه الخطوات لتعطيل وضع التأمين على جهازك:
تستخدم هذه الحزمة عارض النماذج من Google لعرض نماذج ثلاثية الأبعاد وقد تواجه بعض المشكلات في عرض بعض النماذج/الأنسجة، وسيتغير جوهر الحزمة (عارض النماذج) في المستقبل لدعم جميع أنواع النماذج ثلاثية الأبعاد.