flutter_3d_controller
flutter_3d_controller
แพ็คเกจ Flutter ที่สมบูรณ์แบบที่สุดสำหรับการเรนเดอร์โมเดล 3 มิติเชิงโต้ตอบในรูปแบบต่างๆ ( 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.2AndroidManifest.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_previewkey >
< 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 > คำอธิบายปัญหา : หากคุณมีปัญหาในการโหลดโมเดล 3 มิติจาก URL บนอุปกรณ์ iOS จริง โหมดล็อค อาจเป็นสาเหตุ โหมดล็อคเป็นคุณสมบัติความปลอดภัยใน iOS ที่จำกัดฟังก์ชันการทำงานบางอย่าง เช่น คำขอเครือข่าย หรือการโหลดเนื้อหาที่ฝังไว้เพื่อปกป้องข้อมูลผู้ใช้
ทำตามขั้นตอนเหล่านี้เพื่อปิดการใช้งานโหมดล็อคบนอุปกรณ์ของคุณ:
แพ็คเกจนี้ใช้ model-viewer ของ Google เพื่อเรนเดอร์โมเดล 3 มิติ และอาจมีปัญหาในการเรนเดอร์โมเดล/พื้นผิวบางส่วน แกนหลักของแพ็คเกจ (Model Viewer) จะมีการเปลี่ยนแปลงในอนาคตเพื่อรองรับโมเดล 3 มิติทุกประเภท
