threejs-fundamentals

name	threejs-fundamentals
description	Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	3d-animation
risk	unknown
source	community
tags	["skill","design-creative","3d-animation","threejs","fundamentals"]

Three.js Fundamentals

When to Use

• You need to set up the core structure of a Three.js scene.
• The task involves scenes, cameras, renderers, transforms, resize handling, or object hierarchy basics.
• You want foundational Three.js guidance before working on specialized topics like shaders or post-processing.

Quick Start

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 =  .(, , );
 material =  .({ :  });
 cube =  .(geometry, material);
scene.(cube);


scene.( .(, ));
 dirLight =  .(, );
dirLight..(, , );
scene.(dirLight);

camera.. = ;


 () {
  (animate);
  cube.. += ;
  cube.. += ;
  renderer.(scene, camera);
}
();


.(,  {
  camera. = . / .;
  camera.();
  renderer.(., .);
});