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 Documentation: Use developer tools to create custom visuals

2. Create visual and navigate to the new directory.

pbiviz new threejstest
cd threejstest

```text

3\. Install three.js

```bash

npm i three --save

```text

4\. Install typings

```bash

npm i -g typings

```text

5\. Install three typings

```bash

typings install dt~three --save --global

```text

6\. Open in VS Code (or any editor)

```bash

code .

```text

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

```json

{
  "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"]
}

```text

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

```js

declare var three: any;

```text

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

```js

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

```csharp

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

```js

let scene = new THREE.Scene();

000009

Share on LinkedIn