Error creating WebGL context enyo - three.js

Question

I am trying simple spinning cube sample of three.js in enyo framework.
I am getting error as
THREE.WebGLRenderer:Error creating WebGL context.
Here is my code:
enyo.kind({
name:"Cubetest",
create:function () {
// body...
this.inherited(arguments);
this.drawCube();
//alert("in create");
},
rendered : function(){
this.inherited(arguments);
//this.drawCube();
},
drawCube : function(){
var scene = new THREE.Scene();
console.log(scene);
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
console.log(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
console.log(cube);
console.log(scene);
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
}
});
What may be problem here?
It supports CanvasRenderer.
If I replace WebGLRenderer by CanvasRenderer,it works fine.

Answer 1

I believe the problem you are running into is that you are appending a DOM node to the body before Enyo has created its DOM nodes. When Enyo creates its nodes, it wipes out the one created by three. You should leave DOM manipulation to Enyo, for the most part.
In Enyo, you do not have a DOM node until after rendered() is called. You should only create the three DOM node within the node created for your kind. You can get the DOM node from Enyo by calling this.hasNode(), which will return the DOM node (or null if rendered() has not been called yet).
Change your method to have three use your kind's node and things should work better.