夯到拉演示器:可能是全网第一个 3D 分层排行榜生成器(Three.js 全 3D 拖拽)

夯到拉排名系统开发[可运行源码] 本文详细记录了从零开发“夯到拉”垂直排名系统网页的全过程,包括需求分析、技术选型、核心功能实现及优化方案。系统支持图片上传、拖拽排序功能,包含五个等级(夯、顶级、人上人、NPC、拉)的垂直展示,每个等级具有独特的背景色和交互逻辑。技术栈采用HTML5拖放API、Tailwind CSS和原生JavaScript,实现了轻量高效的解决方案。文章还分享了开发中遇到的典型问题(如图片丢失、拖拽反馈不明显)及其解决方案,并提出了后续优化方向(如本地存储、批量操作)。项目体现了从需求拆解到最终落地的完整开发流程,为类似排名系统的开发提供了参考。 立即下载

GitHub 上 2D 的 Tier List(分层排行榜)生成器一抓一大把,3D 的——一个没有。
于是我花了点时间,用 Three.js + GSAP 写了一个:夯到拉演示器,把「排行榜」从平面表格搬进了全息机舱。拖拽卡牌,把万物按「夯 → 拉」排位,液压锁止、火花拖尾、扫光平台,全程 60 帧的 3D 仪式感。项目已开源,欢迎 Star:https://github.com/enixz/3d-tier-list## 免安装,直接用- 在线体验:https://enixz.github.io/3d-tier-list/ ——三个版本全部在线直跑- 便携版:去 Releases 下载 hangdaola-portable.zip,解压后双击 HTML 文件即玩,无需 Node、无需服务器便携版包含三个文件:- 夯到拉-全息领奖台.html —— 全息领奖台(单文件,Three.js 走 CDN)- 夯到拉-3D.html —— 3D 版(单文件,全部资源内嵌)- 夯到拉-2D.html —— 2D 版(单文件,零依赖)三个版本卡牌数据互通,存档保存在浏览器本地。## 全息领奖台 · HOLO TIER TOWER排行榜的终极形态——五层圆柱霓虹塔。卡牌沿盘沿悬浮站立,LED 点阵跑马灯环绕段位,塔顶王冠金光直射,拖到哪个盘、哪个盘发光。全息领奖台导入图片、注入文本、双击翻转铭牌、粉碎回收、存档读档、一键捕获——主程序有的,它全都有。## 实拍画面一套数据,五种界面:全息领奖台 + 3D / 2D 各两套皮肤,卡牌库存实时共享。3D 版 · 重装机械 MECH:3D 版 · 重装机械皮肤3D 版 · 全息赛博 CYBER:3D 版 · 全息赛博皮肤2D 版 · 纸墨榜单:2D 版 · 纸墨皮肤2D 版 · 白色未来:2D 版 · 白色未来皮肤## 为什么是「夯到拉」?- 卡牌即数据:上传图片或输入文本,瞬间铸成悬浮金属卡牌;双击翻转到铭牌背面- 全 3D 拖拽:在三维空间里抓起卡牌,拖过平台时火花拖尾随行,松手即液压锁止归位- 层级自定义:「夯 / 顶级 / 人上人 / NPC / 拉」五层默认段位,标签随意改名,层级平台扫光待命- 五种界面:全息领奖台 + 3D 版双皮肤(重装机械 ⇄ 全息赛博)+ 2D 版双皮肤(纸墨榜单 ⇄ 白色未来),一键切换,卡牌数据实时共享- 本地数据库:进度随时存档 / 读档,关掉浏览器也不丢- 一键捕获:截取当前 3D 画面导出图片,直接发群晒榜## 交互一览| 操作 | 效果 || — | — || 悬停平台 | 触发扫光波 || 悬停卡牌 | 悬浮 + 旋转展示 || 拖拽卡牌 | 火花粒子尾迹 || 松手放置 | 液压锁止 + 光束定格 || 双击卡牌 | 翻转至铭牌背面 || 拖至右下回收区 | 粉碎删除 || 视角锁定 OFF | 自由环绕观察重装矩阵 |## 技术栈- Three.js:WebGL 场景、卡牌 / 平台建模、粒子特效、UnrealBloom 泛光后期- GSAP:全部补间动画——拖拽吸附、锁止回弹、翻转、入场- html2canvas:画面捕获导出- Vite:构建与开发服务器- 零后端,纯前端,所有数据存在浏览器本地## 快速开始bashnpm installnpm run dev # 开发预览npm run build # 构建到 dist/npm run preview # 本地预览构建产物项目结构也很直白:├── index.html # 3D 版入口├── holo-tower.html # 全息领奖台(单文件,Three.js 走 CDN)├── 夯到拉-2D.html # 2D 版(单文件,零依赖)├── main.js # Three.js 场景 + 全部交互逻辑├── style.css # 重装机械皮肤├── cyber.css # 全息赛博皮肤└── vite.config.js—如果这个项目让你眼前一亮,去 GitHub 点个 Star 就是最大的肯定:https://github.com/enixz/3d-tier-list

夯到拉垂直排名系统[源码] 夯到拉垂直排名系统是一个基于拖拽操作的图片排名工具,用户可以通过上传图片并拖拽到不同等级区域进行分类和排序。系统支持跨等级调整图片位置,提供清晰的等级划分(如“顶级”、“人上人”、“NPC”等),并允许用户上传JPG、PNG、GIF格式的图片(单张不超过5MB)。操作简单直观,包括从图片库拖拽图片到等级行、调整已放置图片的位置以及删除图片等功能。此外,系统还提供了使用帮助和清空所有数据的选项,方便用户快速上手和管理内容。 立即下载

相关推荐

别再只调颜色阈值了!优化K210色块追踪性能的5个关键参数与实战技巧

本文深入探讨了K210色块追踪性能优化的五大核心策略,包括图像预处理参数精细调控、find_blobs参数进阶配置、运动控制算法升级、硬件时序优化以及可视化调试系统构建。通过实战技巧和参数调整方法,帮助开发者提升K210在色块追踪项目中的识别稳定性和响应速度,适用于云台追踪等应用场景。

weixin_42531588的博客 222

从夯到拉排名

从夯到拉排名HTML

qq_42726819的博客 2132

Flink CDC 1.18.1 Oracle 数据同步到postgresql

8、修改Flink的配置文件,主要是各种服务的绑定地址,默认为localhost,统统改为0.0.0.0,如:rest.address: 0.0.0.0 #localhost。将flink-sql-connector-oracle-cdc-3.0.1.jar复制到flink-1.18.1/lib目录中。6、下载 flink-connector-jdbc-3.1.1-1.17.jar,postgresql-42.7.3.jar。7、安装postgresql就不说了,相信你已经有了数据库了。

ynzhangyao的专栏 1794

快速生成你的“从夯到拉”排行榜 · 语雀

摘要:本文介绍了一款便捷的网页工具,用于快速生成“从夯到拉”风格的排行榜图。该工具支持自定义5级分类标签(如夯/顶级/人上人/NPC/拉完了),允许用户通过拖拽本地图片进行纯前端操作,无需上传云端。提供行列管理、颜色调整和PNG导出功能,适用于游戏强度分析、数码产品对比等场景。工具完全免费,保障隐私安全,满足社交平台分享需求。访问地址:https://www.tooladd.com/auth/tier-list-maker (96字)

丘秋的博客 1526

Blender----利用DEM(tif)生成三维模型

利用DEM(tif)生成三维模型

LongJ_Sir的博客 5414

Geneformer实战:如何用Hugging Face Transformers快速搭建单细胞转录组分类模型

本文详细介绍了如何使用Geneformer和Hugging Face Transformers快速搭建单细胞转录组分类模型。通过环境准备、数据预处理、模型加载与配置、训练Pipeline构建等步骤,帮助读者掌握基于Transformer架构的单细胞数据分析技术,提升分类准确率和效率。

rl6adventurer的博客 601

2025 前端技术全景图:从“夯”到“拉”排行榜

2025年前端技术趋势速览:TailwindCSS、Vite和TypeScript成为主流,Vue3和React仍是框架双雄。AI驱动开发崛起,传统工具如jQuery和Webpack逐渐退出舞台。技术评价维度聚焦实用性、生态成熟度、学习成本和稳定性。国内开发者需掌握Vue3+Pinia,国际方向建议React+Next.js。性能赛道推荐Three.js和WebAssembly,包管理首选pnpm。核心建议:拥抱AI辅助开发,掌握TS+Vite+Tailwind组合,放弃过时技术栈。

Hu560231的博客 3321

STM32F429网络通信避坑指南:用CubeMX搞定LAN8720+LWIP+FreeRTOS(附完整代码)

本文详细介绍了STM32F429通过CubeMX配置LAN8720+LWIP+FreeRTOS实现网络通信的避坑指南,涵盖硬件连接、CubeMX配置、LWIP优化及调试技巧,提供完整代码和实战经验,帮助开发者高效解决以太网通信中的常见问题。

weixin_26873711的博客 140

从夯到拉排行网页制作

本文详细记录了开发「夯到拉」垂直排名系统网页的全过程。该系统提供5个等级(夯、顶级、人上人、NPC、拉)的垂直排名展示,支持图片上传和拖拽排序功能。开发采用HTML5、TailwindCSS和原生JavaScript技术栈,重点解决了拖拽交互、图片管理、视觉呈现等技术难点。最终实现了一个直观易用的排名系统,支持图片上传、等级拖放、跨级调整和删除操作。文章还总结了开发心得,并提出了图片压缩、数据保存等后续优化方向。

Ghost_wky的博客 6960

[Dify] HTTP 请求节点总是调不通?先把请求头、参数、变量和返回 JSON 拆开查

这篇文章围绕 Dify HTTP 请求节点调不通、接口能通但流程不稳定、返回 JSON 后续节点读不到等问题展开,从 Method、URL、Header、Body、变量映射和返回字段提取几个角度梳理排查顺序。适合正在把 Dify Workflow 接入企业微信、CRM、工单系统或内部接口的读者阅读,帮助你把接口调用从一次性跑通推进到可复用、可验证的业务流程。

技术小甜甜:传播可落地技术,帮助个人和企业降低解决真实场景问题的成本 3932

在 SAP GUI Editor 中使用 OpenAI 自动生成 ABAP 代码 —— 技术实践与思考

在传统 SAP GUI Editor 场景下融入OpenAI开发者表达意图,模型负责实现。随着的持续演进,以及Joule等官方 Copilot 的加入,未来 ABAP 开发形态必将更加专注业务逻辑与架构设计,而把样板式编码交给 AI 自动完成。现在就动手试试,让你的下一段 ABAP 由 AI 来书写吧!

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 696

2025年10月12日全球AI前沿动态

技术上,斯坦福ACE框架、华盛顿LLMc压缩技术突破,蚂蚁万亿模型、vivo端侧模型及快手编程/游戏模型表现优异;企业方面,OpenAI年算力支出70亿,苹果收购Prompt AI,滴滴自动驾驶获20亿融资。应用覆盖医疗LEADS模型、滴滴L4无人车、游戏AI增长。安全存250份文档投毒风险,陶哲轩借GPT-5解题,AI伦理与隐私争议持续。

ld326的专栏 2323

C# 工业视觉性能极致优化:多线程推理池 + 对象复用 + 批量检测,速度提升 10 倍实战

set;} // 输入图像set;} // 异步返回结果set;} // 用于监控延迟性能优化不是魔法,而是对资源生命周期的精细管理和对硬件特性的充分利用。多线程池解决了 CPU/GPU 闲置问题。对象池解决了 GC 停顿问题。零拷贝解决了总线带宽瓶颈。严格的 Dispose解决了内存泄漏问题。这套架构已在多个高速锂电、3C 电子检测产线落地,轻松应对 200ms 甚至 50ms 的严苛节拍。记住,在工业领域,稳定性与速度同等重要。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 289

从夯到拉模拟器RankPix windows本地版 exe

“从夯到拉”是中文语境中一种趣味性分级排行表达,从“夯”(最强)至“拉”(最差)分层评价。支持自定义等级名称、颜色与图片素材,通过拖拽实现排序,可生成游戏、影视、动漫、美食等个性化榜单,操作简单,适合社交分享。提供在线模拟器及本地软件下载,支持保存模板与图片预览,兼具创意与实用性。

u010093380的博客 224

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

一张户型图变成 3D 房:Blender 5.2 对话建模收官战

本文以一张真实户型图(星海142,三室两厅)为蓝本,全程通过对话指令在Blender 5.2中实现从0到3D房的自动化建模。结合界面操作、MCP对话建模与Python逻辑理解,仅用一问一答完成毛坯墙构建、尺寸链校验、AI俯视自查、门窗地板精装及家具组合,最终生成可交互、可渲染的完整3D住宅模型,验证了“数据驱动+智能反馈”在高效建模中的强大潜力。

算法工程师 185

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

视界原理之3D视频(三):解码和显示

3D 解码负责恢复左右视图,3D 显示负责正确分眼;真正的播放器稳定性来自时间戳、视图顺序、纹理采样、设备分光和字幕 UI 深度的一致处理。

FlightYe的专栏 329

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

UniDex-VLA:用人类第一视角视频,训出能跨 8 种灵巧手的 3D VLA

论文提出“灵巧手基础模型”的系统性创新:通过人类视频→多手型机器人轨迹的可扩展数据管线,构建首个大规模、多手型、全模态的UniDex-Dataset;设计FAAS统一动作空间,实现跨手零样本迁移;结合UniDex-VLA与人机共训(UniDex-Cap),以2:1兑换率降低真实数据成本。核心贡献在于数据生成系统与动作语义对齐机制,推动灵巧操作从“单手专用”迈向“通用可迁移”。

HETUW的博客 112

大角几何生图视图配置教程:输出尺寸、色彩字号规范与 3D 相机约束

本文介绍如何通过四类配置(几何工程、风格母版、视图参数、导出参数)统一管理平面与立体图形的生成与输出,确保题图在题库卡片与讲义中保持清晰、一致的视觉效果。重点包括:使用母版统一线型、色彩与字号;通过视图参数固定构图范围;利用导出模式(view/contain/size)适配不同场景;并强调配置保存与验收流程,实现多场景复用与高质量交付。

github_25505453的博客 276

【3D SLAM源码解读系列】(五) OpenKarto 源码解析:SLAM Toolbox 的二维 SLAM 核心

本文以 slam_toolbox 维护的 Karto 实现为对象,沿扫描匹配、回环检测、位姿图优化与地图生成四条链路对照核心公式和源码,并补充了参数配置与 launch 启动方式。

m0_73800387的博客 329

NeurIPS 2026 | DarkVGGT:黑暗场景3D重建新思路,RGB × 热成像联合感知

DarkVGGT: Seeing Through Darkness Using Thermal Geometry without Daylight Tax

陈嘿萌的博客 504

端侧高斯泼溅(3DGS)渲染与性能调优初探:把“实景重建“跑在手机上【鸿蒙心迹】

端侧3D Gaussian Splatting受算力、带宽、显存、功耗制约,本文梳理渲染链路与核心机制,提供native渲染骨架代码,并总结5条调优实战策略:控量裁剪、分块LOD、半精度存储、异步加载、温控降帧,结合超分联动省带宽。强调“先稳帧率,再提画质”,助力鸿蒙空间计算中3DGS高效落地。

wdracky的专栏 183

【论文解读】DMH-Net:用深度曼哈顿霍夫变换从全景立方图估计3D房间布局

想象一个空房间,把所有面都去掉,只剩下棱┌─────────────┐ ← 墙与天花板的交界线/│ /│/ │ / │ ← 墙与墙的交界线(竖直)│ │ │ ││ / │ /└─┘───────────┘ ← 墙与地板的交界线论文的房间线框只有三类线线类型是什么在 3D 空间中的方向墙-天花板交界线​墙顶那条边水平,在天花板平面上墙-地板交界线​墙脚那条边水平,在地板平面上墙-墙交界线​两面墙相交的竖棱竖直​为什么用线框?​ 论文给的动机很有说服力:人类感知 3D 世界时,靠的是。

拜小白的成长之路,告别小白 351

3D商城虚拟商品怎么落地:2000个SKU的建模与加载方案?

2026年构建2000个SKU的浏览器三维货架,核心挑战已从渲染能力转向资源控制与数据可归因。关键在于:统一glTF2.0/GLB格式,几何用Meshopt压缩,贴图采用KTX2+BasisU;首屏预算严格控在1.8秒内,分段拆解为500毫秒主包、300毫秒引擎初始化、800毫秒首块加载;场景按2–4兆分块,视锥预加载;埋点固定六类(曝光、旋转、材质切换、AR摆放、加购、退出),绑定SKU主键与坐标,支持批量上报;移动端按三档设备分级,实现低模+静态贴图、全景热点、图片序列三级降级;通过入库校验与灰度验证,

Jmyd0123的博客 276

AI 时代做 3D 场景的完整认知地图

Tripo 造零件,Blender 修零件,引擎让零件动起来,CAD 只提供尺寸读数,大模型负责指挥这一整套流程。先定交付形态,再选工具;先让一个三角形动起来,再往里填东西。最后一句提醒尤为重要,它也是新手最容易犯的顺序错误。许多人第一步就用 AI 生成一个超精细城市塞进网页,卡死后便得出 AI 不行的结论。其实并非 AI 能力不足,而是管线顺序错了。如果要动手,建议的学习顺序是:先不碰 3D,用二维框架做一个方块能跳、能捡金币的小程序,先把玩法循环做出来;

gz927cool的博客 130

起源引擎中3d笔刷

1. 材质贴图 (Texture / Material,.vmt) ➔ 相当于贴在表面的“花纹壁纸”(如木纹、铁皮、玻璃)当 VBSP 编译器打包地图时,看到方块刷了这种贴图,就会自动将其渲染成游戏内隐形,只保留碰撞与触发判定。3. 实体属性 (Entity,Ctrl + T) ➔ 相当于赋予它行为代码的“功能大脑”(能开门、会爆炸、能打碎)2. 笔刷几何体 (Brush / Solid) ➔ 相当于三维空间里实心的“水泥方块”(长、宽、高)在 99% 的情况下,贴图只是装饰。在起源引擎中,一个物体由。

爱CV 203

3D双目相机 vs 面阵激光雷达:机器人的“眼睛“到底怎么选?

需要理解与识别,给机器人一双双目;需要安全与测量,给它一副闪光雷达;而真正聪明的机器人,通常两个都要。

巽视达的专栏 315
上一篇: ERNIE-Image 本地ComfyUI部署指南+补丁
rhineheart
博客等级 码龄21年 0粉丝 2原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值