Javascript 一个requirejs模块的两个独立实例，gl

我正在为浏览器开发一个WebGL游戏。在进行WebGL编程时，能够将gl用作全局函数非常有用（因为您必须大量调用它的函数）。然而，我想同时在多个画布中运行这个游戏，这意味着我需要多个gl上下文：每个画布一个上下文

因为我使用的是requirejs，所以如果我将gl作为一个依赖项放在顶部，这对我来说已经足够好了：

define(['gl'], function(gl) {
  return function() {
    gl.drawArrays(...);
  };
});

但是，我需要它来返回第I个游戏的第I个上下文。它们不能共享上下文，每个画布必须有自己的上下文因此每个画布都必须有一个单独的requirejs模块gl。这可能吗？

作为参考，gl.js类似于：

define(function() {
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext("experimental-webgl");
  gl.viewportWidth = canvas.width;
  gl.viewportHeight = canvas.height;
  return gl;
});

---

我想你想错了

RequireRejs无法解决您的问题。它的唯一目标是，如果以前没有运行所需的脚本，则阻止脚本运行

要解决pb问题，您必须熟悉Javascript中的面向对象编程

您需要定义对象类GL，然后实例化x次：

在gl.js中：

var GL = (function(){      
    // the constructor
    function GLClass(container, some, other, arguments){
        this.$container = document.getElementById(container);
        this.some = some; //...
        // ... other init instructions ...
    };

    // the different methods of this object ...
    GLClass.prototype.myFunc = function(str){
        // inside a method, this refers to the instance of the object.
        this.some = str;
    };
    GLClass.prototype.display = function(){
        this.$container.innerHTML = this.some;
    };

    // finally return the Constructor
    return GLClass;

})(); // don't forget the last parenthesis to execute immediately the previous code (aka declare and return the constructor in the GL var)

return GL; // needed to get the class name for requirejs.

在另一个文件中：

define(['gl'], function(GL) {
  // Then you can instance two separate objects :

  var myGl1 = new GL('gl1','some','other','arguments');
  var myGl2 = new GL('gl2','some','other','arguments');

  myGl1.myFunc('test1');
  myGl2.myFunc('test2');

  myGl1.display();
  myGl2.display();

});

我做了一个简单的例子

如你所见：

我只保存了一份gl.js

我创建了两个具有各自属性的独立对象

下面是一篇非常好的帖子，可以让你熟悉这一点：