目前为止，我们绘制出来的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. 【监控】jvisualvm之jmx远程连接 jar启动应用

    一.Java -jar启动添加如下参数就可以了 -Dcom.sun.management.jmxremote -Djava.rmi.server.hostname=127.0.0.1 -Dcom.su ...

  2. 一、Linux_文件操作

    1.复制文件到当前目录: # 复制文件到当前目录下, ./表示当前目录 $ cp /home/book/poems.tar.gz ./ # 复制并改名,并存放在当前目录下 (cp源文件名 新文件名) ...

  3. Linux一些服务的启动命令

    http:服务service httpd start 启动 service httpd restart 重新启动 service httpd stop 停止服务 启动ssh服务 # /etc/init ...

  4. c风格的字符串

    c风格的字符串的标注库 #include <cstring> 使用c 风格的字符串,牢记,其必须以null为结束标志 如 char ca[]={'c','+','='}; cout< ...

  5. spring的@Scheduled定时任务，同一时间段的定时任务只会执行一个，其余的会被阻塞,@Scheduled注解定时任务并发执行解决办法，即多线程运行定时任务

    原文:https://blog.csdn.net/qq_35937303/article/details/88851064 现有两个定时任务 @Component("aa") pu ...

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

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

  7. appium+python自动化64-使用Uiautomator2执行driver.keyevent()方法报错解决

    前言 未加'automationName': 'Uiautomator2'参数使用Uiautomator可以正常使用driver.keyevent()方法,使用Uiautomator2时driver. ...

  8. sql分割函数

    drop function [dbo].[f_split] create function [dbo].[f_split] ( ),--需要分割的字符串(例如:1,2,3,4,5 我|和|你) )-- ...

  9. 使用Zookeeper实现负载均衡原理

    思路 使用Zookeeper实现负载均衡原理,服务器端将启动的服务注册到,zk注册中心上,采用临时节点.客户端从zk节点上获取最新服务节点信息,本地使用负载均衡算法,随机分配服务器. 创建项目工程 M ...

  10. po模式

    一条测试用例可能需要多个步骤操作元素,将每一个步骤单独封装成一个方法,在执行测试用例时调用封装好的方法进行操作.PO模式可以把一个页面分为三个层级,对象库层.操作层.业务层. 对象库层:封装定位元素的 ...