Difficulties with function calls when integrating needle engine builds into flutter web builds

🌵 Needle Engine
1

When integrating a needle engine build into a flutter web build, how do you make functions in needle engine callable?

I am testing the integration of a Needle Engine build into a Flutter web build.

I’ve been testing like this

  1. built Needle Engine (Javascript Communication example) in Unity.

  2. referencing the index.html I built. I changed the flutter web html template.

    image
    image950×1074 60.4 KB

  3. in Flutter, we imported and integrated needle engine through the code below.

ui_web.platformViewRegistry.registerViewFactory(
viewType,
(int viewId) {
needleElement = html.Element.tag(‘needle-engine’);
return needleElement;
},
);

  1. You’re done importing and merging scenes. However, I have no idea how to do function calls (2 way communication).

  2. the problem is that I’m having trouble figuring out how to call the needle engine’s function in flutter, maybe you can advise me how to do it?

2

Hi June. To implement callable functions in a Needle Engine build integrated into a Flutter web build, you’ll need to set up a communication layer between Flutter and your Needle Engine JavaScript runtime. Here’s a step-by-step approach you can follow:

Step-by-Step Pseudocode

  1. Create an Interface in JavaScript:

    • Define JavaScript functions in your Needle Engine build that can be called from Flutter.
    • Use window object to expose these functions.

  2. Register Event Listeners in Flutter:

    • Use dart:html to communicate with the JavaScript functions registered in the Needle Engine.

  3. Function Calling Setup:

    • Establish a mechanism to call the JavaScript functions from your Flutter code using designated methods.

  4. Return Data to Flutter from JavaScript:

    • Ensure that the JavaScript functions return data back to Flutter as needed.

Example Code

JavaScript (Needle Engine Build)

// Expose a function on the window object in your Needle Engine build
window.callFromFlutter = function(param) {
    console.log("Function called from Flutter with param: " + param);
    // Example function implementation
    return "Response from Needle Engine: " + param;
};

Flutter Code

import 'dart:html' as html;

class MyFlutterClass {
  void callNeedleFunction(String param) {
    // Calling the JavaScript function
    html.window.callMethod('callFromFlutter', [param])
      .then((response) {
          print("Response from Needle Engine: $response");
      });
  }

  void registerView() {
    ui_web.platformViewRegistry.registerViewFactory(
      viewType,
      (int viewId) {
        needleElement = html.Element.tag('needle-engine');
        return needleElement;
      },
    );
  }
}

Explanation

  1. JavaScript: The callFromFlutter function is defined globally. This will allow Flutter to call this method directly through the window object.

  2. Flutter: Using html.window.callMethod, you can invoke the exposed JavaScript functions. Make sure to match the parameter types as needed.

  3. Asynchronous Handling: If your JavaScript function has a return value (like in this case), Flutter can handle it asynchronously.

By following this structure, you should be able to establish a two-way communication channel between Flutter and your Needle Engine build. If you encounter any specific errors or issues, please let me know!

1 replies left - Get a PRO license for more AI replies.
thread_JRYsi6yoEKCOp3NmE1hXsjZM
Reply to this message to continue the conversation

3

Hello

There are multiple ways to call them.

(1) all methods and classes are registered in global scope Needle (e.g. window.Needle) which is primarely useful for CDN cases without a bundler/npm package workflow.

(2) You can access the context from the needle engine web component. In your case needleElement.context. The context gives you access to the scene and all objects and components (e.g. needleElement.context.scene.findObjectOfType(Camera) or needleElement.context.scene.children etc).

(3) Use lifecycle hooks instead of accessing the needle-engine web component. Creating and using Components | Needle Engine Documentation

Classes and types can be imported as usual for modules via import { Camera } from "@needle-tools/engine" - this should also work with flutter (just as with any thirdparty module/package or if you’d be working with vanilla three.js)

There’s no separation between needle-engine and “the web”. Everything that you know about developing a javascript and web project applies to working with a needle engine web project. This means you can import and export classes and functions the same way and depending on your usecase e.g. create event listener functions that you later invoke from a component.

If you need more guidance happy to help. Please try provide a concrete example or a github repository that helps us to understand the problem. Thank you :slight_smile:

1 Like