Thingworx的ThreeJS扩展

Question

我正在尝试为Thingworx创建一个3 JS扩展，但是renderHtml与其中的3 JS画布结合在一起一直存在错误(参见代码)。

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

如图所示，WebGLRenderer使用widget-content类获取div中的画布。我需要这个div来实现Thingworks的绑定。当我省略div时，一切工作正常。如果div用于实现绑定，则不会呈现球体。此外，渲染器似乎被卡住了，而且也没有蓝色背景，尽管有清晰的颜色调用。当我点击它(可能没有更新)时，颜色变为蓝色，但仍然没有球体。有没有人在Thingworx中实现了ThreeJS，并能向我展示他们是如何做到的？我想也许div小部件的内容确实对所有的孩子(包括我的ThreeJS画布)应用了一些更改，但我不知道是哪些更改……也许有人知道？

完整代码：https://www.toptal.com/developers/hastebin/olelowawih.js

Answer 1

对于那些将来可能会遇到这个问题的人，请检查你的setter，你可能也想在那里渲染，并跟踪NaN的值……