目前为止，我们绘制出来的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 服务控制与运行级别

    如何控制服务的运行状态?如何切换不同的运行级别? 服务控制 ntsysv 仿图形交互界面,集中配置各种服务启动状态 --level 35:同时对指定运行级别中的服务进行管理,不加仅管理当前运行级别中的 ...

  2. Docke 镜像加速

    一.国内获取Docker镜像时,访问 https://hub.docker.com/速度缓慢,只有几十K左右,这种情况可以使用国内的一些docker镜像,国内有些企业做了镜像拷贝工作,这样,我们就可以 ...

  3. php导出数据到csv

    序言 php导出数据到csv是一种很常见的功能,且csv相比于excel文件有其一定的优势,首先csv对数据的行数没有限制,但是excel对数据的行数有一定的限制,因此,csv文件对于导出大量的数据来 ...

  4. Python入门篇-函数、参数及参数解构

    Python入门篇-函数.参数及参数解构 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.函数概述 1>.函数的作用即分类 函数 数学定义:y=f(x) ,y是x的函数,x ...

  5. 日常bug(1)

    今天在写写代码的时候,前端找我,说我写的一个接口有可能有问题.导致前端的数据不能正常显示,我去看了一下,确实不能正常显示.问题的原因是本来前端循环遍历一个json里的数组,但是接下来的数据变成对象了. ...

  6. Spring Cloud Eureka注册中心(快速搭建)

    Spring Cloud 详解Eureka注册中心@(微服务)[java|spring-cloud|eureka] Eureka 注册中心是入门Spring Cloud微服务架构的必学组件,是学习所有 ...

  7. python_并发编程——数据共享

    1.数据共享 实现进程之间的数据共享 from multiprocessing import Manager,Process class MyPro(Process): def __init__(se ...

  8. Vue移动端项目如何使用手机预览调试

  9. The Business Of Open Source

    http://oss-watch.ac.uk/resources/businessofopensource by Matthew Langham, Indiginox on 3 February 20 ...

  10. 【转】RabbitMQ三种Exchange模式

    [转]RabbitMQ三种Exchange模式 RabbitMQ中,所有生产者提交的消息都由Exchange来接受,然后Exchange按照特定的策略转发到Queue进行存储 RabbitMQ提供了四 ...