Question

我在three.js框架中尝试enyo的简单旋转立方体样本。我收到错误了 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。如果我将WebGLRenderer替换为CanvasRenderer，则可以正常使用。

Answer 1

我相信您遇到的问题是，在Enyo创建DOM节点之前，您正在向DOM添加DOM节点。当Enyo创建其节点时，它会消除由三个创建的节点。在大多数情况下，你应该将DOM操作留给Enyo。

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

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

创建WebGL上下文enyo时出错

1 个答案: