43 WebGL绘制一个自动旋转的立方体盒子，点击获取点击位置颜色

最新推荐文章于 2022-09-30 12:03:56 发布
最新推荐文章于 2022-09-30 12:03:56 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： WebGL 文章标签： WebGL 动画 自动旋转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/73250007
版权

案例查看地址：点击这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        #canvas {
            margin: 0;
            display: block;
        }
    </style>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="webgl/webgl-utils.js"></script>
<script src="webgl/webgl-debug.js"></script>
<script src="webgl/cuon-utils.js"></script>
<script src="webgl/cuon-matrix.js"></script>
<script>
    //设置WebGL全屏显示
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    //顶点着色器
    var vertexShaderSource = "" +
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Color;\n" +
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform bool u_Clicked;\n" + //鼠标按下后的标示
        "varying vec4 v_Color;\n" +
        "void main (){\n" +
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   if(u_Clicked){\n" +
        "       v_Color = vec4(1.0,0.0,0.0,1.0);\n" +
        "   }else{\n" +
        "       v_Color = a_Color;\n" +
        "   }\n" +
        "}\n";

    //片元着色器
    var fragmentShaderSource = "" +
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "varying vec4 v_Color;\n" +
        "void main(){\n" +
        "   gl_FragColor = v_Color;\n" +
        "}\n";

    function main() {
        //获取WebGL对象
        var gl = getWebGLContext(canvas);

        //初始化着色器
        initShaders(gl, vertexShaderSource, fragmentShaderSource);

        //将数据存入缓冲区
        var n = initVertexBuffers(gl);
        if(n < 0){
            console.log("数据存入缓冲区失败");
            return;
        }

        //设置背景色和开启层级关系
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.enable(gl.DEPTH_TEST);

        //获取uniform变量的存储位置
        var u_MvpMatrix = gl.getUniformLocation(gl.program,"u_MvpMatrix");
        var u_Clicked = gl.getUniformLocation(gl.program,"u_Clicked");
        if(!u_Clicked || !u_MvpMatrix){
            console.log("无法获取相关的存储位置");
            return;
        }

        //赋值变量
        gl.uniform1i(u_Clicked, 0);

        //设置视点和投影矩阵
        var viewProjectionMatrix = new Matrix4();
        viewProjectionMatrix.setPerspective(30.0, canvas.width/canvas.height, 1.0, 100.0);
        viewProjectionMatrix.lookAt(0.0,0.0,7.0,0.0,0.0,0.0,0.0,1.0,0.0);

        //设置一个自动转圈的变量
        var currentAngle = 0.0;

        canvas.onmousedown = function (e) {
            var picked = false;
            //将u_Clicked变量设置为true，将立方体绘制成纯色
            gl.uniform1i(u_Clicked,1);
            draw(gl,n,currentAngle,viewProjectionMatrix,u_MvpMatrix);
            //通过readPixels来吸取点击位置的颜色
            var pixels = new Uint8Array(4); //存储获取的颜色的变量
            gl.readPixels(e.offsetX, window.innerHeight - e.offsetY,1,1,gl.RGBA,gl.UNSIGNED_BYTE,pixels);

            //判断颜色是否和当前的盒子的颜色一样
            if(pixels[0] == 255){
                picked = true;
            }
            if(picked){
                alert("你点中了盒子");
            }
            console.log(pixels,picked);
            gl.uniform1i(u_Clicked, 0);
            draw(gl,n,currentAngle,viewProjectionMatrix,u_MvpMatrix);
        };

        //定时绘制页面
        var tick = function () {
            currentAngle = animate(currentAngle);
            draw(gl,n,currentAngle,viewProjectionMatrix,u_MvpMatrix);
            requestAnimationFrame(tick);
        };

        tick();
    }

    //修改currentAngle的值
    var last = +new Date();
    var angleStep = 20.0;//每次旋转的速度
    function animate(currentAngle) {
        var now = +new Date();
        var elapsed = now - last;
        last = now;

        //这里是为了保证旋转保证匀速旋转
        var newAngle = currentAngle + (angleStep * elapsed) /1000;
        return newAngle %360;
    }

    //设置顶点数据和将数据存入缓冲区
    function initVertexBuffers(gl) {
        // Create a cube
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3
        var vertices = new Float32Array([   // Vertex coordinates 顶点的坐标数据
            1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,    // v0-v1-v2-v3 front
            1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,    // v0-v3-v4-v5 right
            1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up
            -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,    // v1-v6-v7-v2 left
            -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,    // v7-v4-v3-v2 down
            1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0     // v4-v7-v6-v5 back
        ]);

        var colors = new Float32Array([   // Colors 顶点的颜色数据
            0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, // v0-v1-v2-v3 front
            0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69,  // v0-v3-v4-v5 right
            0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61,  // v0-v5-v6-v1 up
            0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, // v1-v6-v7-v2 left
            0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, // v7-v4-v3-v2 down
            0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93 // v4-v7-v6-v5 back
        ]);

        // Indices of the vertices  绘制的索引
        var indices = new Uint8Array([
            0, 1, 2, 0, 2, 3,    // front
            4, 5, 6, 4, 6, 7,    // right
            8, 9, 10, 8, 10, 11,    // up
            12, 13, 14, 12, 14, 15,    // left
            16, 17, 18, 16, 18, 19,    // down
            20, 21, 22, 20, 22, 23     // back
        ]);

        //存入缓冲区
        if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, "a_Position")) {
            return -1;
        }
        if(!initArrayBuffer(gl, colors, gl.FLOAT, 3, "a_Color")){
            return -1;
        }

        //创建索引缓冲区
        var indexBuffer = gl.createBuffer();
        if(indexBuffer < 0){
            console.log("无法创建缓冲区");
            return -1;
        }

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);

        return indices.length;
    }

    function initArrayBuffer(gl, data, type, num, attribute) {
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log("无法创建缓冲区对象");
            return;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
        var a_attribute = gl.getAttribLocation(gl.program, attribute);
        if (a_attribute < 0) {
            console.log("无法获取变量的存储位置" + attribute);
            return false;
        }
        gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribute);

        return true;
    }

    //绘制
    var matrix = new Matrix4();
    function draw(gl,n,currentAngle,viewProjectionMatrix,u_MvpMatrix) {
        matrix.set(viewProjectionMatrix);
        matrix.rotate(currentAngle,1.0,0.0,0.0);
        matrix.rotate(currentAngle,0.0,1.0,0.0);
        matrix.rotate(currentAngle,0.0,0.0,1.0);
        gl.uniformMatrix4fv(u_MvpMatrix,false,matrix.elements);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
    }
</script>
</html>

在本案例中，注册了一个点击事件，获取点击位置的颜色的方法gl.readPixels()


指定上面的错误，找到错误了，上图说xy是针对于左上角，经过测试和观看代码发现，其实方法是针对的左下角，左下角，左下角！！！

暮志未晚season
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL实现一个长方体包围盒随鼠标旋转缩放
02-17
通过一个长方体包围盒随鼠标旋转缩放具体实例，涵盖了WebGL中设置模型变换、视图变换、投影变换的技巧
webgl——绘制一个旋转的彩色立方体（四）
jiegiser博客
03-06 958
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结 前言 前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何
用webgl绘制一个彩色旋转立方体
Bruce_wjh的博客
07-05 6232
用webgl绘制一个彩色旋转立方体今天给大家分享一个用webgl写的简单的三维场景：转动的交互式彩色立方体，其六个面的颜色都不一样。 上次绘制二维彩色矩形时讲到，二维是三维场景的特殊情况，所以由二维向三维拓展也并不难，webgl里面提供了画三角形的方法，立方体有6个面，一个面由两个三角形组成，共计需要12个三角形，每个三角形又有3个顶点，故绘制立方体需要36个点，而实际上立方体只有8个顶点，这8
OpenGL+WebGL——绘制立方体
大太阳
08-30 1493
编写C++程序main.cpp，在程序中定义立方体的八个顶点坐标vertex_list数组和顶点序号数组index_list，通过函数glVertex3fv来实现立方体的线条绘制 #include<GL/glut.h> // 绘制立方体 // 将立方体的八个顶点保存到一个数组里面 static const float vertex_list[][3] = { -0.5f,...
webgl着色器学习 - 矩形盒子两端渐变(矩形不同面特殊处理)
宏斌的博客
09-30 230
以正负几何体高度的一半为条件 修改传递到片元着色器中的变量 产生不同于一致渲染的颜色着色。普通着色器每一个面都相同导致两端颜色不能顺利延伸 如同。要两边颜色铺满 要对两端的点单独处理。
【J2me3D系列学习文章之三】（立即模式）对立方体进行变换操作-旋转、缩放、平移...
weixin_34248023的博客
12-09 152
  本站文章均为 李华明Himi 原创,转载务必在明显处注明： 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/j2me-kjava/262.html       上一篇文章讲述了如何构造一个简单的立方体，以及对立方体设定颜色，那么这一章学习对立方体进行变换操作。     对上一篇文章的学习中也强调了两个 Transform 对象的不同之处，...
WebGL-Random-Fun:旋转立方体并在立方体的面上移动一个正方形
06-29
WebGL-随机-乐趣旋转立方体并在立方体的面上移动一个正方形
WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框demo
11-29
WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
01-19
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)...
Three.js利用顶点绘制立方体的方法详解
11-28
之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。 three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来...
可互动的360度超炫3D旋转立方体动画特效
03-22
插件描述：鼠标拖动立方体查看各个面，或点击左侧导航链接页可切换到相应的面。参考示例：http://www.jq22.com/jquery-info6304
绘制一个立方体—WebGL旋转变换
u014291990的博客
11-24 1418
绘制一个立方体—WebGL旋转变换 本文是WebGL电子书的1.5节内容 实现的基本思路很简单，首先提供如上图所示立方体线框所有顶点的三维坐标，然后通过旋转矩阵对所有顶点进行旋转变换，最后调用绘制函数gl.drawArrays把所有点连成线渲染出来。 通过第1.3、1.4两节课案例知道，显示器上显示的实际上是平面的像素，可以简单理解为三维几何体放在你眼睛和显示器之间，几何体在显示器上的投影，视线...
原生webgl学习（八） WebGL实现动画：平移、缩放和旋转
Bruce_wjh的博客
10-16 4585
笔者在前面的文章主要是针对二维的静态图形进行开发；但有时候我们需要模型动起来，就像真实世界中的一切运动变化一样。场景如果不是动态的，那么可想而知，我们的世界是多么枯燥乏味。为了让我们开发的图形应用看上去更加高大上，这一节笔者将和大家一起做一个动画的例子；本节的内容用到了前面文章提到过的平移、缩放和旋转变换，如果对这方面还不是很熟悉的同学，可以参考这篇文章：原生webgl学习（三） WebGL中的矩...
28 WebGL绘制立方体
现在学习也不晚
06-02 8295
案例查看地址：点击这里到现在为止，一直学的都是绘制一些简单的三角形。下面，我们将学习如何绘制如图所示的一个立方体，目标：如果按以前所学的知识，制作这个正方体就需要使用三角形两个拼一个矩形，最后拼出来六个正方形来组成这个立方体，由于绘制三角形需要重复调用顶点，虽然只需要8个顶点的位置，但是，绘制三角形的时候，却需要多次调用，所以给我们提供了一个gl.drawElements()函数的解决方案。使用该...
第四节 WebGL中的图形变换：旋转、平移和缩放
Bruce_wjh的博客
11-16 4879
在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解： 学习交流欢迎加群：789723098，博主会将一些demo整理共享 1 旋转变换 试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画...
关于openGL中glReadPixels接口的一点使用心得
热门推荐
chenhao3615614的博客
03-25 1万+
今天使用glReadPixels接口想要获取下opengl画出画面，保存成BMP图片，结果由于学艺不精，花费了好多时间，特此记录下：首先介绍下glReadPixels的参数，该接口有7个参数 void glReadPixels( GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *
WebGl-11.图形移动旋转
qq_25064691的博客
09-12 537
例如将一个顶点(x0, y0, z0 )进行平移到(0.5, 0.5, 0.5)的话，就只需要整个顶点的三个方向同时加上另外一个顶点；最终位置 = (x0 + 0.5, y0 + 0.5, z0 + 0.5) 所以如果将一个三角形进行平移的话，就需要逐个顶点进行操作，加上一个平移的值； 只需要在顶点着色器中为顶点坐标的每个分量加上一个常量就可以平移的操作； // 顶点着色器 attribute vec4 a_Position; uniform vec4 u_Translation; void ma.
webgl中实现根据顶点位置，来确定颜色
webMinStudent的博客
12-18 311
1.webgl中实现更加顶点位置，来确定颜色 要实现这个功能的话，重点是gl_FragCoord该内置变量 2.gl_FragCoord 该内置变量的第一个分量，和第二个分量表示 片元在<canvas></canvas>坐标系统中的坐标值。 1.顶点着色器 const VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + '
使用webgl 绘制一个正方形
最新发布
06-01
使用 WebGL 绘制正方形需要进行以下步骤： 1. 获取 WebGL 上下文对象 ```javascript const canvas = document.querySelector('canvas'); const gl = canvas....这样就可以在 canvas 中绘制一个红色的正方形了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值