# CocosCreatorHowToUse

**Repository Path**: chanscen/cocos-creator-how-to-use

## Basic Information

- **Project Name**: CocosCreatorHowToUse
- **Description**: 大道至简，殊途同归。
CocosCreatorHowToUse是希望简化用户理解Cocos Creator API某些功能的使用。
Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: v3.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 157
- **Created**: 2021-08-20
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Cocos Creator How To Use
#### Write by yeshao2069.
#### Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
#### Cocos Creator V3.0.0+
 

## QuickLinks
| [音频示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#AudioExample)
| [常用整理](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#CommonUse)
| [动画示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#AnimationExample)
| [Graphics示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#GraphicsExample)
| [物理示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#PhysicsExample)
| [Tween示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#TweenExample)
| [渲染示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#RenderExample)
| [模型示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#ModelExample)
| [粒子示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#ParticleExample)
| [需求案例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#DemandCase)
|
 
## Examples
### AudioExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 1. 音频示例
#### * 1.1 实现同时播放多个音效?  [PlayOneShot](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/PlayOneShot)
#### * 1.2 添加全局按钮的音效  [AddGlobalButtonSound](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/AddGlobalButtonSound)
#### * 1.3 模拟钢琴播放测试(官方示例)  [PianoPlayTest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/PianoPlayTest)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Audio/PianoPlayTest.png" width="400" height="300" />
</div>

&nbsp;

---
### CommonUse
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 2. 常用整理
#### * 2.1 萌新文档(2.x VS 3.x)  [MoeNewDocument](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/MoeNewDocument)
#### * 2.2 自定义TS脚本模板  [Custom-TS-ScriptTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-TS-ScriptTemplate)
#### * 2.3 使用动画帧事件  [UseAnimationFrameEvents](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/UseAnimationFrameEvents)
#### * 2.4 动态获取脚本的方法名(js.getClassByName)  [GetScriptFunction](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/GetScriptFunction)
#### * 2.5 动态获取AnimationClip中属性数据(不播放动画的情况下)  [GetAnimationClipDataByTime](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/GetAnimationClipDataByTime)
#### * 2.6 自定义Demo模板  [Custom-CasesTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-CasesTemplate)
#### * 2.7 自定义引擎  [Custom-Engine](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-Engine)
#### * 2.8 点击响应测试  [PressResponseTest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/PressResponseTest)
&nbsp;

---
### AnimationExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 3. 动画示例
#### * 3.1 如何加载Spine动画？(官方示例)  [LoadSpine](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/LoadSpine)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/LoadSpine.gif" width="400" height="300" />
</div>

#### * 3.2 如何在Spine动画上做挂点？(官方示例)  [SpineAttach](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineAttach)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/SpineAttach.gif" width="400" height="300" />
</div>

#### * 3.3 Spine动画上实现抖动/旋涡效果？(官方示例)  [SpineMesh](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineMesh)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/SpineMesh.gif" width="400" height="300" />
</div>

#### * 3.4 Spine动画换肤效果？(官方示例)  [SpineSkin](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineSkin)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/SpineSkin.gif" width="400" height="300" />
</div>

#### * 3.5 Spine动画碰撞检测？(官方示例)  [SpineCollider](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineCollider)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/SpineCollider.gif" width="400" height="300" />
</div>

#### * 3.6 动态替换Spine动画动作/Spine调试功能使用？(官方示例)  [SpineBoy](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineBoy)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Spine/SpineBoy.gif" width="400" height="300" />
</div>

#### * 3.7 动态替换龙骨动画(DragonBones)的插槽(slot)（官方示例）  [DragonBonesReplaceSlot](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesReplaceSlot)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/DragonBonesReplaceSlot.gif" width="400" height="300" />
</div>

#### * 3.8 如何加载龙骨动画(DragonBones)?（官方示例）  [LoadDragonBones](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/LoadDragonBones)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/LoadDragonBones.gif" width="400" height="300" />
</div>

#### * 3.9 龙骨动画(DragonBones)碰撞检测/挂点?（官方示例）  [DragonBonesCollider](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesCollider)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/DragonBonesCollider.gif" width="400" height="300" />
</div>

#### * 3.10 如何在龙骨动画(DragonBones)上做挂点？(官方示例)  [DragonBonesAttach](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesAttach)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/DragonBonesAttach.gif" width="400" height="300" />
</div>

#### * 3.11 动态替换龙骨动画(DragonBones) (官方示例)  [DragonBones](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBones)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/DragonBones.gif" width="400" height="300" />
</div>

#### * 3.12 龙骨动画(DragonBones)置灰/缓存/合批 (官方示例)  [DragonBonesBatch](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesBatch)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/DragonBones/DragonBonesBatch.gif" width="400" height="300" />
</div>

#### * 3.13 精灵帧动画(官方示例)  [SpriteFrameAnimation](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/SpriteFrameAnimation)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Animation/SpriteFrameAnimation.gif" width="400" height="300" />
</div>

#### * 3.14 精灵帧移动动画(官方示例)  [SpriteMoveAnimation](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/SpriteMoveAnimation)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Animation/SpriteMoveAnimation.gif" width="400" height="300" />
</div>

#### * 3.15 动态创建精灵帧动画(官方示例)  [CreateAnimationClip](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/CreateAnimationClip)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Animation/CreateAnimationClip.gif" width="400" height="300" />
</div>
&nbsp;

---
### GraphicsExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 4. Graphics示例

#### * 4.1 Graphics画饼状图(官方示例)  [GraphicsArc](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsArc)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsArc.png" width="400" height="300" />
</div>

#### * 4.2 Graphics画正方形(官方示例)  [GraphicsRect](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsRect)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsRect.png" width="400" height="300" />
</div>

#### * 4.3 Graphics画菱形(官方示例)  [GraphicsLineTo](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsLineTo)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsLineTo.png" width="400" height="300" />
</div>

#### * 4.4 Graphics画圆形/椭圆形(官方示例) [GraphicsEllipse](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsEllipse)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsEllipse.png" width="400" height="300" />
</div>

#### * 4.5 Graphics画圆(使用三点确认一个圆并画圆)  [GraphicsFindCircleAndDraw](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsFindCircleAndDraw)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsFindCircleAndDrawCircle.gif" width="400" height="300" />
</div>

&nbsp;

---
### PhysicsExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 5. 物理示例
#### * 5.1 怎么去检测一个碰撞体是否存在?  [PhysicsRaycastClosest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRaycastClosest)
#### * 5.2 射线检测(官方示例)  [PhysicsRaycast](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRaycast)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsRaycast.gif" width="400" height="300" />
</div>

#### * 5.3 使用物理材质(官方示例)  [PhysicsMaterial](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsMaterial)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsMaterial.gif" width="400" height="300" />
</div>

#### * 5.4 使用网格碰撞器组件 MeshCollider(官方示例)  [PhysicsMeshCollider](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsMeshCollider)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsMeshCollider.gif" width="400" height="300" />
</div>

#### * 5.4 物体旋转/跳跃(官方示例)  [PhysicsRotateAndJumpWithVelocity](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRotateAndJumpWithVelocity)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsVelocity.gif" width="400" height="300" />
</div>

#### * 5.5 使用触发器--触发事件(官方示例)  [PhysicsTriggerEvent](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsTriggerEvent)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsTriggerEvent.gif" width="400" height="300" />
</div>

#### * 5.6 运行时更新碰撞体数据(官方示例)  [PhysicsRuntimeUpdate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRuntimeUpdate)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsRuntimeUpdate.gif" width="400" height="300" />
</div>

#### * 5.7 使用平面碰撞器组件 PlaneCollider(官方示例)  [PhysicsPlaneCollider](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsPlaneCollider)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsPlaneCollider.gif" width="400" height="300" />
</div>

#### * 5.8 物理同步测试(官方示例)  [PhysicsSync](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsSync)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsSync.gif" width="400" height="300" />
</div>

#### * 5.9 物理分组掩码检测(官方示例)  [PhysicsGroupMask](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsGroupMask)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsGroupMask.gif" width="400" height="300" />
</div>

#### * 5.10 物理动态运行测试(官方示例)  [PhysicsRunDynamicTest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRunDynamicTest)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsRunDynamicTest.gif" width="400" height="300" />
</div>

#### * 5.11 不规则物体碰撞(官方示例)  [PhysicsConvexColliders](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsConvexColliders)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsConvexColliders.gif" width="400" height="300" />
</div>

#### * 5.12 点对点约束(官方示例)  [PhysicsPointToPointConstraint](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsPointToPointConstraint)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsPointToPointConstraint.gif" width="400" height="300" />
</div>

#### * 5.13 碰撞点数据测试(官方示例)  [PhysicsContactData](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsContactData)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsContactData.gif" width="400" height="300" />
</div>

#### * 5.14 链条约束(官方示例)  [PhysicsHingeConstraint](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsHingeConstraint)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsHingeConstraint.gif" width="400" height="300" />
</div>

#### * 5.15 使用恒力组件(官方示例)  [PhysicsForceConstant](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsForceConstant)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsForceConstant.gif" width="400" height="300" />
</div>

#### * 5.16 使用碰撞器-碰撞事件(官方示例)  [PhysicsCollisionEvent](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsCollisionEvent)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsCollisionEvent.gif" width="400" height="300" />
</div>

#### * 5.17 胶囊体触发器测试(官方示例)  [PhysicsCapsuleTrigger](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsCapsuleTrigger)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsCapsuleTrigger.gif" width="400" height="300" />
</div>

&nbsp;

---
### TweenExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 6. Tween示例
#### * 6.1 Tween实现透明度渐变  [TweenOpacityChange](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenOpacityChange)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tween/TweenOpacityChange.gif" width="400" height="300" />
</div>

#### * 6.2 Tween实现旋转  [TweenRotateChange](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenRotateChange)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tween/TweenRotateChange.gif" width="400" height="300" />
</div>

#### * 6.3 Tween实现圆形运动  [TweenCircleMove](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenCircleMove)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tween/TweenCircleMove.gif" width="400" height="300" />
</div>

#### * 6.4 Tween实现一边旋转一边缩放  [TweenRotateAndScaleForever](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenRotateAndScaleForever)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tween/TweenRotateAndScaleForever.gif" width="400" height="300" />
</div>

#### * 6.5 Tween使用Easing实例(官方示例)  [TweenShowMonster](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenShowMonster)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tween/TweenShowMonster.gif" width="400" height="300" />
</div>

#### * 6.6 CCUtils 封装  [CCUtilsDemo](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/CCUtilsDemo)
&nbsp;

---
### RenderExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 7. 渲染相关示例
#### * 7.1 2D的物体渲染在3D场景中(官方示例)  [Object2DRenderingIn3D](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/Object2DRenderingIn3D)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Renderer/Object2DRenderingIn3D.gif" width="400" height="300" />
</div>

#### * 7.2 Web截图测试(官方示例)  [CaptureForWeb](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/CaptureForWeb)
&nbsp;

---
### ModelExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 8. 模型示例
#### * 8.1 表情动画/变形动画(官方示例)  [MorphHead](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/MorphHead)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Model/MorphHead.gif" width="400" height="300" />
</div>

#### * 8.2 骨骼动画--跳舞的女人(官方示例)  [SkeletonAnimationDanceWoman](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationDanceWoman)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Model/SkeletonAnimationDanceWoman.gif" width="400" height="300" />
</div>

#### * 8.3 骨骼动画(卡通材质)(官方示例)  [SkeletonAnimationToon](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationToon)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Model/SkeletonAnimationToon.gif" width="400" height="300" />
</div>

#### * 8.4 动态加载材质(官方示例)  [DynamicLoadMaterial](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/DynamicLoadMaterial)
&nbsp;

---
### ParticleExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 9. 粒子示例 
#### * 9.1 火焰效果 [FlameSimulation](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/FlameSimulation)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/FlameSimulation.gif" width="400" height="300" />
</div>

#### * 9.2 粒子拖尾模块(官方示例)
#### ** 3d粒子拖尾模块1  [ParticleTrails01](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails01)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleTrails01.gif" width="400" height="300" />
</div>

#### ** 3d粒子拖尾模块2  [ParticleTrails02](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails02)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleTrails02.gif" width="400" height="300" />
</div>

#### ** 3d粒子拖尾模块3  [ParticleTrails03](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails03)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleTrails03.gif" width="400" height="300" />
</div>

#### ** 3d粒子拖尾模块4  [ParticleTrails04](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails04)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleTrails04.gif" width="400" height="300" />
</div>

#### * 9.3 3d粒子颜色模块(官方示例)  [ParticleColorOverLifeTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleColorOverLifeTimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleColor.gif" width="400" height="300" />
</div>

#### * 9.4 3d粒子加速度模块(官方示例)  [ParticleForceOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleForceOverTimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleForce.gif" width="400" height="300" />
</div>

#### * 9.5 3d粒子限速模块(官方示例)  [ParticleLimitVelocityOvertimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleLimitVelocityOvertimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleLimitVelocity.gif" width="400" height="300" />
</div>

#### * 9.6 3d粒子主模块(官方示例)  [ParticleMain](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleMain)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleMain.gif" width="400" height="300" />
</div>

#### * 9.7 3d粒子渲染模块(官方示例)  [ParticleRenderer](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRenderer)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleRenderer.gif" width="400" height="300" />
</div>

#### * 9.8 3d粒子旋转模块(官方示例)  [ParticleRotationOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRotationOverTimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleRotation.gif" width="400" height="300" />
</div>

#### * 9.9 3d粒子发射器模块(官方示例)  [ParticleShapeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleShapeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleShape.gif" width="400" height="300" />
</div>

#### * 9.10 3d粒子大小模块(官方示例)  [ParticleSizeOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleSizeOverTimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleSize.gif" width="400" height="300" />
</div>

#### * 9.11 3d粒子贴图动画模块(官方示例)  [ParticleTextureAnimationModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTextureAnimationModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleTextureAnimation.gif" width="400" height="300" />
</div>

#### * 9.12 3d粒子速度模块(官方示例)  [ParticleVelocityOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleVelocityOverTimeModule)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ParticleVelocity.gif" width="400" height="300" />
</div>

#### * 9.13 开关2d粒子显示(官方示例)  [ToggleParticle](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ToggleParticle)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Particle/ToggleParticle.gif" width="400" height="300" />
</div>

&nbsp;

---
### DemandCase
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 10. 需求案例
#### * 10.1 判断物体是否在摄像机视野之内?  [ObjectIsInCameraView](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/ObjectIsInCameraView)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/ObjectIsInView.gif" width="400" height="300" />
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/ObjectIsInView2.gif" width="400" height="300" />
</div>

#### * 10.2 物体始终保持在人物右侧？  [ObjectAlwaysFollow](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/ObjectAlwaysFollow)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/ObjectAlwaysFollow.gif" width="400" height="300" />
</div>

#### * 10.3 相机使用范例  [CameraUseSample](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/CameraUseSample)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Tutorial/CameraUseSample.gif" width="400" height="300" />
</div>

#### * 10.4 制作圆形加载进度条?  [CircularProgressBar](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/CircularProgressBar)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/CircularProgressBar.gif" width="400" height="300" />
</div>

#### * 10.5 椭圆轨迹运动(update中计算角度)  [EllipseMove](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/EllipseMove)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/EllipseMove.gif" width="400" height="300" />
</div>

#### * 10.6 贝塞尔曲线路径在线绘制工具  [BezierCurvePathCreator](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/BezierCurvePathCreator)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/BezierCurvePathCreator.gif" width="400" height="300" />
</div>

#### * 10.7 动态加载FBX模型中的Mesh  [DynamicLoadMesh](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/DynamicLoadMesh)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/DynamicLoadMesh.gif" width="400" height="300" />
</div>

#### * 10.8 旋转后矩形判断是否包含某个点  [AbovePointTest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/AbovePointTest)

<div align=center>
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/AbovePointTest.png" width="400" height="300" />
</div>