javascript - 我的立方体消失了，我不知道为什么-6ren

javascript - 我的立方体消失了，我不知道为什么

转载作者：行者123 更新时间：2023-12-02 16:13:02

我正在尝试创建一个由两个立方体组成的程序，一个带有颜色，另一个带有彩色纹理。这些立方体根据键盘输入移动和旋转，如下所示:

u - 上、d - 下、l - 左、r - 右、i - 内、o - 出、g - 增长、s - 收缩

x/y/z - 沿立方体的 x/y/z 轴旋转

shift + x/y/z - 与上面相同，但方向相反，按钮在立方体之间切换。

这是 HTML 文件:

<html>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;

uniform vec3 theta;
uniform vec4 posiz;

void main()
{
    // Compute the sines and cosines of theta for each of the three axes in one computation.
    vec3 angles = radians( theta );
    vec3 c = cos( angles );
    vec3 s = sin( angles );

    // Remember: these matrices are column-major
    mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
                    0.0,  c.x,  s.x, 0.0,
                    0.0, -s.x,  c.x, 0.0,
                    0.0,  0.0,  0.0, 1.0 );

    mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
                    0.0, 1.0,  0.0, 0.0,
                    s.y, 0.0,  c.y, 0.0,
                    0.0, 0.0,  0.0, 1.0 );


    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
                    s.z,  c.z, 0.0, 0.0,
                    0.0,  0.0, 1.0, 0.0,
                    0.0,  0.0, 0.0, 1.0 );

    // position matrix
    mat4 posMat = mat4( 1.0,  0.0,  0.0,  0.0,
                        0.0,  1.0,  0.0,  0.0,
                        0.0,  0.0,  1.0,  0.0,
                        posiz[0], posiz[1], posiz[2],  1.0 );

    // size matrix
    mat4 sizMat = mat4( posiz[3],  0.0,  0.0,  0.0,
                        0.0,  posiz[3],  0.0,  0.0,
                        0.0,  0.0,  posiz[3],  0.0,
                        0.0,  0.0,  0.0,  1.0 );

    fColor = vColor;
    gl_Position = sizMat * posMat * rz * ry * rx * vPosition;
} 
</script>

<script id="vertex-shader-texture" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute  vec4 vColor;
attribute  vec2 vTexCoord;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform vec3 theta;

void main() 
{
    // Compute the sines and cosines of theta for each of
    //   the three axes in one computation.
    vec3 angles = radians( theta );
    vec3 c = cos( angles );
    vec3 s = sin( angles );

    // Remeber: thse matrices are column-major
    mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
            0.0,  c.x,  s.x, 0.0,
            0.0, -s.x,  c.x, 0.0,
            0.0,  0.0,  0.0, 1.0 );

    mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
            0.0, 1.0,  0.0, 0.0,
            s.y, 0.0,  c.y, 0.0,
            0.0, 0.0,  0.0, 1.0 );

    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
            s.z,  c.z, 0.0, 0.0,
            0.0,  0.0, 1.0, 0.0,
            0.0,  0.0, 0.0, 1.0 );

    fColor = vColor;
    fTexCoord = vTexCoord;
    gl_Position = rz * ry * rx * vPosition;
} 
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
</script>

<script id="fragment-shader-texture" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform sampler2D texture;

void
main()
{
    gl_FragColor = fColor * texture2D( texture, fTexCoord );
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="myCubes.js"></script>

<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>

<input type = "button" value = "First" id = "switchButton" ></input>

<img id = "texImage" src = "diagram.png" hidden></img>
</body>
</html>

文件 webgl-utils.js、initShaders.js 和 MV.js 可以在这里找到:

http://www.cs.unm.edu/~angel/WebGL/7E/Common/

这是随附的 javascript 文件:

var canvas;
var gl;

var numVertices  = 36;

var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];

var texture; // second cube texture

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var axis1 = 0;
var axis2 = 0;

var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;

var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];

// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];

// used to send info back to html, I think
var thetaLoc;
var posLoc;

var firstCube = true;

// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;

    var vertices = [
        vec3( -0.5, -0.5,  0.5 ),
        vec3( -0.5,  0.5,  0.5 ),
        vec3(  0.5,  0.5,  0.5 ),
        vec3(  0.5, -0.5,  0.5 ),
        vec3( -0.5, -0.5, -0.5 ),
        vec3( -0.5,  0.5, -0.5 ),
        vec3(  0.5,  0.5, -0.5 ),
        vec3(  0.5, -0.5, -0.5 )
    ];

    var vertexColors = [
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
        vec4( 0.0, 0.0, 1.0, 1.0 ),  // blue
        vec4( 1.0, 0.0, 1.0, 1.0 ),  // magenta
        vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
        vec4( 0.0, 1.0, 1.0, 1.0 )   // cyan
    ];

// indices of the 12 triangles that comprise the cube
var indices = [
    1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
    3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
    4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];

// texture coordinates
var texCoord = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

function configureTexture( image )
{
    texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );

    gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}

function quad(a, b, c, d)
{
     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]); 
     texCoordsArray.push(texCoord[0]);

     pointsArray.push(vertices[b]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[1]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[0]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[d]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[3]);   
}

function colorCube()
{
    quad( 1, 0, 3, 2 );
    quad( 2, 3, 7, 6 );
    quad( 3, 0, 4, 7 );
    quad( 6, 5, 1, 2 );
    quad( 4, 5, 6, 7 );
    quad( 5, 4, 0, 1 );
}

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //event listeners for buttons
    document.getElementById( "switchButton" ).onclick = function ()
    {
        firstCube = !firstCube; // switch between cubes

        if (firstCube) document.getElementById("switchButton").value = "First";
        else document.getElementById("switchButton").value = "Second";
    };

    window.onkeydown = function(event)
    {
        var key = String.fromCharCode(event.keyCode);

        if (firstCube)
        {
            if (key == 'R') posiz1[0] += .1;
            else if (key == 'L') posiz1[0] -= .1;
            else if (key == 'U') posiz1[1] += .1;
            else if (key == 'D') posiz1[1] -= .1;
            else if (key == 'I') posiz1[2] += .1;
            else if (key == 'O') posiz1[2] -= .1;
            else if (key == 'G') posiz1[3] += .1;
            else if (key == 'S') posiz1[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot1 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot1 = 1.0;

            if (key == 'X') axis1 = xAxis;
            if (key == 'Y') axis1 = yAxis;
            if (key == 'Z') axis1 = zAxis;
        }
        else
        {
            if (key == 'R') posiz2[0] += .1;
            else if (key == 'L') posiz2[0] -= .1;
            else if (key == 'U') posiz2[1] += .1;
            else if (key == 'D') posiz2[1] -= .1;
            else if (key == 'I') posiz2[2] += .1;
            else if (key == 'O') posiz2[2] -= .1;
            else if (key == 'G') posiz2[3] += .1;
            else if (key == 'S') posiz2[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot2 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot2 = 1.0;

            if (key == 'X') axis2 = xAxis;
            if (key == 'Y') axis2 = yAxis;
            if (key == 'Z') axis2 = zAxis;
        }
    };

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //  Load shaders and initialize attribute buffers
    program = initShaders( gl, "vertex-shader", "fragment-shader" );
    programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );

    gl.useProgram( program );
    colorCube();

    // array element buffer    
    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

    // color array attribute buffer
    cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

    vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );

    // vertex array attribute buffer
    vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    // get started on textured cube
    gl.useProgram( programTexture);

    cBufferTexture = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBufferTexture );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );

    vColorTexture = gl.getAttribLocation( programTexture, "vColor" );
    gl.vertexAttribPointer( vColorTexture, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColorTexture );

    vBufferTexture = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

    vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
    gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPositionTexture );

    tBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW );

    vTexCoord = gl.getAttribLocation( programTexture, "vTexCoord" );
    gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vTexCoord );

    image = document.getElementById("texImage");

    configureTexture( image );

    render();
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(program);

    // connect location to variable in html
    thetaLoc = gl.getUniformLocation(program, "theta");
    posizLoc = gl.getUniformLocation(program, "posiz");

    // handle rendering of first cube
    theta1[axis1] += rot1;

    gl.uniform3fv(thetaLoc, theta1);
    gl.uniform4fv(posizLoc, posiz1);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    // handle rendering of second textured cube
    gl.useProgram(programTexture);

    thetaLoc = gl.getUniformLocation(programTexture, "theta");
    posizLoc = gl.getUniformLocation(programTexture, "posiz");

    theta2[axis2] += rot2;

    gl.uniform3fv(thetaLoc, flatten(theta2));
    gl.uniform4fv(posizLoc, posiz2);

    gl.drawArrays( gl.TRIANGLES, 0, numVertices );

//    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    requestAnimFrame( render );
}

由于某种原因，没有出现任何立方体。对代码进行了一些修改，我发现 javascript 代码因以下更改而中断

// get started on textured cube

注释行。以下 JavaScript 代码与上面的 JavaScript 代码相同，只是“开始使用纹理立方体”注释行下方的代码:

var canvas;
var gl;

var numVertices  = 36;

var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];

var texture; // second cube texture

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var axis1 = 0;
var axis2 = 0;

var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;

var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];

// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];

// used to send info back to html, I think
var thetaLoc;
var posLoc;

var firstCube = true;

// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;

    var vertices = [
        vec3( -0.5, -0.5,  0.5 ),
        vec3( -0.5,  0.5,  0.5 ),
        vec3(  0.5,  0.5,  0.5 ),
        vec3(  0.5, -0.5,  0.5 ),
        vec3( -0.5, -0.5, -0.5 ),
        vec3( -0.5,  0.5, -0.5 ),
        vec3(  0.5,  0.5, -0.5 ),
        vec3(  0.5, -0.5, -0.5 )
    ];

    var vertexColors = [
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
        vec4( 0.0, 0.0, 1.0, 1.0 ),  // blue
        vec4( 1.0, 0.0, 1.0, 1.0 ),  // magenta
        vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
        vec4( 0.0, 1.0, 1.0, 1.0 )   // cyan
    ];

// indices of the 12 triangles that comprise the cube
var indices = [
    1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
    3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
    4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];

// texture coordinates
var texCoord = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

function configureTexture( image )
{
    texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );

    gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}

function quad(a, b, c, d)
{
     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]); 
     texCoordsArray.push(texCoord[0]);

     pointsArray.push(vertices[b]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[1]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[0]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[d]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[3]);   
}

function colorCube()
{
    quad( 1, 0, 3, 2 );
    quad( 2, 3, 7, 6 );
    quad( 3, 0, 4, 7 );
    quad( 6, 5, 1, 2 );
    quad( 4, 5, 6, 7 );
    quad( 5, 4, 0, 1 );
}

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //event listeners for buttons
    document.getElementById( "switchButton" ).onclick = function ()
    {
        firstCube = !firstCube; // switch between cubes

        if (firstCube) document.getElementById("switchButton").value = "First";
        else document.getElementById("switchButton").value = "Second";
    };

    window.onkeydown = function(event)
    {
        var key = String.fromCharCode(event.keyCode);

        if (firstCube)
        {
            if (key == 'R') posiz1[0] += .1;
            else if (key == 'L') posiz1[0] -= .1;
            else if (key == 'U') posiz1[1] += .1;
            else if (key == 'D') posiz1[1] -= .1;
            else if (key == 'I') posiz1[2] += .1;
            else if (key == 'O') posiz1[2] -= .1;
            else if (key == 'G') posiz1[3] += .1;
            else if (key == 'S') posiz1[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot1 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot1 = 1.0;

            if (key == 'X') axis1 = xAxis;
            if (key == 'Y') axis1 = yAxis;
            if (key == 'Z') axis1 = zAxis;
        }
        else
        {
            if (key == 'R') posiz2[0] += .1;
            else if (key == 'L') posiz2[0] -= .1;
            else if (key == 'U') posiz2[1] += .1;
            else if (key == 'D') posiz2[1] -= .1;
            else if (key == 'I') posiz2[2] += .1;
            else if (key == 'O') posiz2[2] -= .1;
            else if (key == 'G') posiz2[3] += .1;
            else if (key == 'S') posiz2[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot2 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot2 = 1.0;

            if (key == 'X') axis2 = xAxis;
            if (key == 'Y') axis2 = yAxis;
            if (key == 'Z') axis2 = zAxis;
        }
    };

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //  Load shaders and initialize attribute buffers
    program = initShaders( gl, "vertex-shader", "fragment-shader" );
    programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );

    gl.useProgram( program );
    colorCube();

    // array element buffer    
    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

    // color array attribute buffer
    cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

    vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );

    // vertex array attribute buffer
    vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    // get started on textured cube



    render();
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // connect location to variable in html
    thetaLoc = gl.getUniformLocation(program, "theta");
    posizLoc = gl.getUniformLocation(program, "posiz");

    // handle rendering of first cube
    theta1[axis1] += rot1;

    gl.uniform3fv(thetaLoc, theta1);
    gl.uniform4fv(posizLoc, posiz1);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    // handle rendering of second cube
    theta2[axis2] += rot2;

    gl.uniform3fv(thetaLoc, theta2);
    gl.uniform4fv(posizLoc, posiz2);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    requestAnimFrame( render );
}

这个 JavaScript 文件在渲染两个彩色立方体时工作正常，但我不知道如何在第二个立方体上渲染纹理。

我的修改基于文件texturedCube1.js和texturedCube1.html，可以在此处检索:http://www.cs.unm.edu/~angel/WebGL/7E/07/ .

我是一个新手，你可能可以从我的代码中看出这一点，而且我并不总是确定幕后发生了什么。我将继续修改 JavaScript 代码，但如果有人至少可以帮助阐明为什么我的立方体消失或如何同时获得彩色立方体和纹理立方体，那将非常有帮助。

非常感谢您提前提供的帮助和时间!

最佳答案

我没有尝试运行您的代码，但看起来您在这里遇到了问题:

vBufferTexture = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
// here:
gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPositionTexture );

pointsArray 是一个 vec3 数组，但您传递 4 作为组件数量。尝试:

gl.vertexAttribPointer( vPositionTexture, 3, gl.FLOAT, false, 0, 0 );

关于javascript - 我的立方体消失了，我不知道为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29956074/

文章推荐： python - Pandas，如何为所有以数字开头的列名附加前缀？

文章推荐： javascript - 获取字符串某部分的值

文章推荐： python - 如何生成带有 ids 偏移量的 charuco 板

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我的立方体消失了，我不知道为什么