Forum Discussion

cesarecaoduro's avatar
cesarecaoduro
Regular Visitor
4 years ago
Solved

Adding threejs to a custom visual

I am tring to add threejs to a custom visual but I keep receiveng always the same error. I have initialized a simple custom visual using pbiviz and then just installed threejs via npm.     { "...
Need Help
  • dm-p's avatar
    dm-p
    4 years ago

    Hi cesarecaoduro,

    Power BI visuals are not set up for async operations by default. Looks like threejs might require this, so this can be mitigated by adding regenerator-runtime to your project.

    From the command line in your project's root folder (assuming you're using npm for package management), run the following:

    npm i regenerator-runtime

    At the top of your visual.ts, add an import, similar to the following:

    import 'core-js/stable';
import 'regenerator-runtime/runtime';  /* <---- add this line */
import '../style/visual.less';

    Re-run pbiviz start and this particular error should go away when you re-initialise your visual.

    Regards,

    Daniel

dm-p's avatar
dm-p
Super User
4 years ago

Hi cesarecaoduro, and glad to see you are making progress. If you've marked a question as solved, I'd suggest posting in a new thread as folks might miss any replies after that (I got a notification as I'm subscribed to the thread).

Custom visuals run in a sandboxed iframe and as such have no domain. This means that if you're trying to load a file relative to your project, the main window assumes that you're trying to load a file relative to powerbi.com and because the domain is null this will cause the CORS error. I wrote a summary up for one of my visuals, that can also be applied to any custom visual as the permissions cannot be overridden. Here's the details if you want to read them.

Additionally, files in the assets folder (other than the icon) are not packaged so there are not endpoints for them in the webpack build. Because of the iframe restrictions, lazy-loading over HTTP is currently not possible. It is however possible to load from a remote server that has an Access-Control-Allow-Origin set to * in their response headers.

You can use a HTML input element (type="file") to present the user with a dialog to open a file and manage the loading via JS. Therefore, if you're just using the file in your assets folder for static testing and would prefer this functionality, I'd recommend skipping over this (unless you can host on a suitable domain and serve over HTTP).

You might also be able to use powerbi-visuals-webpack-plugin to override certain aspects of the standard webpack configuration (e.g. if you need particular loaders). I'm 99% confident you cannot load files through this mechanism even if you create endpoints for them as most browsers still treat these behavious as a CORS violation in sandboxed iframes. I have lost count of the amount of time I have spent trying to solve this approach for loading web workers, so if you want to try and are successful, I'd be very excited to know how you did it 🙂

Regards,

Daniel

cesarecaoduro's avatar
cesarecaoduro
Regular Visitor
4 years ago

Thanks dm-p 

So in simple words you are saying:

  1. I can place the *.wasm file somewhere in another domain and then point to that domain
  2. I can load the IFC file from the dialog and save that somewhere else and have that as a reference URL (or just for testing I can manually upload that file somewhere where I have read rights - AWS buckets?)

I am not going to try to build a custom webpack, but I have seen 3D viewer around, so I am pretty sure this can be achieved.

  • dm-p's avatar
    dm-p
    Super User
    4 years ago

    Yup - you can place a file somewhere like that - it's not just read rights though; make sure there are no cross-domain restrictions or firewalling applied at the server level for those endpoints. I can't speak for AWS but for some Azure assets I need to explicitly enable this so that cross-domain calls from iframes with no origin are possible (otherwise you'll get the same problem).

    I haven't seen the 3D viewer you mention, but I'm sure that they will mandate a similar approach for users, or will allow uploads via the file dialog (or a combination of the two). It could be worth seeing how they do it or reach out to the developers to see if they have any lessons that they can provide you to help narrow your focus on the things that can work. There are a lot of things that are simple to do in a regular web application that become difficult via custom visuals due to the constraints impose by the main window.

    Good luck,

    Daniel