Error creating WebGL context enyo

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.

Pre101 · Answer 1 · 2015-10-22T08:10:39.477

0

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.

edited Oct 22 '15 at 08:10

answered Oct 15 '15 at 16:01

Pre101

2,370
16
23

I think I can also use method `rendered` ? – arya Oct 20 '15 at 10:16
I meant to use `rendered()`. – Pre101 Oct 22 '15 at 08:10
You'll need to update your sample code. I'm fairly sure the problem has to do with supplying the DOM node for three to render into. It could also have something to do with supplying the correct dimensions for the node. I suggest adding a fiddle. – Pre101 Oct 24 '15 at 14:28

Error creating WebGL context enyo

1 Answers1