How to Reference Three.js in a Power BI Custom Visual Project

Here’s how to reference three.js in your Power BI Custom Visual project.

I have not tested to see if three.js actually works on, but this is how to resolve reference issues.

1. Setup your dev environment by following the instructions in this post: Power BI Documentation: Use developer tools to create custom visuals

2. Create visual and navigate to the new directory.

pbiviz new threejstest
cd threejstest

3. Install three.js

npm i three --save

4. Install typings

npm i -g typings

5. Install three typings

typings install dt~three --save --global

6. Open in VS Code (or any editor)

code .

7. Open tsconfig.json and add references to the three.js files

  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  "files": [

8. Add three.d.ts to /src folder and copy this code to that file

declare var three: any;

9. Open src/visual.ts and add this line to the top of the file

/// <amd-dependency path='three'>

10. Instantiate a new THREE.Scene(); object in your constructor

let scene = new THREE.Scene();