threejs-fundamentals

Create Three.js scenes with cameras, renderers, meshes, and lighting.

Updated Jan 26, 2026

Search Tags:#javascript #webgl #three.js #3d graphics #react three fiber #scene setup

Ready to run

npx skills add https://github.com/shelbeely/ADHD-Closet --skill threejs-fundamentals-shelbeely

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-fundamentals
Source: https://github.com/shelbeely/ADHD-Closet/tree/main/.github/skills/threejs-fundamentals
Command: npx skills add https://github.com/shelbeely/ADHD-Closet --skill threejs-fundamentals-shelbeely

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides foundational knowledge and code examples for setting up and working with 3D scenes in Three.js, addressing the complexity of 3D graphics programming.

Core Features & Use Cases

Scene Setup: Learn to create scenes, cameras, and renderers.
3D Object Manipulation: Understand how to add, position, rotate, and scale meshes and groups.
Lighting and Materials: Explore different light types and material properties for realistic rendering.
Animation and Responsiveness: Implement animation loops and handle window resizing for dynamic experiences.
Use Case: Quickly set up a basic 3D environment for a web application, including a camera, lighting, and a rotating cube.

Quick Start

Use the threejs-fundamentals skill to create a basic Three.js scene with a camera, renderer, a cube, and ambient and directional lights.

Frequently Asked Questions about threejs-fundamentals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up a basic 3D scene with Three.js?▼

To set up a 3D scene in Three.js, you need to configure a scene graph, camera, and renderer, then instantiate meshes using geometry and materials. You also add lighting and implement an animation loop to render the graphics onto a web canvas.

What components are needed for Three.js scene creation?▼

Core components for Three.js scene creation include the scene graph for object hierarchy, a camera for viewpoint, a renderer to draw the graphics, meshes with attached geometries and materials, and light sources to illuminate the 3D objects.

Does Three.js work with React Three Fiber for 3D graphics?▼

Yes, Three.js is the underlying rendering library used by React Three Fiber. Understanding fundamental Three.js concepts like scene graph management, mesh instantiation, and renderer setup is essential for building 3D graphics with React Three Fiber.

How do I handle responsive canvas resizing in Three.js?▼

To handle responsive canvas resizing in Three.js, you must update the camera aspect ratio and the renderer size when the browser window resizes. This ensures the 3D graphics scale correctly without distortion across different screen dimensions.

Why is resource disposal important in Three.js development?▼

Resource disposal is important in Three.js development to prevent memory leaks when removing geometries and materials from the scene. Properly disposing of these resources ensures efficient memory management and sustained performance in web-based 3D applications.

Pixel-Process-UG