目前为止，我们绘制出来的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. java验证邮件正则

    这里,本人从commons-validator包中源码,拷出部分内容,如下: private static final String EMAIL_REGEX = "^\\s*?(.+)@(. ...

  2. redis发布订阅实现各类定时业务（优惠券过期，商品不支付自动撤单，自动收货等）

    修改redis配置文件找到机器上redis配置文件conf/redis.conf,新增一行  notify-keyspace-events Ex 最后的Ex代表 监听失效的键值 修改后效果如下图 代码 ...

  3. （安全之路）从头开始学python编程之文件操作

    0x00 python学习路径 b站(哔哩哔哩)视频,w3cschool(详情百度),官方文档,各大群内获取资料等等方式 0x01 python的学习要点 open()函数:有两个参数,文件名跟模式, ...

  4. [AI] 切换cuda版本的万金油

    1. 环境 ubuntu16.04 GTX1080Ti x 4 nvidia-418 cuda-10.1 pytorch1.0.0 目标:在最新的显卡驱动下,使用不同版本的cuda和深度学习框架来执行 ...

  5. Unity进阶之：MVC编程思想

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  6. heapq 对有序的数组列表进行整体排序

    """ 功能:实现对有序的多个数组整体排序,获取top k个最小元素 """ from heapq import * def heap_so ...

  7. Beta：凡事预则立

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺) 团队名称:葫芦娃队 作业目标:尽力完成 团队博客 队员学号 队员昵称 博客地址 041602421 der himmel ht ...

  8. Spring和mybatis整合 org.mybatis.spring.mapper.MapperScannerConfigurer

    在springmvc与mybatis整合时,需要对每一个mapper定义对应的一个MapperFactoryBean,可以使用MapperScannerConfigurer自动扫描mapper,然后自 ...

  9. 关于AndroidStudio项目app在手机上运行遇到登录网络问题的解决

    又得提到我熟悉的12月份末尾,依旧想着把自己遇到的问题给大家看看,顺便分享我的解决办法. 看过我第一个发的随笔就知道,我遇到过给项目app打包成apk的问题啊,虽然解决了,但是运行到手机上 就又出现了 ...

  10. [CSS3] Use media query to split css files and Dark mode (prefers-color-scheme: dark)

    Dark Mode: :root { --text-color: #000; --background-color: #fff; } body { color: var(--text-color); ...