ThreeJS extension for Thingworx

Question

I am trying to create a 3 JS extension for Thingworx, but the renderHtml keeps bugging in combination with a 3 JS canvas in it (See code).

//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);
}

As shown, the WebGLRenderer gets the canvas inside the div with the class widget-content. I need this div, to realize bindings of Thingworks. When I leave out the div, everything works fine. If the div exists to implement bindings, the sphere is not rendered. Moreover, the renderer seems stuck and also has no blue background, despite the clear-color call. When I click on it (maybe its not updated) the color changes to blue, but still there is no sphere. Does anyone has realized ThreeJS in Thingworx and can show me how they did it? I think maybe the div widget-content does apply some changes to all childern (also my ThreeJS canvas), but I cant tell which changes... Maybe someone knows?

Full code: https://www.toptal.com/developers/hastebin/olelowawih.js

Answer 1

For those of you might having this problem in the future, check your setter, you might want to render there as well and keep track of NaN values...