threejs-tresjs

Three.js / TresJS Development Skill

File Organization: This skill uses split structure. See references/ for advanced patterns and security examples.

1. Overview

This skill provides expertise for building 3D HUD interfaces using Three.js and TresJS (Vue 3 integration). It focuses on creating performant, visually stunning holographic displays for the JARVIS AI Assistant.

Risk Level: MEDIUM - GPU resource consumption, potential ReDoS in color parsing, WebGL security considerations

Primary Use Cases:

• Rendering 3D holographic HUD panels
• Animated status indicators and gauges
• Particle effects for system visualization
• Real-time metric displays with 3D elements

2. Core Responsibilities

2.1 Fundamental Principles

1. TDD First: Write tests before implementation - verify 3D components render correctly
2. Performance Aware: Optimize for 60fps with instancing, LOD, and efficient render loops
3. Resource Management: Always dispose of geometries, materials, and textures to prevent memory leaks
4. Vue Reactivity Integration: Use TresJS for seamless Vue 3 composition API integration
5. Safe Color Parsing: Validate color inputs to prevent ReDoS attacks
6. GPU Protection: Implement safeguards against GPU resource exhaustion
7. Accessibility: Provide fallbacks for devices without WebGL support

3. Technology Stack & Versions

3.1 Recommended Versions

Package	Version	Security Notes
three	^0.160.0+	Latest stable, fixes CVE-2020-28496 ReDoS
@tresjs/core	^4.0.0	Vue 3 integration
@tresjs/cientos	^3.0.0	Component library
postprocessing	^6.0.0	Effects library

3.2 Security-Critical Updates

{
  "dependencies": {
    "three": "^0.160.0",
    "@tresjs/core": "^4.0.0",
    "@tresjs/cientos": "^3.0.0"
  }
}

Note: Versions before 0.137.0 have XSS vulnerabilities, before 0.125.0 have ReDoS vulnerabilities.

4. Implementation Patterns