Javascript WebGl对象文字无效

基本问题是，我无法让我的示例在对象文字中工作，而且控制台中没有任何错误，因此我不确定为什么它不想运行

我知道如果我只使用一些普通函数，而不是对象文字符号，代码就可以工作，所以可能我在某个地方弄乱了范围，或者我应该使用对象构造函数吗

我环顾四周，没有发现任何与在对象文本中使用WebGl相关的问题，所以假设我有一些不可靠的编码

我已经提交了一个JSFIDLE供您检查-请忽略纹理的跨域问题

---

我所要做的就是将[0]添加到容器div的jQuery选择器的末尾，如下所示

this.container=$（“#container”）[0]

而不是

this.container=$（“#container”）

我没有意识到（愚蠢地）没有[0]我返回的是一个jQuery对象，而不是一个html dom元素。考虑到这里丰富的知识，我很惊讶在我之前没有人发现这一点

如果您回到我的JSFIDLE示例，只需添加[0]，您将看到一切正常（除了纹理）

我认为这篇文章是一个最好的例子，说明了这么简单的事情能让你坚持这么长时间……唉
 终于解决了-感谢没有堆垛溢出！！！！！！！
        var MyCube = {

            container : null,
            renderer  : null,
            scene     : null,
            camera    : null,
            cube      : null,
            animating : null,
            light     : null,
            mapUrl    : null,
            map       : null,
            material  : null,
            geometry  : null,
            animating : false,

            onLoad : function(){
                this.container = $("#container");

                this.renderer = new THREE.WebGLRenderer( { antialias: true } );

                this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
                $(this.container).append( this.renderer.domElement );

                this.scene = new THREE.Scene();

                this.camera = new THREE.PerspectiveCamera( 45,
                this.container.offsetWidth / this.container.offsetHeight, 1, 4000 );
                this.camera.position.set( 0, 0, 3 );

                this.light = new THREE.DirectionalLight( 0xffffff, 1.5);
                this.light.position.set(0, 0, 1);
                this.scene.add( this.light );

                this.mapUrl = "molumen_small_funny_angry_monster-999px.png";
                this.map    = THREE.ImageUtils.loadTexture(this.mapUrl);

                this.material = new THREE.MeshPhongMaterial({ map: this.map });

                this.geometry = new THREE.CubeGeometry(1, 1, 1);

                this.cube = new THREE.Mesh(this.geometry, this.material);

                this.cube.rotation.x = Math.PI / 5;
                this.cube.rotation.y = Math.PI / 5;

                this.scene.add( this.cube );

                this.myrun();
            },

            myrun : function(){
                MyCube.renderer.render(MyCube.scene,MyCube.camera);

                if(MyCube.animating)
                {
                    MyCube.cube.rotation.y -= 0.11;
                    MyCube.cube.rotation.x -= 0.10;
                }
                requestAnimationFrame(MyCube.myrun);
            }

        }

        MyCube.onLoad();

        $('#container').click(function(){
            MyCube.animating = !MyCube.animating;
            return false;
        });