- 博客(23)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 通过2d拖拽生成3D场景【底下负一楼停车场，分2个进出口】
通过2d拖拽的数据生成3d地下停车场，最终成果可在http://jstopo.top查看。
2025-06-18 17:05:30
171
原创 2d拖拽生成复杂的3d可视化机房Threejs
摘要：文章展示了基于2D拖拽生成平面图并转换为3D可视化机房的技术案例，通过JavaScript Canvas实现。核心代码片段演示了初始化2D画布环境的过程，包括设置宽高、获取绘图上下文、绘制辅助线及从本地存储加载模型数据等操作。案例网站jstopo.top提供了完整的实现效果，体现了前端技术在机房可视化领域的应用。该方案通过简单的拖拽交互即可生成专业级机房布局图，并支持2D/3D视图切换，为机房规划设计提供了高效的工具。
2025-06-03 16:03:33
106
原创 2d拖拽生成3d机房可视化，通过模型闪烁设备告警
摘要：基于Three.js实现的机房设备3D可视化系统，采用透视投影相机(28度视角)构建三维场景，支持OrbitControls轨道控制器交互操作。关键功能包括：1) 可调整的相机参数设置；2) 辅助坐标系显示；3) 动态标签更新；4) 自适应渲染区域尺寸。系统提供http://jstopo.top在线预览，通过WebGLRenderer实现流畅渲染，并利用requestAnimationFrame持续更新场景。代码展示了相机定位(0,100,120)、场景初始化及渲染循环的实现细节，为设备监控提供直观的
2025-06-03 15:54:40
342
原创 树形拓扑，treeData数据结构动态生成拓扑canvas2d模式绘制
【代码】树形拓扑，treeData数据结构动态生成拓扑canvas2d模式绘制。
2024-12-03 10:44:10
254
1
原创 js绘制机房拓扑可视化配置，端口，IP地址，设备在线状态，多种连线方式
【代码】js绘制机房拓扑可视化配置，端口，IP地址，设备在线状态，多种连线方式。
2024-03-01 10:07:27
609
1
原创 【可视化大屏-3d机房监控】Vue与three.js搭建可视化机房监控
演示网址：http://jstopo.top。
2024-01-10 15:21:15
1983
原创 jsTopo,Vuetopo纯代码绘制canvas可配置缩放拓扑图带电流动画(伪3d冷通道配置)
【代码】jsTopo,Vuetopo纯代码绘制canvas可配置缩放拓扑图带电流动画(伪3d冷通道配置)
2023-07-28 10:12:33
1212
3
原创 threejs 3d网络设备拓扑图绘制示例
展示网站：http://jstopo.top 模型上方图标贴图。技能点：threejs,Vue,canvas,几何数学。canvas文字贴图。
2023-02-20 10:51:52
3572
原创 电厂运煤与供电canvasHTML5动效，PC端与H5手机端，jstopo.top
网站地址：http://jstopo.top/coal/采用高德地图的json数据。动画需要requestAnimateFrame（）；然后用clearRect清除之前画布。再重新绘制新的数据。先预加载图标信息，储存到全局变量。定义一个绘制的function drawMoveFrame();...
2021-07-01 17:02:46
195
原创 uniapp版pc端easyTopo拖拽生成拓扑版本，重新纯JS绘制，可自定义图标
easyTopo1.2.3可拖拽生成拓扑图操作手册：（基于 uni-app，uniCloud 的 admin 管理项目模板。）本人微信号：jays611（如有插件问题及时反馈）web版展示地址：http://jstopo.top/ups/#/grid/gridMax【vue原生页面版本】uniapp版：用户名：admin 密码：123456网站实例：https://static-8e60622e-007d-44eb-a48f-3ad0c830810e.bspapp.com/topo/#/pa
2021-06-16 09:06:26
840
1
原创 easyEcharts3.5移动端echarts，折线，雷达，柱状，地图，饼图，温度计，水球纯js绘制canvas渲染
pc端实例：http://jstopo.top 网站本人微信号：jays611easyEcharts又称简易echarts（本人针对uniapp 的canvas纯JS源码绘制，如出现bug可以及时在论坛或联系微信，会及时修改。更新时间：2021-05-15 16:29性能优越！不依赖任何JS包，让使用者可以自行查看分析原理，修改源码！）0.new 雷达图参数实例：let grid = { x: dom.width/2,//占总canvas标签元素的宽度一半 y: dom.heig...
2021-06-02 14:31:22
1446
原创 在Vue中集成百度离线地图，需要下载离线地图瓦楞png图片
在Vue中集成百度离线地图http://jstopo.top/jsTopo/#/about
2021-05-26 10:42:38
214
原创 三株水稻，致敬 “ 杂交水稻之父 ” 院士爷爷
三株水稻，致敬 “ 杂交水稻之父 ” 院士 袁隆平爷爷。通过二次贝塞尔曲线quadraticCurveTo绘制稻穗的果实与稻穗梗，水稻绿叶渐变色createLinearGradient。展示网站：http://jstopo.top/easy/#/
2021-05-25 14:03:25
210
原创 jsTopo发布topo3.6版本，优化拖拽和连线，加上缩放功能更新时间2021-05-20
topo4.0版本缩放+拖拽因前一版本的缺陷，这一版本加上缩放并可拖拽。展示网址：https://jstopo.top
2021-05-20 15:19:42
513
原创 jstopo.top由canvas原生绘制的拓扑工具
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-12-15 11:36:33
888
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人