目前为止，我们绘制出来的3D物体都是静止的，接下来我们需要让桌面上的小盒子可以根据我们按键（上下键）前进后退；

输入方面，监听按键和鼠标消息直接在document上添加对应的监听就行了；

动画这块，我们引入了webgl-utils.js类库，其中的方法requestAnimFrame可以按60帧的帧率调用指定的方法，通过每帧调整桌面上的小盒子的矩阵位置，就可以实现动画了；

示例

https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_5/index.html

WebGL学习笔记（七）：输入和动画的更多相关文章

  1. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  2. （转）Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  3. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  4. Java IO学习笔记七：多路复用从单线程到多线程

    作者:Grey 原文地址:Java IO学习笔记七:多路复用从单线程到多线程 在前面提到的多路复用的服务端代码中, 我们在处理读数据的同时,也处理了写事件: public void readHandl ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  6. Typescript 学习笔记七：泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  8. Go语言学习笔记七： 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  9. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  10. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

随机推荐

  1. [应用层]Linux进程间通信机制

    转自:https://www.cnblogs.com/yangang92/p/5679641.html 主要如下方式: 1. 管道pipe2. 命名管道FIFO3. 内存映射MemoryMapping ...

  2. 19.centos7基础学习与积累-005-命令总结01

    从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 1.查看命令帮助的方法: --help 适用于一般命令,非内置命令 man  适用于 ...

  3. Java输入流

    import java.util.*;  //java为小写public class TEST{ public static void main(String args[]){ Scanner inp ...

  4. P2606 [ZJOI2010]排列计数

    P2606 [ZJOI2010]排列计数 因为每个结点至多有一个前驱,所以我们可以发现这是一个二叉树.现在我们要求的就是以1为根的二叉树中,有多少种情况,满足小根堆的性质. 设\(f(i)\)表示以\ ...

  5. Windows环境下安装和使用nginx1.16.0

    nginx是一款开源的HTTP服务器和反向代理服务器,nginx可以作为Web服务器提供HTTP访问功能,类似于Apache.IIS等.目前nginx已经在国内外很多网站作为Web服务器或反向代理服务 ...

  6. 深度学习Keras框架笔记之AutoEncoder类

    深度学习Keras框架笔记之AutoEncoder类使用笔记 keras.layers.core.AutoEncoder(encoder, decoder,output_reconstruction= ...

  7. js function 参数

    JS 中 函数的调用非常完美, 例如 var myFun=function( num1,num2){ return num1+num2;} 调用喊出 1) myFun(1,1) 2) myFun(); ...

  8. Spring源码窥探之：AOP注解

    AOP也就是我们日常说的@面向切面编程,看概念比较晦涩难懂,难懂的是设计理念,以及这样设计的好处是什么.在Spring的AOP中,常用的几个注解如下:@Aspect,@Before,@After,@A ...

  9. 手机代理调试Charles Proxy和Fiddler

    一.Charles Proxy Charles是一个HTTP代理/HTTP监控/反向代理的工具. 使用它开发者可以查看设备的HTTP和SSL/HTTPS网络请求.返回.HTTP头信息 (cookies ...

  10. Centos7安装Hive2.3

    准备 1.hadoop已部署(若没有可以参考:Centos7安装Hadoop2.7),集群情况如下: hostname IP地址 部署规划 node1 172.20.0.4 NameNode.Data ...