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 powerbi.com, but this is how to resolve reference issues.

1. Setup your dev environment by following the instructions in this post: Power BI Custom Visual Dev Environment Setup Quickstart

2. Create visual and navigate to the new directory.

1
2
pbiviz new threejstest
cd threejstest

3. Install three.js

1
npm i three --save

4. Install typings

1
npm i -g typings

5. Install three typings

1
typings install dt~three --save --global

6. Open in VS Code (or any editor)

1
code .

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"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

1
declare var three: any;

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

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

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

1
let scene = new THREE.Scene();

Share