flutter3d3d-model

implement 3d model in flutter


I want to ask regarding implementing 3d model in flutter using HTML link. Does anyone knows how to implement it. I have tried babylonjs_viewer and model_viewer_plus packages examples but they didn’t work for me. If anyone can help me with it, it will be great

Thank you


Solution

  • Would be great if you could provide more information regarding the error.

    But this is how implemented my 3D model in a Flutter web browser.

    import 'dart:html';
    
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:flutter/src/widgets/container.dart';
    import 'package:flutter/src/widgets/framework.dart';
    import 'package:model_viewer_plus/model_viewer_plus.dart';
    
    class My3DModel extends StatelessWidget {
      const My3DModel({super.key});
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          height: MediaQuery.of(context).size.height / 2.5,
          child: ModelViewer(
            src: "assets/3D_model/my_model.glb",
            alt: "A 3D model of Ritchie's model",
            autoRotate: false,
            cameraOrbit: "15deg 90deg -110m",
            cameraTarget: "0m 1.7m 0m",
            fieldOfView: "180deg",
          ),
        );
      }
    }
    

    I created my 3D model in a separate file, however, it's the same if you wanted to implement directly into the body of the app.