一键在 Manus 中运行任何 Skill

3d-shape-captcha

星标21

分支1

更新时间2026年5月9日 11:46

基于 Three.js 实时渲染的 3D 几何体验证码系统，支持软阴影和 Raycaster 点击交互。后端生成 6 个大小严格互不相同的 3D 几何体元数据（位置、旋转、缩放、颜色、类型），前端使用多光源布光和正交相机实现公平大小比较。适用于实现或修改基于点击的 3D 几何体验证码，或将图形验证码集成到邮件验证码发送等敏感操作中。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

LSTM-Kirigaya

LSTM-Kirigaya/jinhui-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

3D Shape CAPTCHA

A click-based geometric CAPTCHA system with real-time 3D rendering, multi-light shadows, and proportional scale generation guaranteeing 6 unique sizes.

Architecture

Backend (Go)          Frontend (Vue3 + Three.js)
    |                         |
Generate 6 shape         Render WebGL scene
metadata (no PNG)        with shadows
    |                         |
Store in Redis  <---  Raycaster click
    |               detects object
Validate shapeIndex       |
    |                         |
Issue token  --------->  Success

Backend generates scene metadata only. Frontend renders the actual 3D scene with Three.js. User clicks are validated by object index, not pixel coordinates.

Backend Implementation

Core Files

assets/backend-captcha.go — Complete Go implementation (captcha generation + verification)
references/backend-api.md — API specification, data models, Redis schema, scale algorithm

Key Design Decisions

No PNG rendering — Backend returns JSON metadata; frontend handles all visuals
Proportional scale — 6 shapes generated from a scale [0.55, 1.30] with equal-interval base values plus ±0.03 jitter. Base interval (0.15) > 2× jitter range (0.06) mathematically guarantees all 6 scales are unique
Grid layout — 2×3 grid with ±0.4 random offset within each cell prevents overlap
Volume comparison — Uses scale³ as uniform metric regardless of shape type

Redis Schema

Key	Value	TTL
`captcha:{id}`	JSON: `{targetIndex, shapes[], prompt, targetShape}`	5 min
`captcha_token:{token}`	`"1"`	5 min

Integration Points

POST /api/captcha/generate — Returns 6 shape metadata
POST /api/captcha/verify — Receives {captchaId, shapeIndex}, returns token on success
ValidateCaptchaToken(redis, token) — Utility for other controllers (e.g. email verification)

Frontend Implementation

Core Files

assets/CaptchaDialog.vue — Complete Vue3 component with Three.js scene
assets/api-index.js — API client functions
references/frontend-integration.md — Scene setup, lighting config, raycaster, responsive CSS

Three.js Scene Setup

Component	Configuration
Renderer	WebGLRenderer, antialias, shadowMap enabled, PCFSoftShadowMap
Camera	OrthographicCamera (frustumSize=7.5), position (8,8,8), lookAt (0,0.5,0)
Lights	Ambient(0.35) + Hemisphere(0.4) + Directional(1.4, casts shadow) + Fill(0.25) + Rim Point(0.4)
Ground	PlaneGeometry(20,20), MeshStandardMaterial, receiveShadow
Material	MeshStandardMaterial, roughness=0.35, metalness=0.08

Shape Geometry Mapping

`type`	Shape	Three.js Geometry
0	Cube	`BoxGeometry(1,1,1)`
1	Cylinder	`CylinderGeometry(0.5,0.5,1,32)`
2	Triangular prism	`CylinderGeometry(0.5,0.5,1.25,3)`

Triangular prism uses height 1.25 (vs 1.0 for others) for better visual distinction.

Click Interaction

Use THREE.Raycaster to detect clicked mesh. Each mesh stores its index in userData.index. Send this index to backend for verification.

Responsive Design

Desktop: dialog max-width 520px, canvas height 360px
Mobile (<480px): canvas height 260px
Mobile (<360px): canvas height 220px

Workflow: Adding CAPTCHA to Email Verification

Backend: Add captchaToken field to email send request
Backend: Call captcha.ValidateCaptchaToken(redis, token) before sending email
Frontend: Open CaptchaDialog before requesting email code
Frontend: On success event, receive token and include it in email API call

Complete Code References

Backend implementation: assets/backend-captcha.go
Frontend dialog component: assets/CaptchaDialog.vue
API functions: assets/api-index.js
Backend API details: references/backend-api.md
Frontend integration guide: references/frontend-integration.md

同仓库更多 Skills

同仓库

read-arxiv-paper

LSTM-Kirigaya/jinhui-skills

读取 arxiv 论文的 LaTeX 源码并生成结构化中文摘要或中文博客 JSON。当用户给出 arxiv URL（如 https://arxiv.org/abs/2601.07372）并要求阅读、总结、提炼论文观点时，使用默认工作流生成 ./knowledge/summary_{tag}.md；当用户要求生成中文博客、输出 JSON、保留图表并输出到测试工作区时，启用 read-paper 工作流。

2026-07-0321

zhihu-oauth

LSTM-Kirigaya/jinhui-skills

知乎 OAuth 2.0 接入指南。用于帮助开发者完成知乎 Authorization Code 授权流程，包括 APP_ID/APP_KEY 申请、授权页跳转、Token 换取、用户信息获取及社交关系接口调用。适用于 Web 应用第三方登录场景。

2026-06-3021

admin-console-blueprint

LSTM-Kirigaya/jinhui-skills

Use when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from an existing console, adding `/api/admin/*` modules, or converting a one-off internal page into a structured admin system.

2026-06-2121

rn-app-builder

LSTM-Kirigaya/jinhui-skills

基于真实项目沉淀的 React Native 移动端 App 一键构建方案。覆盖 Expo 初始化、monorepo 共享包、鉴权路由、API 适配、主题系统与构建发布。

2026-06-2021

lark-markdown

LSTM-Kirigaya/jinhui-skills

Build and send Feishu (Lark) interactive rich-text cards using lark_md format. Use when the user needs to: (1) construct Feishu card messages with markdown support, (2) send interactive cards via the Feishu Bot API, (3) format text with bold, inline code, lists, tables, or code blocks inside Feishu cards, or (4) convert markdown content into Feishu card elements.

2026-06-2021

tencent-ses-service

LSTM-Kirigaya/jinhui-skills

腾讯云官方的邮件推送 SES 服务使用 skill。涵盖：SMTP 发送邮件所需的全部环境变量、API 接口设计规范、验证码邮件的完整发送流程（含人机验证、频率控制、Redis 存储）。本 skill 以网络协议 / HTTP API 接口级别描述，不绑定具体编程语言。

2026-06-2021

name	3d-shape-captcha
description	基于 Three.js 实时渲染的 3D 几何体验证码系统，支持软阴影和 Raycaster 点击交互。后端生成 6 个大小严格互不相同的 3D 几何体元数据（位置、旋转、缩放、颜色、类型），前端使用多光源布光和正交相机实现公平大小比较。适用于实现或修改基于点击的 3D 几何体验证码，或将图形验证码集成到邮件验证码发送等敏感操作中。
tags	["captcha","3d","three.js","go","vue","security"]
model	deepseek-chat
rootUrl	https://raw.githubusercontent.com/LSTM-Kirigaya/jinhui-skills/main/skills/3d-shape-captcha/SKILL.md
examples	["给邮件验证码发送接口加一个 3D 几何体点击验证码，防止被脚本批量刷接口","把现有图片验证码升级为 Three.js 3D 渲染的几何体识别验证码，增强抗 OCR 能力"]

3D Shape CAPTCHA

A click-based geometric CAPTCHA system with real-time 3D rendering, multi-light shadows, and proportional scale generation guaranteeing 6 unique sizes.

Architecture

Backend (Go)          Frontend (Vue3 + Three.js)
    |                         |
Generate 6 shape         Render WebGL scene
metadata (no PNG)        with shadows
    |                         |
Store in Redis  <---  Raycaster click
    |               detects object
Validate shapeIndex       |
    |                         |
Issue token  --------->  Success

Backend generates scene metadata only. Frontend renders the actual 3D scene with Three.js. User clicks are validated by object index, not pixel coordinates.

Backend Implementation

Core Files

assets/backend-captcha.go — Complete Go implementation (captcha generation + verification)
references/backend-api.md — API specification, data models, Redis schema, scale algorithm

Key Design Decisions

No PNG rendering — Backend returns JSON metadata; frontend handles all visuals
Proportional scale — 6 shapes generated from a scale [0.55, 1.30] with equal-interval base values plus ±0.03 jitter. Base interval (0.15) > 2× jitter range (0.06) mathematically guarantees all 6 scales are unique
Grid layout — 2×3 grid with ±0.4 random offset within each cell prevents overlap
Volume comparison — Uses scale³ as uniform metric regardless of shape type

Redis Schema

Key	Value	TTL
`captcha:{id}`	JSON: `{targetIndex, shapes[], prompt, targetShape}`	5 min
`captcha_token:{token}`	`"1"`	5 min

Integration Points

POST /api/captcha/generate — Returns 6 shape metadata
POST /api/captcha/verify — Receives {captchaId, shapeIndex}, returns token on success
ValidateCaptchaToken(redis, token) — Utility for other controllers (e.g. email verification)

Frontend Implementation

Core Files

assets/CaptchaDialog.vue — Complete Vue3 component with Three.js scene
assets/api-index.js — API client functions
references/frontend-integration.md — Scene setup, lighting config, raycaster, responsive CSS

Three.js Scene Setup

Component	Configuration
Renderer	WebGLRenderer, antialias, shadowMap enabled, PCFSoftShadowMap
Camera	OrthographicCamera (frustumSize=7.5), position (8,8,8), lookAt (0,0.5,0)
Lights	Ambient(0.35) + Hemisphere(0.4) + Directional(1.4, casts shadow) + Fill(0.25) + Rim Point(0.4)
Ground	PlaneGeometry(20,20), MeshStandardMaterial, receiveShadow
Material	MeshStandardMaterial, roughness=0.35, metalness=0.08

Shape Geometry Mapping

`type`	Shape	Three.js Geometry
0	Cube	`BoxGeometry(1,1,1)`
1	Cylinder	`CylinderGeometry(0.5,0.5,1,32)`
2	Triangular prism	`CylinderGeometry(0.5,0.5,1.25,3)`

Triangular prism uses height 1.25 (vs 1.0 for others) for better visual distinction.

Click Interaction

Use THREE.Raycaster to detect clicked mesh. Each mesh stores its index in userData.index. Send this index to backend for verification.

Responsive Design

Desktop: dialog max-width 520px, canvas height 360px
Mobile (<480px): canvas height 260px
Mobile (<360px): canvas height 220px

Workflow: Adding CAPTCHA to Email Verification

Backend: Add captchaToken field to email send request
Backend: Call captcha.ValidateCaptchaToken(redis, token) before sending email
Frontend: Open CaptchaDialog before requesting email code
Frontend: On success event, receive token and include it in email API call

Complete Code References

Backend implementation: assets/backend-captcha.go
Frontend dialog component: assets/CaptchaDialog.vue
API functions: assets/api-index.js
Backend API details: references/backend-api.md
Frontend integration guide: references/frontend-integration.md