레슨 8 / 8·15분
Three.js 레퍼런스
Three.js 핵심 API 레퍼런스
Three.js의 주요 클래스와 자주 사용하는 API를 정리합니다. 이 레퍼런스를 통해 각 기능의 역할과 매개변수를 빠르게 확인할 수 있습니다.
씬과 렌더링
javascript
// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
scene.fog = new THREE.Fog(color, near, far);
scene.add(object);
scene.remove(object);
// Camera
const cam = new THREE.PerspectiveCamera(fov, aspect, near, far);
cam.position.set(x, y, z);
cam.lookAt(target);
cam.updateProjectionMatrix();
// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.render(scene, camera);지오메트리와 머티리얼
javascript
// Geometry
new THREE.BoxGeometry(width, height, depth);
new THREE.SphereGeometry(radius, widthSeg, heightSeg);
new THREE.CylinderGeometry(topR, bottomR, height, segments);
new THREE.PlaneGeometry(width, height);
new THREE.TorusGeometry(radius, tubeR, radialSeg, tubularSeg);
// Material
new THREE.MeshBasicMaterial({ color, wireframe });
new THREE.MeshStandardMaterial({ color, metalness, roughness, map });
new THREE.MeshPhongMaterial({ color, shininess, specular });
new THREE.MeshLambertMaterial({ color });조명, 로더, 유틸리티
javascript
// Light
new THREE.AmbientLight(color, intensity);
new THREE.DirectionalLight(color, intensity);
new THREE.PointLight(color, intensity, distance);
new THREE.SpotLight(color, intensity);
// Helper
new THREE.AxesHelper(size);
new THREE.GridHelper(size, divisions);
// Loader
new THREE.TextureLoader().load(url);
new THREE.CubeTextureLoader().load([px, nx, py, ny, pz, nz]);
// Math
THREE.MathUtils.lerp(start, end, t);
THREE.MathUtils.clamp(value, min, max);
THREE.MathUtils.degToRad(degrees);- •Scene — 3D 공간의 루트 컨테이너
- •PerspectiveCamera — 원근 투영, OrthographicCamera — 직교 투영
- •WebGLRenderer — GPU 기반 렌더링 엔진
- •Mesh = Geometry + Material — 3D 객체의 기본 단위
- •TextureLoader / GLTFLoader — 에셋 로딩
- •Raycaster — 광선-객체 교차 검사 (마우스 인터랙션)
- •AnimationMixer — 키프레임 애니메이션 재생/제어
- •Clock — 프레임 독립적 시간 관리
💡
공식 문서(threejs.org/docs)와 예제(threejs.org/examples)를 적극 활용하세요. examples 페이지에서 원하는 효과를 찾은 뒤 소스코드를 분석하는 것이 가장 효율적인 학습 방법입니다.