Hey there,
I experience a rendering issue when trying to create multiple scenes reusing the same same renderer, bounding scene dimensions to HTML div elements being placed above the canvas.
I tried to debug this, recently I found out that the second scene does not render at all.
Some relevant code parts to help this through:
//App:
//...
this.addScene('main', new SceneDisplayProps());
this.addScene('other', new SceneDisplayProps());
(this.scenes.get('main') as ChartScene).addComponent(new FilledCandle(100, 100, 20, 20, 0x00ff00));
(this.scenes.get('other') as ChartScene).addComponent(new FilledCandle(100, 100, 20, 20, 0x0088ff));
export class RenderingContext {
private contentElement: HTMLElement = document.getElementById('content') as HTMLElement;
constructor(
readonly scenes: Map<string, ChartScene> = new Map(),
readonly canvas: HTMLCanvasElement = document.getElementById( 'c' ) as HTMLCanvasElement,
readonly renderer = new THREE.WebGLRenderer({ canvas: canvas })
) {
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0x000000, 1 );
renderer.setPixelRatio( window.devicePixelRatio );
}
//...
addScene(sceneName: string, displayProps: SceneDisplayProps) {
if (sceneName === '') {
throw new Error('Unnamed scene');
}
const scene = new ChartScene(this);
scene.name = sceneName;
const sceneElemName = `scene_${scene.name}`;
this.contentElement.insertAdjacentHTML('beforeend', `<div id="${sceneElemName}" style="${displayProps.asCss()}"></div>`);
const sceneElem = document.getElementById(sceneElemName) as HTMLElement;
const rect = sceneElem.getBoundingClientRect();
const camera = new THREE.OrthographicCamera(rect.width / -2, rect.width / 2, rect.y / 2, rect.height / -2);
camera.translateZ(10);
camera.updateProjectionMatrix();
scene.userData = {...scene.userData, ...{element: document.getElementById(sceneElemName), camera: camera, elementOriginalDimensions: rect}};
this.scenes.set(sceneName, scene);
}
rerender() {
this.renderer.setScissorTest(false);
this.renderer.clear(true, true);
this.renderer.setScissorTest(true);
this.scenes.forEach((scene) => {
const sceneUserData = scene.userData as SceneUserData;
const {left, right, top, bottom, width, height} = (sceneUserData.element as HTMLElement).getBoundingClientRect();
this.renderer.setViewport(left, bottom, width, height);
this.renderer.setScissor(left, bottom, width, height);
sceneUserData.camera.left = width / -2;
sceneUserData.camera.right = width / 2;
sceneUserData.camera.top = height / 2 ;
sceneUserData.camera.bottom = height / -2;
sceneUserData.camera.updateProjectionMatrix();
const cameraHelper = new CameraHelper(sceneUserData.camera);
scene.add(cameraHelper);
this.renderer.render(scene, sceneUserData.camera);
});
}
It would help a lot, if you can give me a clue how to go on debugging this.
