# kmyc

**Repository Path**: coding-365/kmyc

## Basic Information

- **Project Name**: kmyc
- **Description**: 使用react和Three.js开发抗美援朝战役3D数据可视化。
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: development
- **Homepage**: https://kmyc.hongbin.xyz
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 29
- **Created**: 2023-06-19
- **Last Updated**: 2023-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 **three.js 抗美援朝数据可视化** 

![输入图片说明](ad3bd792893a4dbeb71e060dd4b318f1.png)
![输入图片说明](public/85b017beb2b64b6f85d39f89e9a950c0.png)
##### 体验地址
[https://kmyc.hongbin.xyz/](https://kmyc.hongbin.xyz/)
##### [操作说明 视频](https://www.bilibili.com/video/BV1kY4y1v78z/?spm_id_from=333.999.0.0&vd_source=e9fc567208694397ececfe4a90e27f46)

##### 我做了哪些（功能）
-  draco解析glb模型 同时处理部分纹理请求 减轻一次加载纹理压力
- 手动控制轨道控制器镜头动画 
- 多音频拼接 控制
- 封装动画播放器 控制进度切换 
- 动画进度控制器 同步音频 模拟视频体验
- useContext状态共享
- 自定义多级右键菜单 模拟原生菜单体验
- 空闲时间加载后续用到的模型
- 模型纹理&位置动态切换
- echart图表使用
- 浏览器自适应单位vw vmax使用(大面积使用)
- 兼容移动端手机浏览
- 模型的销毁和动画加载
- useRef暴露方法多方调用(大量使用)
- css-in-js 方案实践 css引擎styled-component
- 未完成请求避免产生影响
- 未执行计数器清理 字幕播放中 镜头切换动画执行中切换 后续的功能等
- 点击不同模型产生不同效果 点击的事件监听 鼠标hover的样式
- ...

##### 局限
- 性能拉垮 考虑到诸多原因 未采用按需渲染在低配机上帧率大概只有30帧左右
- 模型做的不精细-第一次建模
- 在手机或者高刷设备上动画模型播放渲染速度与60帧设备不一致 可加入时间帧解决


> TODO:
>
> - ~~战役动画时 面板贴边~~
> - ~~战役播放字幕 --音效~~
> - ~~自适应图标 字幕等元素 resize 时自动处理~~
> - 汉城和首尔市一个城市
> - 战役模型 3 进攻路线 太同步死板
> - 战役模型 4 播放太快了 而且日期使用了中文句号
> - ~~播放战役时 图标推出~~
> - ~~播放战役同时播放弹幕有卡顿~~
> - ~~增加回到主页按钮~~

2022-02-21

> - 移动端右上角图标部分浏览器右侧超出屏幕
> - ~~每次战役加入建模战斗数据~~
> - ~~加入背景音乐~~
> - ~~修改当前加载动画--翻开历史书形式 同时加载数据~~
> - 加入模块: 战斗概述
> - 图标加入展示敌我投入力量对比
> - ~~mousemove 事件加入截流 减少计算~~

2022-02-23

> - 在需要的时候调用 controls.update 减少卡顿
> - safari 浏览器 按钮动画 伪元素 transform 动画超出 overflow:hidden 范围

2022-02-28

> - 在需要的时候调用 controls.update 减少卡顿
> - 战役素材少，每场战役中的战斗有地点标注 点击出现相关事件意义 照片 可取自 跨过鸭绿江电视剧

2022-03-1

> - 击毁武器表 改成 双方伤亡对比 目前未查询到权威且详细数据

2022-03-2

> - 按钮单位改用 vmax 或 媒体查询大屏显示器
> - ~~大屏设备 echart 图标 title 距离左侧显得近~~
> - ~~概述文字 卡顿 尝试优化 减少 dom 绘制~~
> - 地图背景颜色在 window 上不明显
> - 播放动画前讲解当前局势
> - ~~进军进度 箭头点击事件 触发显式事件~~

2022 - 03 -10

> - ~~模型优化~~
> - ~~模型动画减速~~
> - window 颜色显示统一

2022-03-12

> - ~~requestAnimationFrame 计算当前帧和建模动画帧对比达到某点切换视野 替代计时器~~ ---- 宣告破产
>
> * ~~尝试 动画的 reset 方法能否解决每次删除添加动画模型~~ - 不能

2022-03-13

> - 探索动画使用方式放在一起使用会不会对性能有提高

2022-03-19

> - 根据新模型重新制定视野位置
> - 需要 hover 的模型才动画交互
> - ~~箭头信息需跟新模型适配~~
> - 屏蔽右键菜单 右键自定义菜单 快捷功能按钮如 停止播放 停止音乐 描述信息 等
> - ~~动画节点 添加控制面板 点击切换动画进度~~

2022-03-21

> - ~~大屏幕 图表中字体太小~~
> - ~~动画进度音频进度同步~~

2022-03-30

> - ~~背景音乐 分成两段 军号声只播放一遍 剩余部分循环~~
> - ~~进度条控制讲解音频准确定位 放弃采用百分比模糊计算~~ > ~~点击进度条播放 播放方式和第一次观看动画行为一致 停止自动旋转 。。。~~

2022-04-01

> - 提升动画最后几帧模型的稳定性 快速滑动可能最后帧的模型不会.play()方法
> - 再次尝试取消逐帧渲染 提升性能 - 整不了 😄 动画要播放每一帧都要更新 hover 箭头要动 也要一直调用 烦 😡
> - 再次修改 window 配色
> - 在 window 上调试

2022-04-08

> - ~~进度条播放状态拖动进度后无法顺利播放讲解音频~~
>
> - ~~window 上第一次战役动画模仿完毕 进度条还没走完~~