Creating Custom visual using Three.js

Anonymous — Tue, 20 Jul 2021 15:06:04 GMT

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

Re: Creating Custom visual using Three.js

Anonymous — Thu, 22 Jul 2021 09:54:33 GMT

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.

topic Re: Creating Custom visual using Three.js in Developer

Creating Custom visual using Three.js

Re: Creating Custom visual using Three.js