skills.rest
Uniquecrete
UniquecreteCOMMUNITY
Explore all skills by this author →
GitHub

threejs-fundamentals

Initialize Three.js scenes, cameras, renderers, and Object3D hierarchies for WebGL.

Updated May 6, 2026
Search Tags:#webgl#threejs#transforms#scene setup#render loop#camera configuration#object3d hierarchy
One-click install
npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-fundamentals-uniquecrete
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-fundamentals
Source: https://github.com/Uniquecrete/ThinkFasterv1/tree/main/Skills/threejs-fundamentals
Command: npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-fundamentals-uniquecrete

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you reliably set up a Three.js 3D project by covering the essential scene, camera, renderer, and object hierarchy concepts you need to get visuals on screen quickly.

Core Features & Use Cases

  • Scene, Camera, Renderer Setup: Create a working render loop, configure perspective/orthographic cameras, and size the WebGL renderer correctly for the browser.
  • Object3D Hierarchy & Transforms: Organize meshes, groups, and lights using parent-child relationships while understanding local vs world transforms.
  • Coordinate Systems & Core Math Utilities: Use Three.js’s right-handed coordinate system and work with Vector3, Matrix4, Quaternion, and Euler rotations for accurate positioning and animation.
  • Use Case: Build a basic rotating 3D product preview component with correct camera framing, lighting, responsive resizing, and consistent animation timing.

Quick Start

Use the threejs-fundamentals skill to generate a minimal Three.js HTML/JavaScript starter that renders a lit rotating cube with correct camera setup and resize handling.

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 Three.js scene with a camera and renderer?▼

To set up a Three.js scene, configure the Scene, Camera (Perspective or Orthographic), and WebGL Renderer, then establish a render loop to display 3D objects continuously.

What is the difference between local and world transforms in Three.js Object3D hierarchy?▼

Object3D hierarchy transforms differ by applying positioning, rotation, and scaling relative to parent objects (local) versus the right-handed coordinate system origin (world) using Matrix4 and Quaternion math.

How do I handle WebGL renderer resizing and pixel ratio in Three.js?▼

Handle WebGL renderer resizing by updating the renderer's pixel ratio and camera aspect ratio during browser window resize events to ensure responsive 3D visuals without distortion.

When should I use an OrthographicCamera instead of a PerspectiveCamera in Three.js?▼

Use an OrthographicCamera for UI-like 3D previews or isometric viewing where parallel projection is needed, whereas PerspectiveCamera simulates realistic depth for interactive 3D product previews.

Why are my 3D objects positioned incorrectly in Three.js right-handed coordinates?▼

Objects appear incorrectly positioned when local vs world space transforms are mismatched; use Vector3 and Euler rotations to align Object3D hierarchy parent-child relationships within the right-handed coordinate system.

Can I use Three.js fundamentals to build a rotating 3D product preview component?▼

Yes, Three.js fundamentals support building a rotating 3D product preview by configuring correct camera framing, lighting, responsive resizing, and consistent animation timing via the render loop.

Related Skills

Explore More Software Engineering Skills→
Gekkos-techGekkos-tech
4

threejs-webgl

Create interactive 3D scenes with Three.js using WebGL and WebGPU rendering.

Official
Intermediate
ElementTechElementTech
2

threejs-fundamentals

Configure Three.js scenes with cameras, renderers, lighting, and object hierarchies.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-core-math

Perform vector, matrix, and quaternion math for Three.js projects.

Official
Advanced
guaderramaguaderrama

threejs-webgl

Create 3D scenes with Three.js for WebGL and WebGPU rendering.

Community
Advanced