미디어 콘텐츠 스터디

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Three.js 애플리케이션을 구성하는 기본 구성 요소에 대해 설명합니다. - THREE.Scene 오브젝트로 할 수 있는 작업 - 기하학와 메시의 관련성 - 직교 카메라와 원근 카메라의 차이점 장면을 만들고 오브젝트를 추가하는 방법을 살펴보는 것으로 시작하겠습니다. 1. 장면 만들기 Three.js의 핵심 개념인 THREE.Scene 입니다. 장면에 대해 가장 중요한 점은 기본적으로 렌더링할 때 사용하려는 모든 오브젝트와 조명에 대한 컨테이너라는 것입니다. 다음 표에는 THREE.Scene의 가장 중요한 기능과 속성입니다. 기능/속성 설명 add(object) 장면에 개체를 추가하는 데 사용됩니다. 이 기능을 사용하여 오브젝트 그룹을 만들 수도 있습니다. children 카메라와 조명을 포함하여 장면에..

1. 첫 번째 Three.js 장면 만들기 1.1 HTML 페이지 생성 가장 먼저 해야 할 일은 다음과 같이 모든 예제의 기반으로 사용할 수 있는 빈 HTML 페이지를 만드는 것입니다. chapter-01/01-basic-skeleton.html //Three.js 코드를 작성할 때 해당 요소에 대한 Three.js 렌더러의 출력을 가리킴 //페이지가 로드될 때 호출되는 이 함수에서 init()를 호출함 chapter-01/js/01-01.js function init() { console.log("Using Three.js version: " + THREE.REVISION); //Three.js 버전을 출력 } 실행결과) 브라우저에서 이 파일을 열고 콘솔 출력을 보면 다음과 같이 표시되어야 합니다. t..

Three.js는 3D 장면을 만들고 애니메이션으로 만드는 것을 훨씬 쉽게 만들어주는 라이브러리입니다. 다음 목록은 Three.js로 매우 쉽게 수행할 수 있는 몇 가지 작업을 보여줍니다. - 단순하고 복잡한 3D 지오메트리 생성 - 가상 현실(VR) 및 증강 현실(AR) 장면 만들기 - 3D 장면을 통해 개체 애니메이션 및 이동 - 개체에 텍스처 및 재료 적용 - 다양한 광원을 사용하여 장면을 비추기 - 3D 모델링 소프트웨어에서 개체 로드 - 3D 장면에 고급 후처리 효과 추가 - 자신만의 커스텀 셰이더로 작업하기 - 포인트 클라우드 생성 다음 스크린샷과 같이 몇 줄의 JavaScript로 간단한 3D 모델에서 사실적인 실시간 장면에 이르기까지 무엇이든 만들 수 있습니다(브라우저에서 http://ww..