目前为止，我们绘制出来的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. ansible中的常用循环模块with_items

    ansible中的循环模块有很多,不过with_items最为常用,且较为简单,循环模块最多的功能就是将重复性的任务简单化,如下例子所示: - hosts: all remote_user: root ...

  2. 调整DataTable的列顺序

    地址:https://www.cnblogs.com/gaocong/p/6490159.html 标题:DataTable 修改列名 删除列 调整列顺序 DataTable myDt =dt; // ...

  3. kafka安装测试报错 could not be established. Broker may not be available.

    修改 config 下配置文件 vim server.properties 配置本机ip listeners=PLAINTEXT://192.168.174.128:9092 执行命令时 bin/ka ...

  4. 在腾讯CentOS7.4云服务器上安装Docker，在Docker上安装配置MySQL、Tomcat和Nginx

    提示:以下是在腾讯CentOS7.4云服务器上操作. Docker的基本操作:https://www.cnblogs.com/opsprobe/p/10963098.html 一.安装Docker # ...

  5. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  6. finall语句是在return语句执行前被执行还是执行后被执行？

    finally对try...catch的影响和执行时间 一.finally语句不被执行的两种情况 我们在学习抛出异常的时候学习到了finally语句块,这个语句块一般会被执行,但是有两种情况下不被执行 ...

  7. [USACO 09FEB]Bullcow

    Description 题库链接 有 \(n\) 头牛,每头牛可以为 \(\text{A}\) 牛也可以为 \(\text{B}\) 牛.现在给这些牛排队,要求相邻两头 \(\text{A}\) 牛之 ...

  8. Python面向对象 -- slots, @property、多重继承MixIn、定制类（str, iter, getitem, getattr, call, callable函数，可调用对象）、元类（type, metaclass）

    面向对象设计中最基础的3个概念:数据封装.继承和多态 动态给class增加功能 正常情况下,当定义了一个class,然后创建了一个class的实例后,可以在程序运行的过程中给该实例绑定任何属性和方法, ...

  9. sqler 集成 terraform v0.12 生成资源部署文件

    terraform v0.12 发布了,有好多新功能的添加,包括语法的增强,新函数的引入,更好的开发提示 只是当前对于一些老版本的provider 暂时还不兼容,但是大部分官方的provider 都是 ...

  10. 限流神器之-Guava RateLimiter 实战

    前段时间,项目中需要对某些访问量较高的路径进行访问并发数控制,以及有些功能,比如Excel导出下载功能,数据量很大的情况下,用户不断的点击下载按钮,重复请求数据库,导致线上数据库挂掉.于是在这样的情况 ...