0

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

我知道如果我只使用一些普通函数而不是 Object Literal 符号，代码就可以工作，所以也许我在某处搞砸了范围，或者我应该使用 Object Constructors？

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

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

http://jsfiddle.net/j6RMD/

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

1 回答 1

0

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

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

并不是

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

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

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

我认为这篇文章是一个最好的例子，说明如此简单的事情如何让你坚持这么长时间......叹息！

于 2013-05-07T00:09:03.417 回答