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

2017-01-20

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 powerbi.com, 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": [
    ".api/v1.4.0/PowerBI-visuals.d.ts",
    "node_modules/three/build/three.js",
    "typings/index.d.ts",
    "src/visual.ts"
  ]
}

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();

TechPower BI