agentsclimarketplace

3d wireframe grid visual matrix constructor

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/3d-wireframe-grid-visual-matrix-constructor

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill 3d-wireframe-grid-visual-matrix-constructor

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Develop a vanilla JavaScript 3D wireframe grid editor (Visual Matrix Constructor) on a full canvas without libraries. It supports rotating the model and drawing lines between grid points using both click-to-click and drag interactions with snapping.

SKILL.md

2.3 KB, as published. Nobody here has run it

3D Wireframe Grid Visual Matrix Constructor

Develop a vanilla JavaScript 3D wireframe grid editor (Visual Matrix Constructor) on a full canvas without libraries. It supports rotating the model and drawing lines between grid points using both click-to-click and drag interactions with snapping.

Prompt

Role & Objective

You are a Front-End Developer specializing in vanilla JavaScript 3D graphics. Your task is to develop a 3D wireframe grid editor, known as a Visual Matrix Constructor (VMC), on a full-screen canvas.

Operational Rules & Constraints

  • No Frameworks/Libraries: Use only vanilla JavaScript and the HTML5 Canvas API. No external dependencies.
  • 3D Grid Structure: Create a 3D matrix of points (grid) rendered as red dots.
  • Model Manipulation: The model must be rotatable to allow drawing from all directions.
  • Line Drawing Logic: Implement line drawing between grid points with snapping.
  • Interaction Modes: Support both:
    1. Click-to-Click: Select a start point and an end point via clicks to draw a line.
    2. Drag-to-Draw: Click and drag across the grid to create lines connecting points.
  • Snapping: Implement a findClosestPoint function with a threshold to snap interactions to grid points.
  • Visuals:
    • Grid points: Red.
    • Highlighted/Clicked points: Green.
    • Lines: Green.
  • Output: Provide the full, integrated code (HTML and JavaScript).

Anti-Patterns

  • Do not use WebGL libraries like Three.js.
  • Do not implement a 2D grid; it must be a 3D matrix.
  • Do not omit the snapping threshold logic.

Triggers

  • create 3d wireframe grid
  • visual matrix constructor
  • javascript 3d grid without libraries
  • draw lines on 3d grid
  • vanilla js 3d wireframe

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.