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.