three.js

컴퓨터그래픽스 배움터 - Three.js 예제 모음

저자

• 연세대학교 최윤철
• 숙명여자대학교 임순범
• 아주대학교 이환용

소개

이 예제 코드는 “컴퓨터 그래픽스 배움터”의 부록의 코드 내용으로서, 컴퓨터 그래픽스 이론을 공부하는데 도움이 되도록 Three.js를 통해 실습을 해 보는 목적으로 제작되었습니다.

이 튜토리얼의 내용은 수시로 변경됩니다.

• 2025년 8월 - 코드를 ES6에 맞추어 변경하였습니다. - 더 이상 html과 JS를 나누지 않고 하나의 html 파일에서 실습을 하도록 변경하였습니다.
• 튜토리얼을 웹 페이지에서 직접 보려면 - https://learn-cg.github.io/three.js/

튜토리얼 목차

• 00_hello_box.html - 간단한 Box
• 01_rotate_box.html - Box의 회전
• 01a_wire_box.html - 와이어 프레임으
• 02_other_geometry.html - 다양한 형상
• 03_wire_points.html - 포인트/와이어로
• 03a_two_triangles.html - 삼각형 2개
• 04_three_boxes.html - 박스 3개
• 04a_three_boxes_array.html - 형상 배열
• 05_transform_auto.html - 자동 변환
• 05a_transform_mat.html - 변환 행렬
• 05b_transform_mat_RT.html - 변환 행렬
• 06_hierachy_box.html - 계층 구조
• 07_camera_lookat.html - 카메라 방위
• 07a_cam_hierachy.html - 카메라 계층
• 08_ortho_cam.html - 평행 투시
• 09_cubic_bezier3.html - 베지어
• 09a_ellipse.html - 타원체
• 09b_catmull-rom.html - 스플라인
• 10_three_boxes_depth.html - z-buffer
• 10a_three_boxes_z_fight.html - z-fighting
• 11_box_material.html - 표면 재질
• 12_ball_material.html - 표면 재질
• 13_lights_on.html - 조명 장치
• 14_texture.html - 텍스처
• 14a_texture_bump.html - 범프 매핑
• 14b_texture_normal_glTF_export.html - 범프 매핑
  • 스페이스바를 누르면 glTF 파일로 현재의 장면을 저장할 수 있습니다.
  • glTF에서는 bump맵을 지원하지 않고, normal map을 지원하기 때문에 이미지를 normal map으로 변경하였습니다. NormalMap-Online
  • 코딩은 Google Gemini 2.5 Pro의 도움을 받았습니다.
• 15_texture_cube.html - 텍스처 매핑
• 16_box_opacity.html - 투명도

저작권

(c) 2021~2025 이환용, 생능출판사

라이센스

코드는 MIT 라이센스로 사용할 수 있습니다.

This site is open source. Improve this page.