Question

请原谅SEO友好的标题，但我想尽可能地解决我目前正在解决的问题。对于那些希望自定义dat.gui外观的人，您需要下载源代码并使用require.js将其包含在此处：https://code.google.com/p/dat-gui/。

现在我的问题。我正在开发一个项目，需要构建一个与Javascript实时集成的UI（我使用的是三个.js），我决定修改dat.gui来创建这个ui;以期很快将它与backbone.js整合为一组视图。

我希望切换到使用dat.gui源文件来修改样式

首先，我使用上面链接中的说明从连接的dat.gui.min.js切换到源。我将整个源放在我的库文件夹中的自己的文件夹中，并将main.js文件放在require.js错误...需要在“src”文件夹中。我这样做是因为链接了dat.gui的“GUI.js”中的依赖项。

所有内容似乎都正确连接，并且我使用与之前创建的dat.guis基本相同的代码，但我不断得到未定义的错误，具体取决于我在原始代码中如何更改gui变量或在main.js.我对require.js的理解是非常有限的，我觉得它是如何工作不可或缺的（而且对于知道如何的人来说，这是一个非常简单的问题）

这是位于/ libraries / dat-gui / src的 main.js 文件（这个目录还包括text.js）

//This is main.js for using require.js
require([
  'dat/gui/GUI'
], function(GUI) {

  // No namespace necessary 
  var gui = new GUI();

});

这是我原来的dat.gui定义代码的骨骼：

    ////////////////////////////////////////////////DatGui/////////////////////////////////////////////////////
        var stageConfigData = function() {
            this.scaleX = params.stageWidth;
            this.scaleZ = params.stageDepth;
            this.spinTheCamera = false;

            this.lightIntensity = 1;
            this.lightDistance = 0;
            this.lightFrontColour = "#ffb752";
            this.lightRearColour = "#3535fa";

            this.lockCameraToScene = true;

            this.tooltype = 3;
            this.objectSelect = 'Man';

            this.saveJSON = function(){
                saveJSON();
            };

        };

        var stageConfig = new stageConfigData( );

        var moveConfig = new moveConfigData( );

///I think the problem is linked to defining this variable:
        //var gui = new dat.GUI();//works for the minified version 
        var gui = new dat.GUI();//for non-concatenated

        var fstage = gui.addFolder('Stage');
        var fcamera = gui.addFolder('Camera');
        var ffhouselts = gui.addFolder('Front of House Lights');
        var fRearlts = gui.addFolder('Rear Lights');
        var sandl = gui.addFolder('Saving and Loading');

        fstage.add( stageConfig, 'scaleX', 1, 100, 5).name('Width of stage').onChange( function(){
            stage.scale.x = ( stageConfig.scaleX );
        });

        fstage.add( stageConfig, 'scaleZ', 1, 100, 5).name('Depth of stage').onChange( function(){
            stage.scale.z = ( stageConfig.scaleZ );
        });
... //there's more but i think it's irrelevant

我得到的错误是：

Uncaught ReferenceError: dat is not defined

或

Uncaught ReferenceError: GUI is not defined

取决于我如何弄乱这些变量以及//无需命名空间下的main.js中的位。我不明白命名空间是如何工作的，因为我对整个javascript都是新手。

有没有人有任何想法？再说一遍，我会说这可能是那些真正的笨蛋之一，但我真的很感激你的帮助。

非常感谢！

Answer 1

使用require.js方法时，不会有全局对象。但你可以自己创建

require([
  'dat/gui/GUI'
], function(GUI) {
  window.dat = {
    GUI: GUI
  };
});

带有require.js的非连接dat.gui源。自定义或模板化dat.gui

1 个答案: