我正在尝试为 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