0

我正在尝试为 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 存在以实现绑定，则不会渲染球体。此外，尽管调用了 clear-color ，但渲染器似乎卡住了，也没有蓝色背景。当我点击它（也许它没有更新）时，颜色变为蓝色，但仍然没有球体。有没有人在 Thingworx 中实现了 ThreeJS 并且可以告诉我他们是如何做到的？我认为也许 div 小部件内容确实对所有子项（也是我的 ThreeJS 画布）应用了一些更改，但我不知道哪些更改......也许有人知道？

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

4

1 回答 1

0

对于那些将来可能会遇到此问题的人，请检查您的设置器，您可能还想在那里渲染并跟踪 NaN 值...

于 2021-11-01T09:05:25.783 回答