Estoy tratando de crear una extensión 3 JS para Thingworx, pero renderHtml sigue fallando en combinación con un lienzo 3 JS (ver código).

 //runtime.ts file renderHtml(): string { let htmlString = '<div class="widget-content"><canvas></canvas></div>'; return htmlString; } afterRender(): void { const OrbitControls = require('three-orbit-controls')(CourseView); const OBJLoader = require('three-obj-loader')(CourseView); var scene = new CourseView.Scene(); var width = this.getProperty('SceneWidth', 0); var height = this.getProperty('SceneHeight', 0); var color = this.getProperty('SceneColor', '#000000'); if(width <= 0) { width = window.innerWidth } if(height <= 0) { height = window.innerHeight } if(color == undefined){ color = "#000000" } var ratio = width / height; var camera = new CourseView.PerspectiveCamera(75, ratio, 0.1, 1000); camera.position.z = 30; var cv = this.jqElement.find("canvas").get(0); console.log(cv); this.renderer = new CourseView.WebGLRenderer({canvas: cv}); this.renderer.setSize(width, height); this.renderer.setClearColor("#0000ff"); var control = new OrbitControls(camera, this.renderer.domElement); const geometry = new CourseView.SphereGeometry( 15, 32, 16 ); const material = new CourseView.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } ); const sphere = new CourseView.Mesh( geometry, material ); scene.add( sphere ); control.addEventListener('change', () => this.myRender(scene, camera)); this.myRender(scene, camera); } myRender(scene, camera) { this.renderer.render(scene, camera); }

Como se muestra, WebGLRenderer obtiene el lienzo dentro del div con la clase widget-content. Necesito este div para realizar enlaces de Thingworks. Cuando dejo fuera el div, todo funciona bien. Si el div existe para implementar enlaces, la esfera no se representa. Además, el renderizador parece atascado y tampoco tiene un fondo azul, a pesar de la llamada de color claro. Cuando hago clic en él (tal vez no esté actualizado), el color cambia a azul, pero aún no hay esfera. ¿Alguien se ha dado cuenta de ThreeJS en Thingworx y puede mostrarme cómo lo hizo? Creo que tal vez el contenido del widget div aplica algunos cambios a todos los niños (también mi lienzo ThreeJS), pero no puedo decir qué cambios ... ¿Quizás alguien lo sabe?

Código completo: https://www.toptal.com/developers/hastebin/olelowawih.js