PDA

View Full Version : How to neatly put a ThreeJS renderer in a window?



wiilco
20 Sep 2014, 12:00 AM
Hi,

I am trying to put a WebGL renderer in a Ext JS window. I am using Ext JS 4.2 and ThreeJS r68. This is one of the few ways I can get it working;

Ext.define('TestWindow', { extend: 'Ext.window.Window',
title: 'Test',

width: 400,
height: 300,
modal: true,

listeners: {
render: function () {
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);

this.body.first().first().appendChild(renderer.domElement);
}
}
});

The first().first() chain is needed to get into the innerCt element. I'd rather append directly to the window body but that seems to cause layout issues. This is probably not the way to go, can anyone point me in the right direction? The resize event could help me get the renderer up to size, but how would I go about finding the 'inner' window size available for the renderer?

Thanks!

slemmon
21 Sep 2014, 4:18 PM
I'm not familiar with using ThreeJS specifically, but I recall someone having a similar issue with setting an OpenLayers map in a panel/window and while I don't remember all of the specifics I believe the solution was to use layout fit -vs- auto. Pretty vague I realized, but it's been a while since I saw that issue specifically - worth trying to see if that offers the body / inner elements the way you're needing for ThreeJS.