创建 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）。

改变你的方法，让三个使用你的同类节点，事情应该会更好。