1 Star 8 Fork 2

shiina / Up2017-Particles-Effect-Template

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

Up2017-Particles-Effect-Template

前言

这是一个模仿 UP2017腾讯互动娱乐年度发布会 - 腾讯互动娱乐 的页面模板

使用 React + Typescript + ThreeJs 制作

项目解析 + 实现过程

https://blog.shiinafan.top/posts/%E5%9F%BA%E4%BA%8EThreeJs%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%BD%91%E9%A1%B53D%E7%B2%92%E5%AD%90%E6%95%88%E6%9E%9C%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/

使用本项目

克隆到本地

git clone https://github.com/QingXia-Ela/Up2017-Particles-Effect-Template.git
cd Up2017-Particles-Effect-Template
npm install

启动项目

npm run dev

基本体验

启动 dev 后就可以看到如下基本界面:

左侧部分是场景部分的 api,右侧是可变化的模型选择

核心使用部分位于 src/pages/IndexPage/index.tsx

项目核心部分

位于 src/THREE 下的 index.ts 文件是本项目的核心库,配套的部分声明文件在 src/declare/THREE/index.ts 下,常量文件在 src/constant/THREE

使用核心

模型列表

import { ParticleModelProps } from '@/declare/THREE'

const Models: ParticleModelProps[] = [
  // Your Code...
]

export default Models

组件内使用

import ParticleSystem from '@/THREE'

let hasInit = false
function IndexPage() {
  const wrapper = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
    if (!hasInit) {
      hasInit = true
      let MainParticle = new ParticleSystem({
        CanvasWrapper: wrapper.current,
        Models,
        onModelsFinishedLoad: (point) => {
          MainParticle?.ListenMouseMove()
        }
      })
    }
  })

  return (
    <div className={Styles.index_page}>
      <div className={Styles.canvas_wrapper} ref={wrapper}></div>
    </div>
  )
}

核心粒子实例 api

举例使用

const m = new ParticleSystem({
    // ...
})

// 改变模型
m.ChangeModel('111', 2000)

constructor

接受一个对象,对象内参数如下:

参数名 类型 备注
CanvasWrapper HTMLDivElement 需要将 canvas 插入到内部的目标元素
Models ParticleModelProps[] 模型列表
addons (可选) addons,他应该是一个继承了 addonsBasic 类的对象
AnimateDuration number (可选) 粒子动画时间,默认 1500
onModelsFinishedLoad Function (可选) 所有模型加载完成的回调
LoadingManager THREE.LoadingManager (可选) 加载管理器,会被放入默认加载器进行处理

详细内容可以查看源码

ChangeModel

改变当前展示的模型

参数名 类型 备注
name string 要切换的模型名字,如果指定名字的模型不存在则会抛出警告
time number (可选) 动画执行时长,实际表演时长为 time * 2

time * 2 的具体原因可以查看:https://tgideas.qq.com/gicp/news/475/6515254.html?from=list 切换动画 部分

ListenMouseMove

开始监听鼠标移动的钩子,不接受参数,调用后场景会随着鼠标移动产生一个重力感的微小移动

StopListenMouseMove

停止监听鼠标移动的钩子,不接受参数

AlignCameraCenter

使场景归中,默认归中时是带有重力感的归中方式

参数名 类型 备注
immediately boolean 立即归中,默认为 false,启用后场景将立刻归中而不会带着富有重力感的移动模式

ParticleModelProps 的配置使用

ParticleModelProps 对象参数如下:

参数名 类型 备注
name string 模型名字
geometry (二选一) THREE.BufferGeometry 自定义几何体,需要拥有 position attributes
path (二选一) string 模型路径,内部使用 OBJLoader 进行加载
loader (可选) CustomLoader 自定义加载器,内容需自行前往 ts 声明文件查看
NeedRemoveDuplicateParticle (可选) boolean 是否需要进行粒子去重,默认为 true
onLoadComplete (可选) Function 模型加载完成后的回调
onEnterStart (可选) Function 开始进入该模型时触发的回调
onEnterEnd (可选) Function 模型切换完成时触发的回调
onAnimationFrameUpdate (可选) Function 动画帧更新时的回调

详细内容可以前往 src/declare/THREE/index.ts 查看

其中 geometrypath 是二选一必填项。

关于 addons

这个制作的目标是解决氛围粒子的问题,由于本人 ts使用不熟练所以暂时用 any[] 进行替代,它原本应该是一个继承了 addonsBasic 的子类对象。

使用方法

此处使用的例子是本模板自行编写的氛围例子

import { addonsBasic } from '../declare/THREE/addons'
class AtmosphereParticle extends addonsBasic {
    constructor() {
        super()
        // ...
    }
    
    update() {
        
    }
    
    ChangeModel() {
        
    }
}

const a = new AtmosphereParticle({
    // ...
})

// 使用
const m = new ParticleSystem({
    // ...
    addons: [a]
})

addonsBasic 下有两个函数钩子比较重要:

  1. update() 当每一帧更新的时候调用的钩子
  2. ChangeModel() 模型改变时触发的钩子

License

MIT License

MIT License Copyright (c) 2022-present QingXia-Ela Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Up2017-Particles-Effect-Template 粒子效果模板 expand collapse
TypeScript and 6 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/shiinafan/Up2017-Particles-Effect-Template.git
git@gitee.com:shiinafan/Up2017-Particles-Effect-Template.git
shiinafan
Up2017-Particles-Effect-Template
Up2017-Particles-Effect-Template
main

Search

344bd9b3 5694891 D2dac590 5694891