文档章节

给 Web 开发人员推荐的开源图形库 —— 2D/3D

编辑部的故事
 编辑部的故事
发布于 2017/07/20 16:29
字数 1416
阅读 9542
收藏 550
点赞 23
评论 17

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。

以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。

给 Web 开发人员推荐的开源图形库 —— 动画

给 Web 开发人员推荐的开源图形库 —— 数据可视化

2D

一、绘图渲染

1、图形

PixiJS

一个 HTML5 构建引擎,用最快、最灵活的 2D WebGL 渲染器创建漂亮的数字化内容。旨在提供一个可以在所有设备上运行的快速轻量级 2D 库,帮助你创建丰富的交互式图形、跨平台应用和游戏,而无需深入到 WebGL API 或处理浏览器和设备的兼容性。

效果预览:点此查看

Fabric.js

一个可以轻松使用 HTML5 canvas 元素的库,在 Canvas 元素之上提供交互对象模型,同时还包含 SVG-to-canvas 解析器。它可以帮助你在画布上创建和填充对象,从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象,修改它们的属性(颜色、透明度,层叠顺序)等等。

效果预览:点此查看

2、立体像素

Obelisk.js

这是一个构建等距立体像素对象的 JavaScript 库,通过提供简单灵活的 API ,可以轻松地在 HTML5 画布中添加像砖、立方体、金字塔和斜率等等距像素元素。它严格遵循像素整齐的模式,在像素级别中处理所有渲染以获得精确的像素排列。

3、字体

opentype.js

这是一款是用于 TrueType 和 OpenType 字体的 JavaScript 解析器和写入程序。它非常高效,可在浏览器和 node.js 中运行。

4、创意

p5.js

P5.js 有完整的一套画图功能,既可当作画图软件使用,也包括支持与各类页面元素交互的库。但是,开发者没有被限制自己的画布上,他们可以把整个浏览器页面作为自己的素描区域。正因为如此,P5.js 有一个 addon 库能够使开发者非常容易地与其它 HTML5 对象(包括文本、输入、视频、网络摄像头和声音)进行交互。

效果预览:点此查看

二、矢量图形

Snap.svg

一个显示为现代 Web 准备的 Javascript SVG 库,专为现代浏览器而设计,支持最新的 SVG 功能,如屏蔽、剪切、模式、完整梯度、组等。旨在让你使用 SVG 资源就像在 jQuery 中使用 DOM 一样简单。

效果预览:点此查看

Raphaël

一个小型的 JavaScript 库,用来简化在页面上显示矢量图的工作。例如,如果要创建自定义的图表或图像裁剪和旋转小部件,可以使用该库简单而轻松地实现。Raphaël 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,这意味着创建的每一个图形对象也是一个 DOM 对象,可以附加 JavaScript 事件处理程序或稍后修改它们。它旨在提供一个适配器,能跨浏览器和更简单地绘图矢量作品。

三、物理引擎

Matter.js

一个用于 Web 的 JavaScript 2D 物理引擎库,它为开发者提供了许多的功能模块,通过简单易用的 API 就可以实现例如弹跳、碰撞、重力、滚动等物理效果。

效果预览:点此查看

3D

一、3D 绘图(WebGL)

Three.js

大名鼎鼎的 JavaScript 3D 库,旨在构建一个易于使用、轻量级的 3D 库。它提供 <canvas>、<svg>、CSS3D 和 WebGL 渲染器,可以用来可创建各种三维场景。

效果预览:点此查看

Babylon.js

这是一个基于 HTML5、WebGL、WebVR 和 Web Audio 构建 3D 游戏的完整 JavaScript 框架,亦或者说是一个 3D 引擎。

效果预览:点此查看

stackgl

stackgl 是一个基于 browserify 和 npm 建立的开放 WebGL 软件生态系统。它受 Unix 的启发,一个模块只做一件事,并做到最好。与许多 3D 引擎不同,stackgl 强调编写着色器代码,并提供强大的工具,如glslify,将 npm 的模块化和生产力带入 GLSL 。

二、物理引擎

Ammo.js

一个用 C++ 语言编写的物理库,可以看作是 WebGL 上的 Bullet 物理引擎端口。Emscripten 会直接将项目的源码从 C++ 转换成 Javascript ,无需人工重写,功能基本与原始 Bullet 相同。

cannon.js

一个轻量级的 Web 3D 物理引擎,吸取了前面提到的 Three.js 和 Ammo.js 易用的 API 特点,可与任意使用 WebGL、Canvas 或 CSS3 的 3D 渲染器一起使用。

效果预览:点此查看

类似的还有 Oimo.js ,同样是一个轻量级的 JavaScript 3D 物理引擎。

最后,补充两个 VR 库:

A-Frame

一个由 Mozilla 开源的构建虚拟现实体验的 Web 框架,使用 HTML 和 Entity-Component 制作 WebVR ,适用于 Vive、Rift、Daydream、GearVR 和桌面。

React VR

一个由 Facebook 开源的,用于创建在 Web 浏览器中运行的 VR 应用的框架。它将现代 API(如 WebGL 和 WebVR )与 React 的声明能力结合起来,通过各种设备提供适用于消费者的体验。

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1083
博文 231
码字总数 392922
作品 0
深圳
运营/编辑
加载中

评论(17)

polk6
polk6

引用来自“sprouting”的评论

想问下,这里面哪种最适合最交互的,如实现这样一个需求,花出一个长方体,点击右键,又可以添加一个长方体,这两个长方体之前用线连接,用来构建关系图
我们公司是用Raphaël来作为工作流的绘制。
peakandyuri
peakandyuri
看了这些就会感觉自己是个垃圾
b
baisejianke0
mark
电灯泡x
JS 要上天!
lemonwater
lemonwater
棒棒的,收藏了
thinkgood
thinkgood
前端要哭,要学的东西好多,受不了了
忧郁的残阳
忧郁的残阳
mark
喵小强
喵小强
牛逼
M
Memoryry0
1
竹隐江南
竹隐江南
REACT是将来的前端界的spring
C++资源大全

【原文】https://github.com/fffaraz/awesome-cpp 老外的Github上面是最新版,笔者这里补充了自己知道的一些工具库 关于 C++ 框架、库和资源的一些汇总列表,由 fffaraz发起和维护。 内容包括...

u012234115 ⋅ 2014/10/27 ⋅ 0

Android开发者指南(8) —— What is Android?

Android是什么? (What is Android?) Android是一个针对于移动设备的软件栈,它包括操作系统,中间件和关键应用程序。Android SDK提供了在Android平台使用Java编程语言进行开发应用程序的必要...

walb呀 ⋅ 2017/12/05 ⋅ 0

C++开源库大全

C++开源库大全 程序员要站在巨人的肩膀上,C++拥有丰富的开源库,这里包括:标准库、Web应用框架、人工智能、数据库、图片处理、机器学习、日志、代码分析等。 标准库 C++ Standard Library...

元禛慎独 ⋅ 2016/10/15 ⋅ 0

C++ 资源大全

C++ 资源大全 http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html 《C++ 并发编程指南》 关于 C++ 框架、库和资源的一些汇总列表,由 fffaraz发...

MtrS ⋅ 2016/12/05 ⋅ 0

什么是android(What Is Android?)

什么是Android? Android是一个移动设备,包括操作系统,中间件和关键应用软件堆栈。 而 Android SDK提供了必要的工具和API,开始使用Java编程语言在Android平台开发应用程序。 特点 应用程序...

Kxng_ ⋅ 2011/08/03 ⋅ 2

值得推荐的C/C++框架和库

值得学习的C语言开源项目 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具。它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟...

lwaif ⋅ 2016/02/21 ⋅ 0

值得推荐的C/C++框架和库

C/C++程序员必须熟练应用的开源项目 作为一个经验丰富的C/C++程序员, 肯定亲手写过各种功能的代码, 比如封装过数据库访问的类, 封装过网络通信的类,封装过日志操作的类, 封装过文件访问...

曾劲松 ⋅ 2016/04/21 ⋅ 0

开源游戏引擎介绍

2D: Allegro.cc - Main http://www.allegro.cc/ 老牌子了,和SDL同时是很经典两个EG开发组件,最近貌似在和PY进行联合? ClanLib - ClanLib Game SDK http://www.clanlib.org/ CLANLIB是以前...

垂盆草 ⋅ 2013/03/17 ⋅ 0

值得推荐的C/C++框架和库【转】

值得推荐的C/C++框架和库 【本文系外部转贴,原文地址:http://coolshell.info/c/c++/2014/12/13/c-open-project.htm】留作存档 下次造轮子前先看看现有的轮子吧 值得学习的C语言开源项目 - ...

强子哥哥 ⋅ 2016/03/21 ⋅ 0

龙博方案网Big Faceless Java图形展现控件详细介绍及下载

Graph Library 是用于以Java创建图形和图表的Java类库。它使用全三维模式,可在 PNG、Flash、PDF或 SVG 中绘制二维或阴影型三维饼图、折线图、条形图等。使用 JSP 标签库 (JSP Tag Library) ...

javascript1 ⋅ 2014/05/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 58分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 今天 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 12

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部