canvas动画

canvas与动画

1. 什么是canvas

  1. canvas 是一个可以使用脚本(通常为 JavaScript 来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.
  2. <canvas> 最早由Apple引入WebKit,用于Mac OS XDashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。
  3. Canvas API 提供了一个通过 JavaScriptHTMLcanvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

2. canvas绘制动画方式

2.1. webGL

  • WebGL是基于OpenGL ES 2.0的Web标准,可以通过HTML5 Canvas元素作为DOM接口访问。
  • WebGL可以看做是将OpenGL ESOpenGL for Embedded SystemsOpenGL嵌入式版本,针对手机、游戏机等设备相对较轻量级的版本)移植到了网页平台

2.2. Three.js

  • Three.js封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染。
  • 由于Three.jsWebGL的上层封装,所以几乎所有WebGL支持的浏览器Three.js都能够支持

3. Three.js实现动画关键核心内容

3.1. 场景 (scene)

Three.js中场景的概念类似于一个无限大的容器,在场景中,所有的内容(相机、灯光、物体等)都会在其内部布局,它在程序开始的时候实例化,后续除了更新内容没有复杂操作(类似于一间房间的装修,当房子做好后,装修基本上不会对房子结构做出很大改变)

3.2. 相机 (camera)

3.2.1. 什么是照相机

我们使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景如何显示到二维的显示屏上呢?照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。

而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。

在这里插入图片描述

3.2.2. 正交投影照相机

正交投影照相机的视角是一个矩形,它的展现类似于数学课上面绘制的正方体,无论远近正方体的高度宽度都是一致的,它的初始化参数分别为:

THREE.OrthographicCamera(left, right, top, bottom, near, far)

对于这些参数,下图给出了很形象的表示
在这里插入图片描述

上图中,灰色的部分是视景体,也就是我们通过照相机能够看到的区域,我们可以通过设置 nearfar 控制照相机视距,而通过设置 topbottomleftright,来设置视野大小,在正交投影照相机中,视野的宽高比决定了看到的东西的形状(比如上下高度越大,看到的物体越矮;左右宽度越大,看到的物体越瘦),所以尽量保证宽高比与 canvas 相同

3.2.3. 透视投影照相机

透视投影照相机的视角更接近于人类的视角,它的可视区域是一个梯形,离视角越近,它的宽高就会越大,反之就会越小,它的初始化参数为:

THREE.PerspectiveCamera(fov, aspect, near, far)

其视角见下图:
在这里插入图片描述

其中 fov 是视景体竖直方向上的张角(是角度制而非弧度制)如侧视图所示

aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例

nearfar 分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near

3.2. 图形(geometry)

此时我们有了可看见的视角,但是此时场景内并没有物品,Three.js给了我们很方便的接口创建各种图形,其创建方法如下:

THREE.Mesh(geometry, material)

其中 geometry 是图形类型,创建方法如下:

THREE.Geometry(param)

Three.js 提供了多种创建图形方式,每一种图形有不同参数:

在这里插入图片描述

具体可见 几何体对象(三维建模)

3.2. 材料(material)

在上面我们介绍了创建三维图形,但创建出来后,并不能直接显示,就好像一个篮球,我们是通过篮球外皮才能知道篮球是圆的,同理我们需要用一种材料去描述形状,而Three.js给我们提供了多种材料:

3.2.1. 基本材质

使用基本材质(BasicMaterial)的物体,渲染后物体的颜色始终为该材质的颜色,而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色,则颜色是随机的。其构造函数是:

THREE.MeshBasicMaterial(opt)

最后显示效果如下图所示:

在这里插入图片描述

3.2.2. Lambert材质

Lambert材质(MeshLambertMaterial)是符合Lambert光照模型的材质。Lambert光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果,因而对于金属、镜子等需要镜面反射效果的物体就不适应,对于其他大部分物体的漫反射效果都是适用的。其构造函数为:

THREE.MeshLambertMaterial(opt)

加上光照后显示效果如下图:

在这里插入图片描述

3.2.3. Phong材质

Phong材质(MeshPhongMaterial)是符合Phong光照模型的材质。和Lambert不同的是,Phong模型考虑了镜面反射的效果,因此对于金属、镜面的表现尤为适合。其构造函数为:

THREE.MeshPhongMaterial(opt)

加上光照后显示效果如下图:

在这里插入图片描述

3.2.4. 法相材质

法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助,法向材质的设定很简单,甚至不用设置任何参数:

THREE.MeshNormalMaterial()

加上光照后显示效果如下图:

在这里插入图片描述

3.2.5. 材质的纹理贴图

有时候,我们却希望使用图像作为材质。这时候,就需要导入图像作为纹理贴图,并添加到相应的材质中。Three.js也为我们提供了便利的方法:

var texture = THREE.ImageUtils.loadTexture('../img/0.png');
var material = new THREE.MeshLambertMaterial({
    map: texture
});

此时我们可以看到效果:

在这里插入图片描述

3.3. 光照

我们加入了几何体后,会发现完全看不到东西,因为我们创建的世界是没有光的,神说要有光,于是 Three.js 给了我们创造光的工具,在Three.js 中,光分为四类:环境光、点光源、平行光以及聚光灯

3.3.1. 环境光

环境光是指场景整体的光照效果,是由于场景内若干光源的多次反射形成的亮度一致的效果,通常用来为整个场景指定一个基础亮度。因此,环境光没有明确的光源位置,在各处形成的亮度也是一致的,它类似于我们阴天的光线,没有确定光源,但是能照亮物体

在这里插入图片描述

3.3.2. 点光源

点光源是不计光源大小,可以看作一个点发出的光源。点光源照到不同物体表面的亮度是线性递减的,因此,离点光源距离越远的物体会显得越暗。它类似于灯泡的光,光从一个定点开始四散,灯光强度随着距离逐渐减小

在这里插入图片描述

3.3.3.平行光

平行光类似于我们感受到的太阳光,虽然太阳光一定程度上是点光源,但我们距离够远,体积够小,所以我们感受到的光照是平行的,它对于任意平行的平面,平行光照射的亮度都是相同的,而与平面所在位置无关

在这里插入图片描述

3.3.2. 聚光灯

聚光灯是一种特殊的点光源,它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线,这与我们现实中看到的聚光灯是一致的

在这里插入图片描述

4. Three缺点

开发便利的它,有着很多的优点例如支持TS,面向对象等

但在它为我们开发带来便利的同时,它也存在着一些不方便的地方:

  • 中文文档过少,没有比较官方的文档
  • 如果需要使用Three.js做动画,需要一定的数学功底,因为动画的制作一定会涉及到坐标的计算
  • Three.js没有提供强大的引擎能力,所以复杂的动画需要加载渲染很久,体验不是很好

5. 参考文档

Three.js入门指南 https://www.ituring.com.cn/book/miniarticle/58552

Three.js视频教程 http://www.yanhuangxueyuan.com/Three.js_course.html

ing.com.cn/book/1272) https://www.ituring.com.cn/book/miniarticle/58552

Three.js视频教程 http://www.yanhuangxueyuan.com/Three.js_course.html

部分图片引用自 Three入门指南,如有侵权请联系博主删除

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值