THREE.JS 입문 튜토리얼(6) 나만의 파노라마 구현 단계_기본지식

번역
Three.js는 WebGL을 통해 JavaScript가 GPU를 작동하고 브라우저 측에서 진정한 3D를 구현할 수 있게 해주는 훌륭한 오픈 소스 WebGL 라이브러리입니다. 하지만 이 기술은 아직 개발 단계이고 정보가 극히 부족합니다. 매니아들은 기본적으로 Demo 소스 코드와 Three.js 자체의 소스 코드를 통해 배워야 합니다.
0. 소개
파노라마 정말 멋지네요. Three.js를 사용하면 자신만의 파노라마를 만드는 것이 그리 어렵지 않습니다.
파노라마를 만들려면 파노라마 사진을 만들 수 있는 소프트웨어가 필요합니다(역자 주: 그러한 특별한 장비가 없는 경우). iPhone에서 Microsoft Photosynth 소프트웨어를 사용하여 만들었습니다.
1. 환경 텍스처
먼저 환경 텍스처란 무엇일까요? WebGL 또는 OpenGL에서는 실제로 특별한 큐브 텍스처입니다. 큐브 텍스처는 전체 장면(가상 또는 실제)을 관찰한 것으로 장면의 모양이 큐브의 내부 표면에 "붙여져 있습니다". 당신이 산 꼭대기에 서서 앞을 바라보고, 왼쪽, 오른쪽, 위, 아래, 그리고 마침내 뒤를 바라보고 있다고 상상해 보십시오. "큐브"의 내부 표면을 볼 때마다 당신은 큐브의 중앙에 서 있는 것입니다. 큐브가 충분히 크면 큐브의 가장자리와 모서리를 구별하기 어려워서 마치 넓은 환경에 있는 것 같은 착각을 불러일으킵니다. 아직 이해하지 못했다면 큐브 맵에 대한 Wikipedia 항목이 매우 도움이 될 수 있습니다.
멋진데 어떻게 작동하나요? 반사 및 굴절과 같은 작업을 수행할 수 있으며 실제로 두 기능 모두 WebGL의 셰이더 언어인 GLSL에 이미 내장되어 있습니다. 각각 큐브의 내부 표면을 나타내는 6개의 텍스처 이미지를 셰이더에 전달한 다음 WebGL에게 이것이 큐브 텍스처임을 알리면 위의 효과를 사용할 수 있습니다.
반축: 이 용어는 큐브 텍스처에 사용됩니다. 우리는 일반적으로 3차원 공간을 설명하기 위해 x축, y축, z축의 3개 축을 사용하기 때문에 큐브 텍스처에 사용되는 그림도 축 ​​이름으로 식별됩니다. 총 6개의 그림이 있으며, 각 축에 대해 2개의 그림이 있습니다. 하나는 양의 반축에 대한 것이고 다른 하나는 음의 반축에 대한 것입니다.
2. 파노라마 만들기
파노라마 만들기의 첫 번째 단계는 밖으로 나가서 휴대폰의 앱을 사용하여 사진을 찍는 것입니다. 런던 금융가를 산책한 후 거킨에서 사진을 찍었습니다. 다음과 같은 이미지를 얻었습니다.

이 앱이 이미지를 구형에 고정시킨다는 점은 주목할 만합니다. 좋아 보이지만 이제 이를 큐브의 내부 표면에 연결해야 하므로 이미지 작업을 좀 더 해야 합니다.
3. 큐브로 변환
이 부분을 간략히 소개하겠습니다. 방금 얻은 사진을 Maya나 Blender 등의 3D 모델링 소프트웨어에 로드하여 구의 내부 표면에 붙여넣었습니다. 그런 다음 각각 반축에 해당하는 6개의 직교 카메라를 만들었습니다. 마지막으로 이 6개의 카메라로 촬영한 이미지를 저장했습니다. 완성하는 방법은 꽤 복잡하고 여기서 설명할 필요도 없기 때문에 블렌더 스크립트 파일을 작성하고 모든 설정을 마쳤습니다. 3. 스크립트 파일을 로드합니다.
4. 잠시만 기다리면 6개의 이미지가 생성됩니다. 정말 멋지죠? 이제 각 반축과 일치하도록 이미지 이름을 바꿀 수 있습니다. 예: •0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png

4. 현장에 합류하세요

이제 우리는 환경 텍스처를 얻은 다음 장면에 로드합니다. Three.js를 사용하면 이 작업이 매우 쉽습니다.



코드 복사

코드는 다음과 같습니다.

// 텍스처 이미지의 URL var urls = [ 'path/to/pos-x.png', 'path/to/neg-x.png', 'path/to /pos -y.png',

'경로/to/neg-y.png',

'경로/to/pos-z.png',
'경로/to/neg-z. png'
],
// 필요한 개체에 패키징
cubemap = THREE.ImageUtils.
loadTextureCube(urls)
// 형식을 RGB
큐브맵으로 설정합니다. format = THREE .RGBFormat;


이제 큐브맵을 머티리얼에 할당하기만 하면 됩니다!




코드 복사

코드는 다음과 같습니다.

var Material = new THREE . MeshLambertMaterial({ 색상: 0xffffff, envMap: 큐브맵 });
5. 요약
그렇군요. 파노라마를 구현하는 것도 멋지고, 특히 WebGL 파노라마로 나만의 공간을 만들 수 있습니다. 평소와 같이 이 튜토리얼의 소스 코드를 패키징했습니다.