How can we rotate and zoom the model

[RajatDBazaar]

For now, our model is a static position but we want to rotate it and zoom it like we can do it in other packages and also we want a free orbit rotation on model, which means we can rotate the model without any restriction in any direction

this is the code we are having

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(
        title: "",
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _loaded = false;
  ThermionViewer? _thermionViewer;

  @override
  void initState() {
    super.initState();
  }

  Future _load() async {
    var viewer = await ThermionFlutterPlugin.createViewer();
    _thermionViewer = viewer;
    _thermionViewer!.loadSkybox("assets/default_env_skybox.ktx");
    _thermionViewer!.loadGlb("assets/cube.glb");

    _thermionViewer!.setCameraPosition(0, 1, 10);
    _thermionViewer!.setCameraRotation(
        v.Quaternion.axisAngle(v.Vector3(1, 0, 0), -30 / 180 * pi) *
            v.Quaternion.axisAngle(v.Vector3(0, 1, 0), 15 / 180 * pi));
    _thermionViewer!.addLight(LightType.SUN, 7500, 50000, 0, 0, 0, 1, -1, -1);
    _thermionViewer!.setRendering(true);
    _loaded = true;

    setState(() {});
  }

  Future _unload() async {
    var viewer = _thermionViewer!;
    _thermionViewer = null;
    setState(() {});
    await viewer.dispose();
    _loaded = false;
    setState(() {});
  }

  Widget _loadButton() {
    return Center(
        child: ElevatedButton(child: const Text("Load"), onPressed: _load));
  }

  Widget _unloadButton() {
    return Center(
        child: ElevatedButton(child: const Text("Unload"), onPressed: _unload));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      if (_thermionViewer != null)
        Positioned.fill(child: ThermionWidget(viewer: _thermionViewer!)),
      if (!_loaded) _loadButton(),
      if (_loaded) _unloadButton(),
    ]);
  }
}

[nmfisher]

Hi @RajatDBazaar - actually I have made some improvements to the gesture handling which should make it a lot easier for you to achieve what you want. I haven't merged these into master yet, but if you wait a few days, I should have some time to create some samples and merge with a new release.

[RajatDBazaar]

Okay I will wait for it, but can I know some rough time and are you also providing sample code for it!!

[nmfisher]

Probably early next week. I'll be updating the samples and will make sure to include one for gesture handling.

[RajatDBazaar]

Okay, I am waiting for it but can you please confirm that the update you are releasing can rotate the model in free orbit, which means we can rotate the model in 360 degrees in all directions??

[nmfisher]

Yes (in fact the current release version can already do exactly that, but it's not as intuitive as the newer version and there's no guide/documentation).

[nmfisher]

@RajatDBazaar please try the camera_manipulation example project with thermion_flutter: 0.2.1-dev.9 on pub.dev.

If this isn't exactly what you need, I can give you some pointers for how to implement something more specific.

[RajatDBazaar]

@nmfisher

Thank you so much for your help—everything is working exactly as I was hoping for after searching for a solution for over a month! However, there are still a few minor issues and additional features we'd like to explore. Below are the key points:

Issues:

1. Gesture Direction:
   When scrolling the model with a single finger, it moves in the opposite direction (scrolling down moves it up). Could you
   guide us on how to reverse or correct this behavior so that the gestures align with the intended motion?

2. Zoom Limitation:
   We are facing a limitation with zooming. After zooming in and out, the model returns to its initial zoom level, but we
   cannot zoom in further after that. We would like to have continuous zoom capability beyond the current limit. How can
   we enable unrestricted zoom?

3. Rotation Sensitivity:
   We would like to adjust the rotation speed or sensitivity of the model when scrolling. Is there a way to increase or fine-
   tune the rotation speed?

4. Model Scaling Issue:
   One major issue we're encountering is inconsistent scaling across different models. Sometimes, a model is extremely
   zoomed in, and other times, the model appears as a small point, making it difficult to view properly. How can we fix this
   issue to ensure consistent scaling of models? Its only working well with cube.glb model you can test it with fox.glb
   model https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/Fox/glTF-Binary

Feature Requests:

1. Viewpoint Modes:
   Could you help us implement both Viewpoint modes—Trackball and Turntable—in the package? We would like the
   ability to switch between these modes.

2. Reset Viewpoints:
   Is there a way to reset the viewpoint to its initial position? This would be a useful feature for users who want to return to
   the default view after rotating or zooming.

3. Draw Modes:
   We are also interested in adding different Draw Modes such as Default, Wireframe, and Point Cloud. Can this be i.
   integrated into the package?

Additional Note:

To get a clearer idea of what we are referring to, you can check out the following app, which demonstrates similar features:

Website: https://app.emb3d.com/3dviewer
Android App: https://play.google.com/store/apps/details?id=com.transformandlighting.emb3d&hl=en_IN
iOS App: https://apps.apple.com/us/app/emb3d-3d-model-viewer/id1130786907

Your support has been fantastic, and we would love to explore these options with your guidance. Any help on these points would be greatly appreciated.

Thanks again!

[nmfisher]

On 1 & 2, I'll expose parameters for sensitivity/inverting axis in the next version.
On 3, you're free to adjust the input handling however you want - you can copy/paste the FixedOrbitRotateInputHandlerDelegate and adjust as you need. FixedOrbitRotateInputHandlerDelegate has a minimumDistance parameter which will prevent you from zooming any further than that, you can adjust this but it won't let you go "past" the model (because it's intended for orbit around a fixed point, so zooming through/past the model doesn't make sense unless the camera flips back around to look at the target. You'd need to think through exactly what you want the camera to do.

On 4, you can call ThermionViewer.transformToUnitCube, which will scale the model so it fits within a 1x1x1 cube.

Re feature request 2, you have complete control over the camera position/orientation. There are various ways to do it, but here's one example:

var initialPosition = Vector3(0,0,10);
var lookAt = Vector3(0,0,0);
var up = Vector3(0,1,0);
var viewMatrix = createViewMatrix(initialPosition, lookAt, up);
viewMatrix.invert();
await viewer.setCameraModelMatrix(viewMatrix);

Feature request 1 is pretty straightforward but I would probably only implement if I was being contracted to do so (but if you or someone else wants to implement, I'd be more than happy to accept a PR).

Feature request 2 is also possible but would require a substantial amount of work. If it's something you're serious about, please feel free to e-mail me about contract work.

[RajatDBazaar]

@nmfisher

Thank you for your continued support! I'm happy to report that we were able to manage everything, and now we're also able to zoom in and out of the model without any restrictions. All of your suggestions have been implemented successfully, and everything is working smoothly.

Regarding contributions, I would be happy to help with Feature Request 1 (Viewpoint Modes) and Feature Request 3 (Draw Modes). With your guidance, I believe I can effectively implement these features. I'm really looking forward to contributing and learning through this process.

Additionally, we are still looking forward to the new version that will include controls for sensitivity and inverting the axis, as you mentioned. However, this is quite urgent for us, so if you could guide me on how to resolve the inverted axis issue on my own in the meantime, I would appreciate it greatly.

Once again, thank you for your support!