Skip to main content

animation&game&3d

· 11 min read

动画、游戏、3D​

TweenMax.js​

适用于移动端和现代互联网的超高性能专业级动画插件

Tweenmax是GreenSock 动画平台的核心，配合其他插件可动画CSS属性、滤镜效果、 颜色、 声音、 色彩、 帧、 饱和度、 对比度、 色调、 色系、 亮度、 贝塞尔

GSAP (GreenSock Animation Platform)​

GSAP 是一个强大的 JavaScript 工具集，构建适用于所有主要浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象......任何 JavaScript 可以触及的东西！ GSAP 的 ScrollTrigger 插件可让您以最少的代码创建令人惊叹的基于滚动的动画。

GreenSock

Spine​

Spine 是一款针对游戏开发的 2D 骨骼动画编辑工具。 Spine 旨在提供更高效和简洁 的工作流程，以创建游戏所需的动画。

Lottie​

Lottie 是一个 iOS、Android 和 React Native 库，可以实时渲染 After Effects 动画，让应用程序可以像使用静态图像一样轻松地使用动画。

DragonBones​

DragonBones是一款开源免费的移动游戏骨骼动画解决方案，主要用于创作2D游戏动画和富媒体内容,帮助设计师用更少的美术成本创造更生动的动画效果。 支持多语言，一次制作，全平台发布。

phaser3​

Phaser 3 是 Phaser 游戏框架的下一代。每个最后的元素都使用完全模块化的结构从头开始重建，并结合了面向数据的方法。它包括一个全新的自定义 WebGL 渲染器，专为满足现代 2D 游戏的需求而设计。

D3.js​

D3.js 是一个基于数据操作文档的 JavaScript 库。 D3 帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。 D3 对 Web 标准的强调为您提供了现代浏览器的全部功能，而无需将自己束缚在专有框架中，结合了强大的可视化组件和数据驱动的 DOM 操作方法。

highcharts​

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

threejs​

Three.js 是一款基于 WebGL 的强大 JavaScript 库，用于在 Web 浏览器中创建和呈现三维图形。它提供了基础的 3D 渲染功能，包括几何体创建、材质和光照效果。

主要功能：

  • 3D 场景与模型：Three.js 支持导入多种格式的 3D 模型，包括 OBJ, STL, FBX 等，并可以创建自定义的 3D 几何体。

  • 材质与材质材料：Three.js 支持多种材质类型，如基础材质、材质材料等，可以实现逼真的渲染效果。

  • 灯光与阴影：Three.js 支持各种光源，如点光源、平行光源等，并且可以设置阴影，增强场景的真实感。

  • 动画与物理引擎：Three.js 内置动画库，可以创建关键帧动画，同时也支持使用 Cannon.js 等物理引擎实现更真实的物理动画效果。

  • 插件扩展：Three.js 有活跃的社区，有许多第三方插件可以扩展其功能，如 GLTFLoader 用于导入 GLTF 模型，OrbitControls 用于轨迹控制等。

  • 支持 VR 与 AR：Three.js 支持 VR 和 AR 体验，可以通过相关插件实现在 VR 设备上的 3D 应用。

应用场景： 数字孪生、智慧城市、智慧园区、网页游戏、数据可视化、三维展示等。

相关教程资源:

Cesium​

Cesium 是一款开源的基于 JavaScript 的 3D 地图框架，它利用了现代 Web 技术，如 HTML5、WebGL 和 WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。

主要功能:

  • 多视图支持：Cesium 支持以 2D、2.5D 和 3D 形式展示地图，无需为每种视图分别编写代码。

  • 动态地理信息数据可视化：Cesium 能够使用时间轴动态展示具有时间属性的数据，支持使用符合 OGC 标准的 WMS、WMTS 等多种地图服务。

  • 多种数据格式支持：Cesium 支持加载 KML、GeoJSON 等格式的数据绘制矢量图形，以及加载 3D Tiles 和 glTF 格式的三维模型，包括点云、倾斜摄影等大规模模型数据。

  • 高性能和高精度：Cesium 对 WebGL 进行优化，充分利用硬件加速功能，并提供底层渲染方法进行可视化，包括绘制大型折线、多边形、广告牌、标签等 API，以及控制摄像头和创造飞行路径等坐标、向量、矩阵运算方法。

  • 开源和免费：作为一个开源项目，Cesium 是免费使用的，拥有活跃的社区支持和持续的更新。

应用场景： 地理信息系统（GIS）、城市规划与设计、航空与卫星图像的可视化、数字孪生、智慧城市、智慧园区、数据可视化

相关教程资源:

Babylon.js​

Babylon.js 是一个开源的 3D 引擎，专门为 Web 浏览器设计，允许开发者创建和展示交互式 3D 内容，无需安装任何插件。

它是基于 WebGL 技术构建的，这意味着它可以利用现代浏览器内置的图形硬件加速功能来渲染 3D 图形。

主要功能:

  • WebGL 支持：支持 WebGL 1.0、2.0 和 WebGPU，使得 3D 内容可以在无需插件的情况下在现代浏览器中运行。

  • 完整的场景图：包括灯光、摄像机、材质、网格、动画、音频和动作等元素。

  • 跨平台原生应用部署：支持 iOS、Android、MacOS、Win32 和 UWP 等平台。

  • 物理引擎集成：支持 oimo.js、ammo.js 和 cannon.js 等多种物理引擎。

  • 粒子系统：支持 CPU 和 GPU 两种模式渲染的粒子系统，以及立体粒子系统。

  • 基于 Web Audio 的音频引擎：提供高质量的音频支持。

  • 硬件加速的 GUI：提供交互式图形控件，如按钮、多选框等。

  • 着色器和渲染：支持节点材质、基于物理的渲染(PBR)、镜面反射、透明度贴图等多种着色器效果。

  • VR 和 WebXR 支持：允许开发者创建沉浸式的虚拟现实体验。

应用场景： 游戏开发、教育、建筑可视化、产品展示、数据可视化、虚拟现实和增强现实(AR)。

相关教程资源:

Unreal Engine​

Unreal Engine（简称 UE）是由 Epic Games 开发的一款功能强大的游戏引擎，它被广泛用于开发各种类型的游戏、模拟、可视化项目以及交互式体验。

Unreal Engine 5（UE5）是最新版本的引擎，它引入了新的技术和功能，如 Lumen 全局光照系统、Nanite 虚拟化微多边形几何技术等，进一步提高了渲染质量和开发效率。

在 UE 中我们可以使用 Cesium for Unreal 插件来将 Cesium 集成到 Unreal Engine 中，从而实现 Cesium 在 Unreal Engine 中的使用。

主要功能:

  • Cesium ion 集成：Cesium for Unreal 插件提供了与 Cesium ion 的集成，Cesium ion 是一个基于云的平台，提供了对全球高分辨率 3D 内容的即时访问，包括摄影测量、地形、图像和建筑物。

  • 地理参考组件：CesiumGeoreference 组件允许开发者将场景放置在全球环境中，以便与 Unreal Engine 中的本地环境更平滑地交互。

  • 数据流和可视化：Cesium for Unreal 可以流式传输和可视化来自 Cesium ion 的数据，使用开放标准构建丰富的 3D 地理空间应用程序。

  • 跨平台支持：与 Unreal Engine 一样，Cesium for Unreal 支持多种平台，包括 PC、游戏主机、移动设备和 VR/AR 设备。

  • 开源和免费：作为一个开源项目，Cesium for Unreal 对所有用户免费，拥有活跃的社区支持。

应用场景： 游戏和模拟、可视化、交互式体验、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

相关教程资源: UE5+Cesium智慧城市&园区视频教程