Three.js 3D models inside a Power App / Power Platform

Unfortunately there is not a straight forward way to implement 3D view inside a Power App, but what is great that we can go bit of a coding route instead - The PCF way!

After discovering PCF (Powerapp Component Framework) I wanted to know what are the capabilities of it, and if it could handle 3D models so they could be displayed inside of Canvas App.

So what about Three.js? It is possible, which I think is very cool.

There are lot of resources on the net explaining how to get PCF installation working, I think the best video I've seen is from Carl De Souza.

https://www.youtube.com/watch?v=897DPWMJQ20

Including his cheat sheet:

https://carldesouza.com/pcf-create-build-deploy-cheat-sheet/

Here is the basic setup of the environment and the prerequisites, so you can start messing with it asap.

Skip to Step 2 if you got this working already. This is the workflow that works the best for me:

Step 1 - Get the environment working:

Install node.js

Go to the node website and install node.js

Install .NET for Mac or Win

It's important for Power Platform CLI. Should be older than 6, I just installed the newest.

Install Visual Studio Code

Install Visual Studio Code Power Platform Tools

If you go to the extension tab inside of VS Code, search for Power Platform Tools. When installed, type

pac        

into the console. List of commands should appear. Don't be afraid to restart whatever terminal you are using, so it can pick up the correct path for pac.

If that doesn't work do this command:

dotnet tool install --global Microsoft.Powerapps.CLI.Tool        

Now you can try writing in command again:

pac        

If it will give a list of commands, then installation was successful. If not, comment the issue.

Step 2: Get the git repository and let's get it working.

Instead of writing all the code separate, here is a link to the repo.

All the code inside of index.ts is pretty much commented, so you can comment stuff out and see what does what:

https://github.com/Pavelioso/pcf-three-js-power-apps-simple

Clone it, or download it, and open the folder inside of VS Code, and run (you should be inside the folder):

npm install        

This will install all the dependencies, including three.js.

Afterwards, run

npm start build        

This will build the application. In order to preview it in browser, run:

npm start watch        

You could aswell just use "start", but the "watch" command makes the preview responsive to changes inside VS Code.

The PCF Control should start in test window!

Don't forget to change the "width" and "height" parameters - the three.js canvas render is dependent upon them.

You can try clicking on the cube, for it's color to change. This is so it's clearly visible that the cube is intractable.

I believe I've commented most of the code, but one of the bigger hassles I had was with the window size. For many iterations I couldn't see any output, only to realize that I had to hard core the container size - but that wasn't optimal, since it wouldn't adapt to it's requested size by the Power App itself.

The windows sizing work with this line inside the init:

context.mode.trackContainerResize(true);        

And then inside the updateView is

const width = context.mode.allocatedWidth;
const height = context.mode.allocatedHeight;
this._renderer.setSize(width, height);
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();        

Otherwise it's a pretty average three.js code :)

Enjoy!