Javascript 使用原始webgl解析json

我将学习关于webgl的本教程

我被困在第7课，在那里，使用xhr，你必须加载一个网格。我对他的思维方式非常着迷，因为他只使用需要的东西来获得最终结果。 我不能复制他的代码，当然我正在运行一个带有python-mhttp.server的本地Web服务器，甚至复制和粘贴来自实时示例的源代码。

Firefox和Chrome给出了这个错误

> http://localhost:8000/webgl-utils.js(10): Uncaught ERROR: 0:?": syntax
> error

但代码是一样的。给你。web-utils.js

 window.onerror = function(msg, url, lineno) {
    alert(url + '(' + lineno + '): ' + msg);
 }

 function createShader(str, type) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, str);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw gl.getShaderInfoLog(shader);
            }
            return shader;
        }

 function createProgram(vstr, fstr) {
            var program = gl.createProgram();
            var vshader = createShader(vstr, gl.VERTEX_SHADER);
            var fshader = createShader(fstr, gl.FRAGMENT_SHADER);
            gl.attachShader(program, vshader);
            gl.attachShader(program, fshader);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program,gl.LINK_STATUS)) {
                throw gl.getProgramInfoLog(program);
            }
            return program;
 }


function screenQuad() {
    var vertexPosBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexPosBuffer);
    var vertices = [-1, -1, 1, -1, -1, 1, 1, 1];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    vertexPosBuffer.itemSize = 2;
    vertexPosBuffer.numItems = 4;
    return vertexPosBuffer;
}

function linkProgram(program) {
    var vshader = createShader(program.vshaderSource, gl.VERTEX_SHADER);
    var fshader = createShader(program.fshaderSource, gl.FRAGMENT_SHADER);
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                throw gl.getProgramInfoLog(program);
    }
}

function loadFile(file, callback, noCache, isJson) {
    var request = new XMLHttpRequest ();
    request.onreadystatechange = function() {
        if (request.readyState == 1) {
            if (isJson){
                request.overrideMimeType('application/json');
            }
            request.send();
        } else if (request.readyState == 4) {
            if (request.status == 200) {
                callback(request.responseText);
            } else if (request.status == 404) {
                throw 'File "' + file + '" does not exist.';
            } else {
                throw 'XHR error' + request.status + '.';
            }
        }
    };
    var url = file;
    if (noCache) {
        url += '?' + (new Date()).getTime();
    }
    request.open('GET', file, true);
}

function loadProgram(vs, fs, callback) {
    var program = gl.createProgram();
    function vshaderLoaded(str) {
        program.vshaderSource = str;
        if (program.fshaderSource) {
            linkProgram(program);
            callback(program);
        }
    }
    function fshaderLoaded(str) {
        program.fshaderSource = str;
        if (program.vshaderSource) {
                linkProgram(program);
                callback(program);
        }
    }
        loadFile(vs,vshaderLoaded,true);
        loadFile(fs,fshaderLoaded,true);
        return program;
}

---

其他文件有：main.html（我在其中设置画布）、加载网格的torus.json和解析json网格的mesh.js。

您是否有在torus模型中引用的着色器以及shaders/vshader-01.txt、shaders/fs-yellow.txt和shaders/fs-green.txt？如您所见，webgl-utils.js中的第10行抛出了错误，这是一个着色器编译错误。是的，该着色器在环面模型中被引用。可以吗？我已经从这里复制了代码，您是否也将着色器复制到了本地项目目录中？是的，在我的本地文件夹中有一个着色器子目录：fs-green.txt、fshader.txt、fs-yellow.txt、vshader.txt