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.
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
