Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
5 years ago

Creating Custom visual using Three.js

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

 

Need Help