Scene, Camera, Renderer

const scene = new THREE.Scene();

scene.background      = new THREE.Color(0x87ceeb);  // solid color
scene.background      = texture;                     // equirectangular or CubeTexture
scene.environment     = hdrTexture;                  // IBL for all PBR materials
scene.fog             = new THREE.Fog(0xcccccc, 10, 50);     // linear fog
scene.fog             = new THREE.FogExp2(0xcccccc, 0.02);   // exponential fog
scene.backgroundBlurriness = 0.3;   // blur the background texture (0–1)
scene.backgroundIntensity  = 1.0;   // background brightness multiplier

scene.add(object);          // add child
scene.remove(object);       // remove child
scene.clear();              // remove all children

// Recursive traversal
scene.traverse((child) => {
  if (child.isMesh) child.castShadow = true;
});

// Find by name
const obj = scene.getObjectByName('Player');
const obj2 = scene.getObjectByProperty('uuid', uuid);

// Check hierarchy
console.log(mesh.parent);   // direct parent
console.log(scene.children); // direct children array

const camera = new THREE.PerspectiveCamera(
  fov,    // vertical field of view in degrees (50–75 typical)
  aspect, // width / height
  near,   // near clipping plane (0.1 typical; never 0)
  far     // far clipping plane (1000 typical)
);

// Common updates
camera.fov    = 60;
camera.aspect = window.innerWidth / window.innerHeight;
camera.near   = 0.01;
camera.far    = 5000;
camera.updateProjectionMatrix(); // REQUIRED after changing any of the above

camera.position.set(0, 2, 10);
camera.lookAt(0, 0, 0);
camera.lookAt(scene.position); // look at world origin

const w = window.innerWidth;
const h = window.innerHeight;

const camera = new THREE.OrthographicCamera(
  -w / 2,  // left
   w / 2,  // right
   h / 2,  // top
  -h / 2,  // bottom
  0.1,     // near
  1000     // far
);

// Isometric preset
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

const helper = new THREE.CameraHelper(camera);
scene.add(helper);

// Update helper when camera changes
helper.update();

camera.position.set(x, y, z);
camera.rotation.set(rx, ry, rz);  // Euler (radians)
camera.quaternion.set(x, y, z, w);

// Point camera at a target
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.lookAt(mesh.position);

// Offset from target with fixed elevation
const radius = 5;
const theta  = Math.PI / 4;
camera.position.set(
  Math.sin(theta) * radius,
  2,
  Math.cos(theta) * radius
);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

// Render a frame
renderer.render(scene, camera);

renderer.getSize(new THREE.Vector2());      // current size
renderer.getPixelRatio();                   // current DPR
renderer.setClearColor(0x000000, 1);        // background color + alpha
renderer.getClearColor(new THREE.Color());
renderer.clear();                           // manually clear buffers
renderer.clearDepth();                      // clear only depth buffer
renderer.domElement;                        // the <canvas> element

// Screenshots (requires preserveDrawingBuffer: true)
const dataURL = renderer.domElement.toDataURL('image/png');

// Render to texture (off-screen)
const rt = new THREE.WebGLRenderTarget(512, 512);
renderer.setRenderTarget(rt);
renderer.render(scene, camera);
renderer.setRenderTarget(null);   // back to screen

function animate() {
  requestAnimationFrame(animate);
  // update logic here
  renderer.render(scene, camera);
}
animate();

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();  // seconds since last frame
  const elapsed = clock.getElapsedTime();

  mesh.rotation.y += delta;  // consistent speed regardless of FPS
  renderer.render(scene, camera);
}
animate();

// Convert degrees to radians
camera.rotation.x = THREE.MathUtils.degToRad(-30);

// Useful math utils
THREE.MathUtils.clamp(value, min, max);
THREE.MathUtils.lerp(x, y, t);
THREE.MathUtils.mapLinear(x, a1, a2, b1, b2);
THREE.MathUtils.randFloat(low, high);
THREE.MathUtils.randInt(low, high);