From babylon.js to power apps

Questions
1

HI everyone,

How can I use a babylon.js scene in powerapps?

Has anyone tried it?

Thanks,
M

2

cc @bghgary who might be familiar with PowerApps.

3

Hmm, this would be an interesting question for @ryantrem who works in PowerApps.

4

Both Babylon.js and Babylon Native are actually heavily used in PowerApps already.

Pure Babylon.js is used for the 3D Viewer control that ships with PowerApps: Use the 3D object control in Power Apps - Power Apps | Microsoft Learn. You can create your own PCF control that uses Babylon.js, and technically you can even bundle the PCF control without Babylon.js since PowerApps already has it (we don’t document this anywhere, but with the right configuration it should be possible).

Probably outside the scope of what you are asking, but we also use Babylon Native for PowerApps Mixed Reality features and the new Barcode Reader control.

2 Likes
6

Hi Ryan,
1)
My babylon project is in javascript (not typescript) do I have to rewrite it in typescript to work in a PCF component?
2) Is there a PCF component example that uses Babylon.js so I can see how the scene camera etc. are setup (would be helpful as a template) and where to add the rest of the code (is it just in the init()?)

My end goal is to add functionality from babylon.js to power apps 3D object (selecting 3D object from gallery) adding to the already existing MR features from Microsoft.

Thanks,
Michael

7

My end goal is to add functionality from babylon.js to power apps 3D object (selecting 3D object from gallery) adding to the already existing MR features from Microsoft.

Have you looked at the 3D Viewer control that ships with PowerApps: Use the 3D object control in Power Apps - Power Apps | Microsoft Learn ? What you are describing sounds like the same thing that control does. If there is something else you are looking for, would love to better understand as I was a heavy contributor to the 3D/MR controls for Power Apps!

Regarding your questions:

  1. No, your code doesn’t have to be TypeScript. The PCF tooling will create a TypeScript enabled control project, but as with any TypeScript you are free to directly use JavaScript. I would expect you would need to add "allowJs": true to your tsconfig.json, but I can’t think off the top of my head of any other changes you’d need to make.
  2. No I don’t think there is any sample. The 3D Viewer control I mentioned above uses React.js, so the code has a particular pattern. If you aren’t using React.js though, then as you suggested, you can do everything you would normally do to setup a Babylon.js scene within the init function. That function takes a container argument that is an html div, so you just need to add your own html elements (e.g. at least your canvas) to that container div. updateView will get called later any time an input property changes, and you’d need to update your scene based on that. For example, if you had an input property that is intended to be a url pointing to a glb, then when updateView is called after that property is updated, you’d load a different model into the Babylon.js scene.
8

Hi Ryan, I definately need your help here. Yes I am trying to improve on the 3D Viewer that already exists from Microsoft ( [Use the 3D object control in Power Apps - Power Apps | Microsoft Learn) . As a first step I am trying to add functionality from the babylon playground. For example choose a 3D Object from the gallery in power apps and make it emmissive (as shown in this playground https://playground.babylonjs.com/#J19GYK#0) . Thank you in advance Michael

9

Did you try the things I mentioned above? I expect you could look at any Babylon.js example code and basically put that in the init function and parent your html elements to the container div passed into init. If you already tried that, where are you getting stuck, or what’s not working?

10

Hi Ryan,

Steps I have followed so far in the PCF Component Project:

1)Added “compilerOptions”: {“allowJs”: true} in tsconfig.json
2)Added import “./generated/main.js” in index.ts
3)Followed the process for babylon init shown here: Getting Set Up | Babylon.js Documentation
4)Checked file paths are working for index.html