Возникла проблема с загрузкой моей HTML-страницы. - PullRequest
Новая
       40

Возникла проблема с загрузкой моей HTML-страницы.

0 голосов
/ 08 ноября 2018

Я пытаюсь сделать холст, отображающий трехмерное пространство с нормалями и источником света. Также будет реализован ползунок, чтобы иметь возможность изменять x и y источника света. Когда я запускаю HTML-файл в Chrome, все, что я получаю, это пустой холст. То, что я должен получить, - это холст, показывающий ряды нормалей блоков со сферами сверху. Я предполагаю ошибку, скорее всего, в этой реализации нормалей. Код, который я включил, состоит из кода, включающего нормали в моем файле .js. 

    get normals(){
        return[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0], ];
    }

window.addEventListener("load", function init()
{   
    let canvas = document.getElementById( "gl-canvas" );

    let gl = WebGLUtils.setupWebGL(canvas);
    if ( !gl ) { alert( "WebGL isn't available" ); }
    gl.enable(gl.DEPTH_TEST);
    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor(...X11.AliceBlue);


    let program = initShaders( gl, vertex_shader, fragment_shader);
    gl.useProgram( program );


    let vertices = [];
    let normals = [];

    const extent = 3;
    const minX = -extent;
    const maxX = extent;
    const minZ = -extent;
    const maxZ = extent;

    let ground = new Ground(minX, maxX, minZ, maxZ);
    vertices = vertices.concat(ground.points);
    colors = colors.concat(ground.color_scheme);
    normals = normals.concat(ground.normals);

    const pillarRows = 5;
    const pillarColumns = 6;
    const pillarRadius = .05;
    const pillarHeight = .5;
    const pillarSchemeColors = [X11.LightSkyBlue1, X11.LightSkyBlue2];


    const pMaxX = maxX - pillarRadius;
    const pMinX = minX + pillarRadius;
    const pMaxZ = maxZ - pillarRadius;
    const pMinZ = minZ + pillarRadius;

    const xDelta = (pMaxX - pMinX) / (pillarColumns - 1);
    const zDelta = (pMaxZ - pMinZ) / (pillarRows - 1);

    for(let r = 0; r < pillarRows; r++ ) {
        for(let c = 0; c < pillarColumns; c++) {

            const baseX = pMinX + c * xDelta;
            const baseY = 0;
            const baseZ = pMinZ + r * zDelta;

            let box = new cs4722_objects.Block();
            box.width = Math.sqrt(2) * pillarRadius;
            box.depth = box.width;
            box.center = [baseX, baseY + pillarHeight/2, baseZ];
            box.height = pillarHeight;

            vertices = vertices.concat(box.points);
            normals = normals.concat(box.normals);

            //creates the box normals and their parameters
            let sph = new cs4722_objects.Sphere();
            sph.radius = .1;
            sph.center = [baseX, (baseY + pillarHeight) + .1, baseZ];
            vertices = vertices.concat(sph.points);
            normals = normals.concat(sph.normals);

            //light effects
            let objAmbient = X11.Yellow;
            let objDiffuse = vec4(1.0, 0.8, 0.0, 1.0);
            let objSpecular = X11.DarkMagenta;
            let objShininess = 120;

            //position of light
            let lightPosition = [1,1,3,1];
            let lightAmbient = [1,1,1,1];
            let lightDiffuse = [1,1,1,1];
            let lightSpecular = [1,1,1,1];

            //combines the objects effects with the lights position
            let ambientProduct = mult(objAmbient, lightAmbient);
            let diffuseProduct = mult(objDiffuse, lightDiffuse);
            let specularProduct = mult(objSpecular, lightSpecular);
            let shininess = objShininess
        }

        document.getElementById("Y-axis").value = 50;

        listenerSetup();
...