Flutter how to build a reactive 3d model

69 Views Asked by At

I'm currently working on developing an app that utilizes nerf models to guide users to specific locations within a room. My goal is to render a 3D arrow on top of the camera, similar to what's commonly seen in video games, to provide users with directional guidance.

However, I'm encountering an issue with the model rendering using model_viewer_plus. While my text widget updates as expected, the 3D model remains stationary.

class _NavigateToLocationScreenState extends State<NavigateToLocationScreen> {
  int theta = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            Positioned.fill(
              child: Center(
                child: ModelViewer(
                  src: 'assets/3d_models/direction_arrow.glb',
                  alt: 'A 3D model of an astronaut',
                  ar: false,
                  autoRotate: false,
                  cameraControls: false,
                  autoPlay: false,
                  disablePan:true,
                  disableTap: true,
                  disableZoom: true,
                  fieldOfView: "${theta}deg",
                ),
              ),
            ),
            Positioned(
              bottom: 20,
              left: 20,
              right: 20,
              child: Column(
                children: [
                  Slider(
                    value: theta.toDouble(),
                    min: 0,
                    max: 360,
                    onChanged: (value) {
                      setState(() {
                        theta = value.toInt();
                      });
                    },
                  ),
                  Text('Radius: $theta'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The initial rendering of the model changes if I change the initial specified parameters. However, subsequent re-renders fail to update the model's position or orientation.

Do you have any suggestions on how to achieve proper re-rendering of the model? I'm open to using JavaScript if necessary.

I've attempted adjusting parameters such as cameraOrbit, cameraTarget, and fieldOfView, but unfortunately, the model remains stuck in place.

I expected that I can change the orientation, position, and scale of the model programmatically.

0

There are 0 best solutions below