美文网首页
WebGL-旋转

WebGL-旋转

作者: 写前端的大叔 | 来源:发表于2020-01-22 12:44 被阅读0次

学习完怎么创建一个正方形,以及给正方形顶点色后,之前绘制的方形只是一个静态的图形,为了做出更炫的场景,就得让正方动起来。通过这个例子来学习如何让2D的正方形进行三维旋转和移动。其实现原理主要是在指定的时间内改变X轴Y轴Z轴上的值,然后再重新调用绘制的方法来重绘,使得正方形动起来。

旋转

要想让正方形进行旋转,首先需要设定一个变量squareRotation,来跟踪正方形旋转的情况,由于要将旋转做成可持续的,所以还需要随便改变squareRotation的值,在这里使用requestAnimationFrame来定时更新squareRotation的值,如下所示:

  var then = 0;
  function render(now) {
    now *= 0.001;  // convert to seconds
    const deltaTime = now - then;
    then = now;
    drawScene(gl, programInfo, buffers, deltaTime);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

改变旋转的变量后,通过下面的方法对正方形进行旋转:

mat4.rotate(modelViewMatrix,
      modelViewMatrix,
      this.squareRotation,
      [0, 0, 1]);

个人博客

相关文章

  • WebGL-旋转

    学习完怎么创建一个正方形,以及给正方形顶点色后,之前绘制的方形只是一个静态的图形,为了做出更炫的场景,就得让正方动...

  • WebGL-学习笔记(一)

    反正不管你信不信,我觉得WebGL是接下来一个时代的流量入口啦,谁不喜欢酷炫的东西,所以本着跟着时代步伐的精神,终...

  • WebGL-学习笔记(四)

    最近学习构建三维图形的时候,深感几何功底不够,一个视图变化矩阵看了几天也没想过来,只勉强理解原理,细节部分自己还需...

  • WebGL-学习笔记(五)

    1. 光照和反射 要知道看到的物体的颜色实际上是物体反射的光的颜色,物体吸收了部分频率的光,将不能吸收的光进行了反...

  • WebGL-学习笔记(二)

    构成三维模型的基本图形是三角形,所以接下来就从如何绘制一个三角形开始,之后涉及到图形的变换和动画。 1. 图形绘制...

  • WebGL-学习笔记(三)

    在利用缓冲区并在学会利用 mode绘制图形动画以后,继续研究二维图形的颜色渲染以及纹理操作 1. 颜色渲染 1.1...

  • WebGL-绘制正方形

    随着三维地图的越来越流行,作为一个giser不会WebGL都不好意思说自己是做webgis的了。实现一些基本的图形...

  • WebGL-给顶点着色

    上一篇文章介绍的是绘制一个正方形,片段着色器设置的颜色为正方形,所以整个正方形颜色都是红色的,顶点也默认为红色,这...

  • 旋转、旋转

    我尝试用临在舞去帮助自己临在,可是无效,我便改为旋转! 手露出来划过空气时感受到冰冷,脚底因为是地板砖很滑,家里的...

  • WebGL-切换着色器

    切换着色器https://blog.csdn.net/qq_30100043/article/details/73...

网友评论

      本文标题:WebGL-旋转

      本文链接:https://www.haomeiwen.com/subject/xhbuzctx.html