Three.js入门详解
什么是WebGL
WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API,可以在 HTML5 元素中使用(简介引自 MDN)。
以我的理解,WebGL 给我们提供了一系列的图形接口,能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。
什么是Three.js
Three.js 是一款 webGL 框架,由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上,又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发,他更为人知的网名是 Mr.doob。
Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧,极大地提高了性能。另外,由于内置了很多常用对象和极易上手的工具,Three.js 的功能也非常强大。最后,Three.js 还是完全开源的,你可以在 GitHub 上找到它的源代码,并且有很多人贡献代码,帮助 Mr.doob 一起维护这个框架。
WebGL与Three.js的关系
WebGL 原生 API 是一种非常低级的接口,而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说,入门真的很难,Three.js 将入门的门槛降低了一大截,对 WebGL 进行封装,简化我们创建三维动画场景的过程。只要你有一定的 JavaScript 基础,有一定的前端经验,我坚信,用不了多长时间,三维制作会变得很简单。
用最简单的一句话概括:WebGL 和 Three.js 的关系,相当于 JavaScript 和 jQuery 的关系。
功能概述
Three.js 作为 WebGL 框架中的佼佼者,由于它的易用性和扩展性,使得它能够满足大部分的开发需求,Three.js 的具体功能如下:
1. Three.js 掩盖了 3D 渲染的细节:Three.js 将 WebGL 原生 API 的细节抽象化,将 3D 场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
2. 面向对象:开发者可以使用上层的 JavaScript 对象,而不是仅仅调用 JavaScript 函数。
3. 功能非常丰富:Three.js 除封装了 WebGL 原始 API 之外,Three.js 还包含了许多实用的内置对象,可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
4. 速度很快:Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下,保持极高的性能。
5. 支持交互:WebGL 本身并不提供拾取(Picking)功能(即是否知道鼠标正处于某个物体上)。而 Three.js 则固化了拾取支持,这就使得你可以轻松为你的应用添加交互功能。
6. 包含数学库:Three.js 拥有一个强大易用的数学库,你可以在其中进行矩阵、投影和矢量运算。
7. 内置文件格式支持:你可以使用流行的 3D 建模软件导出文本格式的文件,然后使用 Three.js 加载,也可以使用 Three.js 自己的 JSON 格式或二进制格式。
8. 扩展性很强:为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构,那么只需要封装到 Three.js 即可。
9. 支持HTML5 Canvas:Three.js 不但支持 WebGL,而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。
虽然 Three.js 的优势很大,但是它也有它的不足之处:
1. 官网文档非常粗糙,对于新手极度不友好。
2. 国内的相关资源匮乏。
3. Three.js 所有的资料都是以英文格式存在,对国内的朋友来说又提高了门槛。
4. Three.js 不是游戏引擎,一些游戏相关的功能没有封装在里面,如果需要相关的功能需要进行二次开发。
Three.js提供了几种源码获取方式,我是用的BootCDN 提供的免费 CDN 加速服务(同时支持 HTTP 和 HTTPS 协议),直接引入方式为:
如果需要更新代码,可以点击这里查找最新版本地址引入即可。
入门程序:
--> a
Three.js入门详解相关推荐
- Node.js 入门详解 (三)
目录 1. 初识Express 1.1 Express简介 1.1.1 什么是Express 1.1.2 进一步理解 Express 1.1.3 Express能做什么 1.1.4 Express 中 ...
- Node.js 入门详解(一)
目录 前言 1. 初识 Node.js 1.1 回顾与思考 1.2 Node.js 简介 1.2.1 什么是Node.js 1.2.2 Node.js 中的 JavaScript 运行环境 1.2.3 ...
- Node.js 入门详解(四)
数据库与身份认证 1. 数据库的基本概念 1.1 什么是数据库 1.2 常见的数据库及分类 1.3 传统型数据库的数据组织结构 1.3.1 Excel的数据组织结构 1.3.2 传统型数据库的数据组织 ...
- mapboxGL入门详解
MapBox GL 入门详解 1.基础知识介绍 mapbox GL Js JavaScript地图库: 使用webGL渲染,支持大数据量: 支持矢量切片渲染地图: 与mapbox其他工具兼容.生态系统 ...
- SQL注入攻防入门详解
转载自:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html SQL注入攻防入门详解 =============安全性篇目录= ...
- SQL 注入攻防入门详解
为什么80%的码农都做不了架构师?>>> SQL 注入攻防入门详解 原文出处: 滴答的雨 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对 ...
- FFmpeg入门详解之87:HLS直播协议详解
引言与效果演示 ----------------------------------------- FFmpeg431的官方地址已经无法打开, 我将ffmepg4.3.1的开发包和源码上传到了百度云: ...
- FFmpeg入门详解之102:HLS直播协议详解
引言与效果演示 ----------------------------------------- FFmpeg431的官方地址已经无法打开, 我将ffmepg4.3.1的开发包和源码上传到了百度云: ...
- FFmpeg入门详解之82:FFmpeg转码器Java版之ava编码
创建数据库:db_webavtc 创建数据表:avcategory(素材类别) id int primary key, pid int , cname varchar(255), cmemo varc ...
- linux 日志按大小切割_nginx入门详解(六)- 日志切割
上一章讲解了nginx的目录加密功能,本章重点介绍nginx的日志切割. 笨办法学linux:nginx入门详解(五)- 目录加密zhuanlan.zhihu.com 在第二章,我们探讨了nginx ...
最新文章
- 用C#实现FTP搜索引擎
- java 中向文本写入和读取hashmap_就靠这一篇HashMap的讲解,我与头条面试官聊了一个小时。...
- JAVASE_File类(实践)——目录拷贝
- iphone 保存到沙盒中的图片的读取
- 深度学习:反向传播(back-propagation)
- Scala 元组(tuple)
- activiti高亮显示图片_第 09 篇:让博客支持 Markdown 语法和代码高亮
- 软件工程进度条-第十五周
- DevOps发布策略简介
- CC++中的qsort库函数
- java 动态编译_老生常谈Java动态编译(必看篇)
- 如何使用PowerShell将VS Code扩展导出到另一台计算机
- SpringBoot 工程目录 整合mybatis-mysql(xml类型)
- React中PureComponent原理
- linux系统监控命令汇总
- flask如何查询mysql_如何从Flask应用中的MySQL查询返回数据?
- Java programer的成长之路
- js url解码gbk_使用js解码url里的gbk汉字编码
- 手动晶圆切割贴膜机-8寸12寸晶圆减薄划片机
- html给用户自定义页面,个人门户增加自定义html模块(重要!)
热门文章
- 使用老毛子在腾讯云DNSpod上实现DDNS
- 嵌入式操作系统新纪元?
- Protel99SE推荐使用英文版
- 天正结构TAsd8.2 天正规划与景观设计软件7.5 及注册机
- acer 4741G驱动
- 电力系统微型计算机继电保护试题及答案,全国2010年4月高等教育自学考试电力系统微型计算机继电保护试题及答案...
- EPUB PDF DOCX格式转换及主流格式电子书制作终极攻略(内含用WORD制作精美EPUB方法)...
- 《The Django book 2.0中文译本》PDF
- 《大型网站技术架构:核心原理与案例分析李智慧》pdf版电子书网盘附下载链接+仪式感技术书阅读法
- PHP生成二维码与识别二维码,jq生成二维码