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 (Web のみ)次のように、 web/index.htmlのタグを変更して JavaScript をロードします。
< 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 モデルをサポートするように変更される予定です。
