Creating Custom visual using Three.js

[Anonymous]

I'm currently trying to implement Three.js within the PowerBI in order to visualise some meshes. However I don't seem to be having much luck getting the meshes to appear within the Power BI developer window. My main concern is which three.js object should I be appending to the HTMLElement, my code is below. Also I am only using three.js as it was the first mesh library that I cam across, if it is not the best library to use please let me know.

code:

constructor(options: VisualConstructorOptions) {

        let scene = new THREE.Scene();

        console.log('Visual constructor', options);

        this.target = options.element;

        this.updateCount = 0;

        if (document) {

            const new_p: HTMLElement = document.createElement("p");

            new_p.appendChild(document.createTextNode("Updates: "));

            const new_em: HTMLElement = document.createElement("em");

            this.textNode = document.createTextNode(this.updateCount.toString());

            const new_m: HTMLElement = document.createElement("M");

            new_em.appendChild(this.textNode);

            new_p.appendChild(new_em);

            this.target.appendChild(new_p);

            this.camera = new THREE.PerspectiveCamera(100,window.innerWidth/window.innerHeight,0.1,1000);

            this.camera.position.z=5;

            this.renderer = new THREE.WebGLRenderer();

            this.renderer.setSize(window.innerWidth,window.innerHeight);

            this.renderer.setClearColor('#D13D1D'); 

            window.addEventListener('resize',()=>{

              this.renderer.setSize(window.innerWidth,window.innerHeight);

              this.camera.aspect = window.innerWidth/window.innerHeight;

              this.camera.updateProjectMatrix();

            })

            this.geometry = new THREE.SphereGeometry(1.5,10,10);         

            this.materials = new THREE.MeshStandardMaterial({color: 0xFFFFFF})

            this.mesh = new THREE.Mesh(this.geometry,this.materials);

            this.mesh.material.color.set("green");

            this.light = new THREE.PointLight(0xFFFFFF,1,500);

            this.light.position.set(10,0,40);

            scene.add(this.light);

            scene.add(this.mesh);

            document.appendChild(new_m);

            this.renderer.render(scene,this.camera);

            this.target.append(this.renderer);

        }

    }

Any help would be much appreciated

[Anonymous]

Hi @Anonymous 

Here I found some related blogs, I hope they could help you.

How to run things locally

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

Best Regards,

Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.