flutter_3d_controller
flutter_3d_controller
애니메이션, 텍스처, 카메라 등을 제어할 수 있는 기능을 갖춘 다양한 형식( GLB , GLTF , OBJ , FBX )의 대화형 3D 모델을 렌더링하기 위한 가장 완벽한 Flutter 패키지입니다.
Flutter 3D 컨트롤러 패키지는 다양한 3D 모델 형식을 렌더링하기 위한 가장 포괄적인 솔루션으로, 사용자에게 3D 모델에 대한 최적의 제어를 제공하는 광범위한 기능을 제공합니다.
새로운 기능을 구현하는 데 앞장서는 반면, 일부 다른 패키지는 적절한 신용이나 라이선스 준수 없이 Flutter 3D 컨트롤러의 기능과 코드를 복사했습니다 .
특히, 사용 가능한 다른 패키지를 테스트할 때 사용자는 iOS 및 특정 Android 장치에서 제스처 오작동을 경험할 수 있습니다. 그러나 Flutter 3D 컨트롤러는 2024년 10월 5일 에 출시된 버전 2.0.0 에 도입된 제스처 인터셉터 기능 으로 이 문제를 해결하는 최초이자 유일한 패키지입니다.
//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에서 이 패키지를 사용하려면 io.flutter.embedded_views_preview 키와 YES 값을 사용하여 앱의 ios/Runner/Info.plist 파일에 부울 속성을 추가하여 내장된 뷰 미리보기를 선택해야 합니다.
< key >io.flutter.embedded_views_previewkey >
< true />web/index.html (웹 전용) JavaScript를 로드하려면 web/index.html 의 태그를 다음과 같이 수정하세요.
< head >
< script type =" module " src =" ./assets/packages/flutter_3d_controller/assets/model_viewer.min.js " defer > script >
head > 문제 설명 : 실제 iOS 장치의 URL에서 3D 모델을 로드하는 데 문제가 있는 경우 잠금 모드가 원인일 수 있습니다. 잠금 모드는 사용자 데이터를 보호하기 위해 네트워크 요청이나 내장된 콘텐츠 로드와 같은 특정 기능을 제한하는 iOS의 보안 기능입니다.
장치에서 잠금 모드를 비활성화하려면 다음 단계를 따르십시오.
이 패키지는 Google의 모델 뷰어를 사용하여 3D 모델을 렌더링하며 일부 모델/텍스처를 렌더링하는 데 문제가 있을 수 있습니다. 패키지의 핵심(모델 뷰어)은 향후 모든 유형의 3D 모델을 지원하도록 변경될 예정입니다.
