PDA

View Full Version : Three.js Component



megakill
24 Jan 2012, 6:09 PM
Hello,

I'm tryting to get the Three.js WebGL framework working within ExtJS. The problem occurs when I try to add the rendering canvas into a Component's body, e. g.:


Ext.define('HP.Stage',{
extend: 'Ext.Component',
alias: 'stage',
initComponent: function()
{
this.callParent(arguments);

var renderer;


renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 640);

this.html = renderer.domElement;
}
});

A code like this would be expected to insert just a simple:


<canvas width="x" height="y">

but what is really inserted doesn't make sense:


<div clientleft=​"0" scrollheight=​"0" firstelementchild offsetwidth=​"0" nodetype=​"1" iscontenteditable=​"false" hidden=​"false" previouselementsibling parentelement webkitdropzone offsetparent nodevalue lastelementchild height=​"640" offsetleft=​"0" classname prefix width=​"800" previoussibling namespaceuri=​"http:​/​/​www.w3.org/​1999/​xhtml" localname=​"canvas" id lastchild childelementcount=​"0" innertext clientheight=​"0" textcontent nextsibling scrollwidth=​"0" offsetheight=​"0" clientwidth=​"0" nodename=​"CANVAS" style=​"cssText:​;​length:​0;​parentRule:​null;​getPropertyValue:​function getPropertyValue()​ { [native code]​ }​;​getPropertyCSSValue:​function getPropertyCSSValue()​ { [native code]​ }​;​removeProperty:​function removeProperty()​ { [native code]​ }​;​getPropertyPriority:​function getPropertyPriority()​ { [native code]​ }​;​setProperty:​function setProperty()​ { [native code]​ }​;​item:​function item()​ { [native code]​ }​;​getPropertyShorthand:​function getPropertyShorthand()​ { [native code]​ }​;​isPropertyImplicit:​function isPropertyImplicit()​ { [native code]​ }​;​" lang scrolltop=​"0" offsettop=​"0" childnodes=​"length:​0;​item:​function item()​ { [native code]​ }​;​" baseuri nextelementsibling classlist=​"length:​0;​item:​function item()​ { [native code]​ }​;​contains:​function contains()​ { [native code]​ }​;​add:​function add()​ { [native code]​ }​;​remove:​function remove()​ { [native code]​ }​;​toggle:​function toggle()​ { [native code]​ }​;​" title firstchild attributes=​"0:​[object Attr]​;​1:​[object Attr]​;​length:​2;​getNamedItem:​function getNamedItem()​ { [native code]​ }​;​removeNamedItem:​function removeNamedItem()​ { [native code]​ }​;​item:​function item()​ { [native code]​ }​;​getNamedItemNS:​function getNamedItemNS()​ { [native code]​ }​;​removeNamedItemNS:​function removeNamedItemNS()​ { [native code]​ }​;​setNamedItem:​function setNamedItem()​ { [native code]​ }​;​setNamedItemNS:​function setNamedItemNS()​ { [native code]​ }​;​" dataset outertext parentnode clienttop=​"0" tabindex=​"-1" contenteditable=​"inherit" dir scrollleft=​"0" ownerdocument=​"head:​[object HTMLHeadElement]​;​images:​[object HTMLCollection]​;​nodeType:​9;​embeds:​[object HTMLCollection]​;​linkColor:​;​doctype:​[object DocumentType]​;​parentElement:​null;​bgColor:​;​styleSheets:​[object StyleSheetList]​;​localName:​null;​referrer:​;​ownerDocument:​null;​defaultCharset:​windows-1250;​URL:​http:​/​/​localhost/​hp-client/​public/​desktop/​;​documentURI:​http:​/​/​localhost/​hp-client/​public/​desktop/​;​webkitCurrentFullScreenElement:​null;​height:​635;​designMode:​off;​readyState:​complete;​lastModified:​01/​24/​2012 02:​40:​07;​webkitVisibilityState:​visible;​preferredStylesheetSet:​null;​prefix:​null;​width:​1280;​xmlEncoding:​null;​previousSibling:​null;​characterSet:​UTF-8;​plugins:​[object HTMLCollection]​;​fgColor:​;​namespaceURI:​null;​activeElement:​[object HTMLBodyElement]​;​nodeValue:​null;​lastChild:​[object HTMLHtmlElement]​;​xmlStandalone:​false;​textContent:​null;​nextSibling:​null;​domain:​localhost;​applets:​[object HTMLCollection]​;​charset:​UTF-8;​nodeName:​#document;​webkitFullScreenKeyboardInputAllowed:​false;​cookie:​;​childNodes:​[object NodeList]​;​baseURI:​http:​/​/​localhost/​hp-client/​public/​desktop/​;​inputEncoding:​UTF-8;​webkitIsFullScreen:​false;​implementation:​[object DOMImplementation]​;​compatMode:​CSS1Compat;​links:​[object HTMLCollection]​;​title:​Hedron Power;​firstChild:​[object DocumentType]​;​attributes:​null;​defaultView:​[object DOMWindow]​;​vlinkColor:​;​xmlVersion:​null;​selectedStylesheetSet:​null;​webkitHidden:​false;​alinkColor:​;​location:​http:​/​/​localhost/​hp-client/​public/​desktop/​;​scripts:​[object HTMLCollection]​;​documentElement:​[object HTMLHtmlElement]​;​dir:​;​parentNode:​null;​anchors:​[object HTMLCollection]​;​forms:​[object HTMLCollection]​;​body:​[object HTMLBodyElement]​;​all:​[object HTMLAllCollection]​;​id:​ext-document;​open:​function open()​ { [native code]​ }​;​close:​function close()​ { [native code]​ }​;​write:​function write()​ { [native code]​ }​;​writeln:​function writeln()​ { [native code]​ }​;​clear:​function clear()​ { [native code]​ }​;​captureEvents:​function captureEvents()​ { [native code]​ }​;​releaseEvents:​function releaseEvents()​ { [native code]​ }​;​hasFocus:​function hasFocus()​ { [native code]​ }​;​createElement:​function createElement()​ { [native code]​ }​;​createDocumentFragment:​function createDocumentFragment()​ { [native code]​ }​;​createTextNode:​function createTextNode()​ { [native code]​ }​;​createComment:​function createComment()​ { [native code]​ }​;​createCDATASection:​function createCDATASection()​ { [native code]​ }​;​createProcessingInstruction:​function createProcessingInstruction()​ { [native code]​ }​;​createAttribute:​function createAttribute()​ { [native code]​ }​;​createEntityReference:​function createEntityReference()​ { [native code]​ }​;​getElementsByTagName:​function getElementsByTagName()​ { [native code]​ }​;​createElementNS:​function createElementNS()​ { [native code]​ }​;​createAttributeNS:​function createAttributeNS()​ { [native code]​ }​;​getElementsByTagNameNS:​function getElementsByTagNameNS()​ { [native code]​ }​;​getElementById:​function getElementById()​ { [native code]​ }​;​createEvent:​function createEvent()​ { [native code]​ }​;​createRange:​function createRange()​ { [native code]​ }​;​evaluate:​function evaluate()​ { [native code]​ }​;​execCommand:​function execCommand()​ { [native code]​ }​;​queryCommandEnabled:​function queryCommandEnabled()​ { [native code]​ }​;​queryCommandIndeterm:​function queryCommandIndeterm()​ { [native code]​ }​;​queryCommandState:​function queryCommandState()​ { [native code]​ }​;​queryCommandSupported:​function queryCommandSupported()​ { [native code]​ }​;​queryCommandValue:​function queryCommandValue()​ { [native code]​ }​;​getElementsByName:​function getElementsByName()​ { [native code]​ }​;​elementFromPoint:​function elementFromPoint()​ { [native code]​ }​;​caretRangeFromPoint:​function caretRangeFromPoint()​ { [native code]​ }​;​getSelection:​function getSelection()​ { [native code]​ }​;​getCSSCanvasContext:​function getCSSCanvasContext()​ { [native code]​ }​;​getElementsByClassName:​function getElementsByClassName()​ { [native code]​ }​;​querySelector:​function querySelector()​ { [native code]​ }​;​querySelectorAll:​function querySelectorAll()​ { [native code]​ }​;​importNode:​function importNode()​ { [native code]​ }​;​adoptNode:​function adoptNode()​ { [native code]​ }​;​createNodeIterator:​function createNodeIterator()​ { [native code]​ }​;​createTreeWalker:​function createTreeWalker()​ { [native code]​ }​;​getOverrideStyle:​function getOverrideStyle()​ { [native code]​ }​;​createExpression:​function createExpression()​ { [native code]​ }​;​createNSResolver:​function createNSResolver()​ { [native code]​ }​;​webkitCancelFullScreen:​function webkitCancelFullScreen()​ { [native code]​ }​;​insertBefore:​function insertBefore()​ { [native code]​ }​;​replaceChild:​function replaceChild()​ { [native code]​ }​;​removeChild:​function removeChild()​ { [native code]​ }​;​appendChild:​function appendChild()​ { [native code]​ }​;​hasChildNodes:​function hasChildNodes()​ { [native code]​ }​;​cloneNode:​function cloneNode()​ { [native code]​ }​;​normalize:​function normalize()​ { [native code]​ }​;​isSupported:​function isSupported()​ { [native code]​ }​;​hasAttributes:​function hasAttributes()​ { [native code]​ }​;​lookupPrefix:​function lookupPrefix()​ { [native code]​ }​;​isDefaultNamespace:​function isDefaultNamespace()​ { [native code]​ }​;​lookupNamespaceURI:​function lookupNamespaceURI()​ { [native code]​ }​;​addEventListener:​function addEventListener()​ { [native code]​ }​;​removeEventListener:​function removeEventListener()​ { [native code]​ }​;​isSameNode:​function isSameNode()​ { [native code]​ }​;​isEqualNode:​function isEqualNode()​ { [native code]​ }​;​compareDocumentPosition:​function compareDocumentPosition()​ { [native code]​ }​;​contains:​function contains()​ { [native code]​ }​;​dispatchEvent:​function dispatchEvent()​ { [native code]​ }​;​ELEMENT_NODE:​1;​ATTRIBUTE_NODE:​2;​TEXT_NODE:​3;​CDATA_SECTION_NODE:​4;​ENTITY_REFERENCE_NODE:​5;​ENTITY_NODE:​6;​PROCESSING_INSTRUCTION_NODE:​7;​COMMENT_NODE:​8;​DOCUMENT_NODE:​9;​DOCUMENT_TYPE_NODE:​10;​DOCUMENT_FRAGMENT_NODE:​11;​NOTATION_NODE:​12;​DOCUMENT_POSITION_DISCONNECTED:​1;​DOCUMENT_POSITION_PRECEDING:​2;​DOCUMENT_POSITION_FOLLOWING:​4;​DOCUMENT_POSITION_CONTAINS:​8;​DOCUMENT_POSITION_CONTAINED_BY:​16;​DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC:​32;​" spellcheck=​"true" draggable=​"false" todataurl=​"function toDataURL()​ { [native code]​ }​" getcontext=​"function getContext()​ { [native code]​ }​" insertadjacenttext=​"function insertAdjacentText()​ { [native code]​ }​" insertadjacentelement=​"function insertAdjacentElement()​ { [native code]​ }​" getattribute=​"function getAttribute()​ { [native code]​ }​" setattribute=​"function setAttribute()​ { [native code]​ }​" removeattribute=​"function removeAttribute()​ { [native code]​ }​" getattributenode=​"function getAttributeNode()​ { [native code]​ }​" getattributens=​"function getAttributeNS()​ { [native code]​ }​" setattributens=​"function setAttributeNS()​ { [native code]​ }​" removeattributens=​"function removeAttributeNS()​ { [native code]​ }​" getattributenodens=​"function getAttributeNodeNS()​ { [native code]​ }​" hasattribute=​"function hasAttribute()​ { [native code]​ }​" hasattributens=​"function hasAttributeNS()​ { [native code]​ }​" focus=​"function focus()​ { [native code]​ }​" blur=​"function blur()​ { [native code]​ }​" scrollintoview=​"function scrollIntoView()​ { [native code]​ }​" scrollintoviewifneeded=​"function scrollIntoViewIfNeeded()​ { [native code]​ }​" scrollbylines=​"function scrollByLines()​ { [native code]​ }​" scrollbypages=​"function scrollByPages()​ { [native code]​ }​" getelementsbyclassname=​"function getElementsByClassName()​ { [native code]​ }​" queryselector=​"function querySelector()​ { [native code]​ }​" queryselectorall=​"function querySelectorAll()​ { [native code]​ }​" webkitmatchesselector=​"function webkitMatchesSelector()​ { [native code]​ }​" getclientrects=​"function getClientRects()​ { [native code]​ }​" getboundingclientrect=​"function getBoundingClientRect()​ { [native code]​ }​" setattributenode=​"function setAttributeNode()​ { [native code]​ }​" removeattributenode=​"function removeAttributeNode()​ { [native code]​ }​" setattributenodens=​"function setAttributeNodeNS()​ { [native code]​ }​" webkitrequestfullscreen=​"function webkitRequestFullScreen()​ { [native code]​ }​" allow_keyboard_input=​"1" insertbefore=​"function insertBefore()​ { [native code]​ }​" replacechild=​"function replaceChild()​ { [native code]​ }​" removechild=​"function removeChild()​ { [native code]​ }​" appendchild=​"function appendChild()​ { [native code]​ }​" haschildnodes=​"function hasChildNodes()​ { [native code]​ }​" clonenode=​"function cloneNode()​ { [native code]​ }​" normalize=​"function normalize()​ { [native code]​ }​" issupported=​"function isSupported()​ { [native code]​ }​" hasattributes=​"function hasAttributes()​ { [native code]​ }​" lookupprefix=​"function lookupPrefix()​ { [native code]​ }​" isdefaultnamespace=​"function isDefaultNamespace()​ { [native code]​ }​" lookupnamespaceuri=​"function lookupNamespaceURI()​ { [native code]​ }​" addeventlistener=​"function addEventListener()​ { [native code]​ }​" removeeventlistener=​"function removeEventListener()​ { [native code]​ }​" issamenode=​"function isSameNode()​ { [native code]​ }​" isequalnode=​"function isEqualNode()​ { [native code]​ }​" comparedocumentposition=​"function compareDocumentPosition()​ { [native code]​ }​" contains=​"function contains()​ { [native code]​ }​" dispatchevent=​"function dispatchEvent()​ { [native code]​ }​" element_node=​"1" attribute_node=​"2" text_node=​"3" cdata_section_node=​"4" entity_reference_node=​"5" entity_node=​"6" processing_instruction_node=​"7" comment_node=​"8" document_node=​"9" document_type_node=​"10" document_fragment_node=​"11" notation_node=​"12" document_position_disconnected=​"1" document_position_preceding=​"2" document_position_following=​"4" document_position_contains=​"8" document_position_contained_by=​"16" document_position_implementation_specific=​"32">​

Anybody understood what's going on here? How to fix it?

Thanks for any help...

droessner
26 Jan 2012, 2:05 PM
Try moving the callParent call to the bottom of the function after you set this.html.