2

我正在尝试在 javascript 中创建一个对象以包含一个 3dObject 以及与之相关的所有内容：顶点位置、法线、纹理坐标等 + 处理它所需的方法：加载对象、绘图等。

问题是，当我尝试解析 WebGL 上下文对象时，在我的情况下 gl，它被声明为全局，以便使用特定方法，如 createBuffer()、bindBuffer()，javascript 给我以下错误：“未捕获的 TypeError：无法调用未定义的方法‘createBuffer’”

这是目标代码：

function object3D(gl){

this.vertexPositionBuffer = gl.createBuffer();

this.textureCoordBuffer = gl.createBuffer();

this.normalDirectionBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();

this.loadVertices = function (vertices, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    this.vertexPositionBuffer.numItems = numItems;
    this.vertexPositionBuffer.itemSize = itemSize;
}

this.loadNormals = function (normals, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.normalDirectionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
    this.normalDirectionBuffer.numItems = numItems;
    this.normalDirectionBuffer.itemSize = itemSize;
}

this.loadIndex = function (indexArray, itemSize, numItems){
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array, gl.STATIC_DRAW);
    this.indexBuffer.numItems = numItems;
    this.indexBuffer.itemSize = itemSize;
}

this.loadTexture = function (textureCoord, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoord),    gl.STATIC_DRAW);
    this.textureCoordBuffer.numItems = numItems;
    this.textureCoordBuffer.itemSize = itemSize;
}

}

这就是我尝试创建此对象的实例的方式：

var cube1 = new object3D(gl);

WebGL 上下文分配：

var gl;
function initGL(canvas){
try{
    gl = canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
}catch(e){
}
if(!gl){
    alert("Could not initialise WebGL");
}
}

在任何函数之外和我的对象定义内部，console.log(gl) 说是未定义的，但在其他地方它工作得很好，尽管它被声明为全局的。

我不得不提到我在 c++ 方面有扎实的背景，但我对 javascript 和处理其中的对象还很陌生。

4

0 回答 0