创建WebGL上下文enyo时出错

Question

我试图在enyo框架中简单地旋转three.js的立方体样本。 我得到错误为 THREE.WebGLRenderer:Error creating WebGL context。

这里是我的代码：

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(); 

} 
}); 

什么在这里可以是问题吗？ 它支持CanvasRenderer。 如果我用CanvasRenderer代替WebGLRenderer，它工作正常。

Answer 1

我相信你遇到的问题是你在Enyo创建它的DOM节点之前将一个DOM节点附加到主体。当Enyo创建它的节点时，它会清除由三个节点创建的节点。大部分情况下，您应该将DOM操作留给Enyo。

在Enyo中，在调用rendered()之前，您没有DOM节点。您应该只在为您创建的节点内创建三个DOM节点。您可以通过调用this.hasNode()从Enyo获取DOM节点，该节点将返回DOM节点（如果尚未调用rendered()，则返回null）。

改变你的方法有三个使用你的种类的节点和事情应该更好地工作。