1 Star 4 Fork 3

刘宏斌 / kmyc

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

csdn描述 : https://blog.csdn.net/printf_hello/article/details/124298090

在这里插入图片描述

在这里插入图片描述

体验地址

https://kmyc.hongbin.xyz/

操作说明 视频

[video(video-Adb1HYXP-1650438180437)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=637840631)(image-https://img-blog.csdnimg.cn/img_convert/2ad87adc9cf4debf237e52bd14b70446.png)(title-操作说明)]

我做了哪些(功能)
  • 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 上第一次战役动画模仿完毕 进度条还没走完

Repository Comments ( 0 )

Sign in to post a comment

About

使用react和Three.js开发抗美援朝战役3D数据可视化。 expand collapse
TypeScript and 5 more languages
MulanPSL-2.0
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
TypeScript
1
https://gitee.com/honbingitee/kmyc.git
git@gitee.com:honbingitee/kmyc.git
honbingitee
kmyc
kmyc
development

Search

101014 b92fc32e 1850385 101014 af024cb7 1850385