threejs-fundamentals
This skill provides code patterns and configuration examples for Three.js, covering scene setup, camera management, renderer configuration, object hierarchies, and coordinate systems.
Is threejs-fundamentals safe to install?
Safe to install: our audit of threejs-fundamentals's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides static code snippets and documentation. It does not execute shell commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building 3D web applications using the Three.js library.
What can you do with it?
- Initializing Three.js scenes with cameras and renderers
- Managing 3D object hierarchies and transforms
- Configuring WebGLRenderer settings for performance and shadows
- Implementing animation loops with clock-based timing
- Handling window resizing and responsive canvas layouts
- Performing vector and matrix math operations
How good is this skill?
Quality score: 5/10. The skill provides clear, well-organized code snippets and covers essential Three.js concepts accurately.
What does the skill file contain?
# Three.js Fundamentals
## Quick Start
```javascript
import * as THREE from "three";
// Create scene, camera, renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
// Add a mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardM...Frequently asked questions
Does this skill handle asset loading?
Yes, it provides a pattern for using the LoadingManager to track loading progress and handle errors for loaders like TextureLoader and GLTFLoader.
How do I ensure my Three.js application is responsive?
The skill includes a pattern for listening to the window resize event to update the camera aspect ratio and the renderer size.
What coordinate system does Three.js use?
It uses a right-handed coordinate system where +X points right, +Y points up, and +Z points toward the viewer.
Related skills
gsap-core
30.9KDevelopers building animations in React, Vue, Svelte, or vanilla JavaScript who need to implement tweens, timelines, or responsive animation logic
The gsap-core skill provides instructions and patterns for using the GreenSock Animation Platform (GSAP) core API. It covers tween methods, easing, stagger, transforms, accessibility via gsap.matchMedia, and best practices for performant animations in JavaScript environments.
vitest
26.2KDevelopers using Vitest for unit testing, mocking, and test configuration in Vite-based projects
The Vitest skill provides documentation and guidance for the Vitest testing framework, covering configuration, test APIs, mocking, coverage, and advanced features like type testing and multi-project workspaces.
fixing-motion-performance
18.0KFrontend developers and UI engineers who need to optimize animation performance and resolve jank in web applications
The fixing-motion-performance skill audits and suggests improvements for UI animation performance. It identifies layout thrashing, inefficient compositor usage, and problematic scroll-linked motion within CSS and JavaScript animation stacks.
vue-debug-guides
14.1KVue 3 developers diagnosing runtime errors, warnings, and hydration issues
The vue-debug-guides skill provides a structured reference for diagnosing and resolving common Vue 3 runtime errors, reactivity issues, and component lifecycle bugs.