flutter_3d_controller
flutter_3d_controller
Paket Flutter terlengkap untuk merender model 3D interaktif dalam berbagai format ( GLB , GLTF , OBJ , FBX ), dengan kemampuan mengontrol animasi, tekstur, kamera, dan lainnya.
Paket Flutter 3D Controller adalah solusi paling komprehensif untuk merender berbagai format model 3D, menawarkan fungsionalitas ekstensif untuk memberikan pengguna kontrol optimal atas model 3D.
Ini memimpin dalam penerapan fitur-fitur baru, sementara beberapa paket lain baru saja menyalin fitur dan kode Flutter 3D Controller tanpa kredit yang sesuai atau kepatuhan terhadap lisensi.
Khususnya, saat menguji paket lain yang tersedia , pengguna mungkin mengalami kegagalan fungsi isyarat di iOS dan perangkat Android tertentu. Namun, Flutter 3D Controller adalah paket pertama dan satu-satunya yang menyelesaikan masalah ini dengan fitur pencegat isyaratnya , yang diperkenalkan pada versi 2.0.0 , yang dirilis pada 5 Oktober 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 (khusus Android) Konfigurasikan android/app/src/main/AndroidManifest.xml aplikasi Anda sebagai berikut:
+ <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 (khusus Android)Ubah minSdkVersion menjadi 21.
defaultConfig {
...
minSdkVersion 21
...
}
Info.plist (khusus iOS) Untuk menggunakan paket ini di iOS, Anda harus ikut serta dalam pratinjau tampilan tersemat dengan menambahkan properti boolean ke file ios/Runner/Info.plist aplikasi Anda, dengan kunci io.flutter.embedded_views_preview dan nilai YES :
< key >io.flutter.embedded_views_preview</ key >
< true />web/index.html (khusus Web) Ubah tag <head> di web/index.html Anda untuk memuat JavaScript, seperti:
< head >
<!-- Other stuff -->
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > </ script >
</ head > Deskripsi Masalah : Jika Anda mengalami masalah saat memuat model 3D dari URL pada perangkat iOS asli, Mode Lockdown mungkin menjadi penyebabnya. Mode Lockdown adalah fitur keamanan di iOS yang membatasi fungsi tertentu seperti permintaan jaringan atau memuat konten yang disematkan untuk melindungi data pengguna.
Ikuti langkah-langkah berikut untuk menonaktifkan Mode Lockdown di perangkat Anda:
Paket ini menggunakan penampil model Google untuk merender model 3D dan mungkin mengalami beberapa masalah dalam merender beberapa model/tekstur, inti paket (Penampil Model) akan berubah di masa mendatang untuk mendukung semua jenis model 3D.
