https://github.com/galacean/effects-runtime

It can load and render cool animation effects
https://github.com/galacean/effects-runtime

2d 3d animation effects html5 javascript typescript webgl webgl2

Last synced: 18 days ago
JSON representation

It can load and render cool animation effects

• Host: GitHub
• URL: https://github.com/galacean/effects-runtime
• Owner: galacean
• License: mit
• Created: 2023-11-08T05:11:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-14T08:27:17.000Z (20 days ago)
• Last Synced: 2025-05-14T08:44:34.030Z (20 days ago)
• Topics: 2d, 3d, animation, effects, html5, javascript, typescript, webgl, webgl2
• Language: TypeScript
• Homepage: https://www.galacean.com/effects/
• Size: 8.16 MB
• Stars: 474
• Watchers: 8
• Forks: 15
• Open Issues: 8
• Metadata Files:
  • Readme: README-zh_CN.md
  • Changelog: CHANGELOG-zh_CN.md
  • License: LICENSE

Awesome Lists containing this project

README

        




Galacean Effects


加载并渲染酷炫的动效，通过 effects-core 提供的 APIs 也可以让你的引擎使用动效产物，快速的接入图层、粒子等动画效果。

![GitHub release (with filter)](https://img.shields.io/github/v/release/galacean/effects-runtime)

![GitHub License](https://img.shields.io/github/license/galacean/effects-runtime)

![GitHub top language](https://img.shields.io/github/languages/top/galacean/effects-runtime)

[客户端版](https://github.com/galacean/effects-native) · [更新日志](./CHANGELOG-zh_CN.md) · [报告问题][github-issues-url] · [特性需求][github-issues-url] · [English](./README.md) · 中文

![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

所见 · 即所得









  

    

    

  



[github-issues-url]: https://github.com/galacean/effects-runtime/issues



## 安装

``` bash

npm install @galacean/effects --save

```

``` bash

pnpm add @galacean/effects

```

## 示例

``` html



```


``` ts

import { Player } from '@galacean/effects';

// 1. 实例化一个播放器

const player = new Player({

  container: document.getElementById('J-Container'),

});

// 2. 加载并播放动效资源

player.loadScene('./demo.json');

```

> 通过 [Galacean Effects](https://www.galacean.com/effects/) 编辑器获取 `demo.json` 产物

## 相关文档

- [开发文档](https://www.galacean.com/effects/user/dgmswcgk63yfngku)

- [接入指南](https://www.galacean.com/effects/user/ti4f2yx1rot4hs1n)

- [API 文档](https://www.galacean.com/effects/api)

- 其他链接:

  - [本地开发](docs/developing.md)