Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

$pwd:

3d-shape-captcha

Name: 3d Shape Captcha
Author: LSTM-Kirigaya

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

Ejecutar en Manus

$ git log --oneline --stat

stars:19

forks:1

updated:9 de mayo de 2026, 11:46

Explorador de archivos

7 archivos

SKILL.md

readonly

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

related-skills.json

mismo repositorio

tencent-ses-service.md

from "LSTM-Kirigaya/jinhui-skills"

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

2026-05-2719

ddd-go-backend.md

from "LSTM-Kirigaya/jinhui-skills"

Build production-ready Go backend services following DDD-layered architecture. Covers project scaffolding, config (Viper), database (GORM + MySQL/PostgreSQL), object storage (S3/MinIO), OAuth2 + JWT auth, OpenTelemetry tracing + Jaeger visualization, Zap logging, middleware patterns, and API routing. Use when creating a new Go backend service or adding features to an existing one that follows this architecture.

2026-05-0519

duckduckgo-search.md

from "LSTM-Kirigaya/jinhui-skills"

Integrate DuckDuckGo web search into a Rust project by calling Bing and DuckDuckGo HTTP APIs directly with browser fingerprint simulation. Use when building search functionality that needs text, news, image, or video results without relying on third-party CLI wrappers. Covers the primp HTTP client, vqd token extraction, Bing HTML parsing, DuckDuckGo JSON APIs, and cross-language HTTP concepts.

2026-04-2719

lark-markdown.md

from "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-04-2719

bishe-guider.md

from "LSTM-Kirigaya/jinhui-skills"

中文学术毕业论文（本科/硕士/博士）全流程写作指导与质量检查 Skill。用于辅助毕业论文的撰写、修改、审查与定稿，覆盖写作风格、文献检索、论文结构规范、排版语法、实验规范、盲审合规性、图表一致性等维度。使用场景： (1) 撰写或修改论文章节内容时，确保符合学术写作规范 (2) 润色文本，去除 AI 写作痕迹，使行文自然如人类研究者亲笔 (3) 检索、筛选和管理学术参考文献 (4) 检查论文结构、逻辑一致性、盲审匿名性、图表风格一致性 (5) 定稿前的全面复盘检查

2026-04-2319

port-manager.md

from "LSTM-Kirigaya/jinhui-skills"

为本地开发服务器分配并注入唯一端口号，防止同一台电脑上多个项目的端口冲突。启动任何开发服务器前，务必先通过 portman 脚本从 ~/.port-man 获取端口，并以 PORT=<端口> 原命令的方式注入启动（例如 PORT=3001 npm run dev）。适用于：(1) 启动 Vite、Webpack、Next.js、后端 API 等开发服务器，(2) 配置多服务项目，(3) 避免与已有项目占用 3000、8080 等常用端口冲突，(4) 查看或更新 ~/.port-man 全局端口注册表。

2026-04-1519

package.json

"author": "LSTM-Kirigaya"

"repository": "LSTM-Kirigaya/jinhui-skills"

Abrir repositorio de GitHub Ver repositorios del creador

$ install --global

$ download --local

Ejecutar en Manus

$ useful --forSOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas15-1252L4

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

3d-shape-captcha

3D Shape CAPTCHA

Architecture

Backend Implementation

Core Files

Key Design Decisions

Redis Schema

Integration Points

Frontend Implementation

Core Files

Three.js Scene Setup

Shape Geometry Mapping

Click Interaction

Responsive Design

Workflow: Adding CAPTCHA to Email Verification

Complete Code References

Más de este repositorio

Más de este repositorio

3D Shape CAPTCHA

Architecture

Backend Implementation

Core Files

Key Design Decisions

Redis Schema

Integration Points

Frontend Implementation

Core Files

Three.js Scene Setup

Shape Geometry Mapping

Click Interaction

Responsive Design

Workflow: Adding CAPTCHA to Email Verification

Complete Code References