threejs-skills
Create Three.js WebGL Experiences
Building browser 3D scenes is error-prone because setup, lighting, controls, and performance must work together. This skill provides practical Three.js patterns for reliable scenes, animations, and interactions.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "threejs-skills" from https://skillstore.io/skills/sickn33-threejs-skills.md and its manifest at https://skillstore.io/api/skills/sickn33-threejs-skills/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "threejs-skills". Create a responsive rotating planet scene with stars and mouse movement.
Expected outcome:
A browser-ready Three.js scene plan with camera placement, sphere geometry, star particles, lighting, resize behavior, and animation steps.
Using "threejs-skills". Make a clickable 3D product selector for three objects.
Expected outcome:
An interaction design that uses raycasting, hover scaling, selected object styling, camera controls, and a continuous render loop.
Using "threejs-skills". Improve a Three.js demo for portfolio presentation.
Expected outcome:
A refinement checklist covering antialiasing, shadows, tone mapping, environment maps, asset loading, and performance limits.
Security Audit
SafeThe static external-command findings are false positives from Markdown code fences and inline Three.js identifiers, not shell execution. The URL findings are metadata or an expected public CDN dependency example, and the blocker findings are normal rendering guidance. No prompt injection, data-exfiltration intent, or malicious behavior was found in SKILL.md.
Risk Factors
⚙️ External commands (72)
🌐 Network access (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/sickn33-threejs-skills/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-threejs-skills?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-threejs-skills?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-threejs-skills/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-threejs-skills.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
sickn33. (2026). threejs-skills security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-threejs-skills/audits/5BibTeX citation
@techreport{sickn33-sickn33-threejs-skills-2026,
author = {sickn33},
title = {threejs-skills security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-threejs-skills/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "threejs-skills security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-threejs-skills/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-threejs-skills:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Prototype Interactive 3D UI
Create quick browser scenes with animation, lighting, resize handling, and mouse interaction.
Explain 3D Rendering Concepts
Teach Three.js foundations through clear examples for geometry, materials, cameras, and lights.
Plan Production WebGL Work
Move from simple CDN demos toward build tools, loaders, animation libraries, and performance patterns.
Try These Prompts
Use the Three.js skill to create a responsive browser scene with a rotating object, camera, renderer, lighting, and animation loop.
Use the Three.js skill to design an interactive 3D scene where users can move the camera, hover objects, and select items.
Use the Three.js skill to build a polished visual demo with shadows, environment lighting, particles, responsive resizing, and smooth animation.
Use the Three.js skill to plan a production Three.js implementation with build tools, loaders, animation libraries, and performance safeguards.
Best Practices
- Start with scene, camera, renderer, resize handling, and a working render loop before adding complexity.
- Choose materials and lights together so objects remain visible and visually consistent.
- Limit geometry detail and particle counts until performance is tested on target devices.
Avoid
- Do not use Three.js features that are unavailable in the targeted runtime version.
- Do not add lit materials without matching lights, because scenes may render black.
- Do not skip browser testing, because WebGL errors often appear only at runtime.