Question

基本问题是我无法让我的示例在Object literal中工作 - 我在控制台中没有出现任何错误，所以我不确定为什么它不想运行。

我知道如果我只使用一些普通函数而不是Object Literal表示法，代码可以正常工作，那么我可能在某处弄乱了范围，还是应该使用Object Constructors？

我环顾四周，看不到任何与在Object Literal中使用WebGl有关的问题，所以假设我有一些狡猾的编码。

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

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

Answer 1

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

this.container = $("#container")[0];

而不是

this.container = $("#container");

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

如果你回到我的jsfiddle示例并只是添加[0]，你会看到一切正常（除了纹理）。

我认为这篇文章是一个最好的例子，说明这么简单的事情可以让你长时间忍受......叹息！

WebGl对象文字不起作用

1 个答案: