THREE.JS 입문 튜토리얼 (1) THREE.JS를 사용하기 전 이해_기본지식

Three.js는 WebGL을 통해 JavaScript가 GPU를 작동하고 브라우저 측에서 진정한 3D를 구현할 수 있게 해주는 훌륭한 오픈 소스 WebGL 라이브러리입니다. 하지만 이 기술은 아직 개발 단계이고 정보가 극히 부족합니다. 매니아들은 기본적으로 Demo 소스 코드와 Three.js 자체의 소스 코드를 통해 배워야 합니다.

외국 웹사이트 aerotwist.com에는 비교적 간단한 입문 튜토리얼 6개가 있습니다. 이를 번역하여 여러분과 공유해 보았습니다.
일부 실험 프로젝트에서 Three.js를 사용해 본 적이 있는데, 브라우저 3D 프로그래밍을 빠르게 시작하는 것이 정말 도움이 됐습니다. Three.js를 사용하면 카메라, 개체, 조명, 재료 등을 만들 수 있을 뿐만 아니라 셰이더를 선택하고 웹 페이지에서 3D 그래픽을 렌더링하는 데 사용할 기술(WebGL, Canvas 또는 SVG)을 결정할 수도 있습니다. Three.js는 오픈 소스이며 프로젝트에 참여할 수도 있습니다. 하지만 지금은 기본에 집중하고 이 엔진을 사용하는 방법을 보여 드리겠습니다.

Three.js만큼 훌륭하지만 때로는 미치게 만들 수도 있습니다. 예를 들어, 예제를 읽고, 리버스 엔지니어링(내 경우에는)을 수행하여 특정 기능이 무엇인지 확인하고, 때로는 GitHub에 질문을 하는 데 많은 시간을 할애하게 됩니다. 질문이 필요하다면 Mr. doob과 AlteredQualia가 탁월한 선택입니다.

1. 기본
3D 그래픽에 대한 지식이 어느 정도 있고 JavaScript를 어느 정도 마스터했다고 가정합니다. 그렇지 않다면 먼저 조금 배워보세요. 그렇지 않으면 이 튜토리얼을 직접 읽으면 혼란스러울 수 있습니다.

3차원 세계에는 다음과 같은 것들이 있습니다. 만드는 방법을 단계별로 안내해 드리겠습니다.
1. 씬
2. 렌더러
3. 카메라
4. 객체(재료 포함)
물론 다른 것도 만들 수 있기를 바랍니다.
2. 브라우저 지원
간단히 브라우저 지원을 살펴보겠습니다. Google의 Chrome 브라우저는 Three.js를 지원합니다. 내 실험에서는 Chrome이 렌더러 지원과 JavaScript 인터프리터 속도 측면에서 최고입니다. Canvas, WebGL 및 SVG를 지원하며 매우 빠르게 실행됩니다. FireFox 브라우저는 2위입니다. JavaScript 엔진은 Chrome보다 절반 정도 느리지만 렌더러에 대한 지원도 훌륭하며, FireFox의 속도는 버전 업데이트를 통해 점점 더 빨라지고 있습니다. Opera 브라우저는 점진적으로 WebGL에 대한 지원을 추가하고 있으며 Mac의 Safari 브라우저에는 WebGL을 활성화하는 옵션이 있습니다. 일반적으로 이 두 브라우저는 Canvas 렌더링만 지원합니다. Microsoft의 IE9는 현재 Canvas 렌더링만 지원하며 Microsoft는 WebGL의 새로운 기능을 지원할 의사가 없는 것 같습니다. 따라서 우리는 현재 실험에 IE9를 사용하지 않을 것입니다.
3. 장면 설정
모든 렌더링 기술을 지원하는 브라우저를 선택했고 Canvas 또는 WebGL(더 표준화된 방법)을 통해 장면을 렌더링한다고 가정합니다. 선택). Canvas는 WebGL보다 더 폭넓은 지원을 제공하지만 WebGL은 GPU에서 직접 작동할 수 있습니다. 즉, CPU는 물리 엔진이나 사용자와의 상호 작용과 같은 비렌더링 작업에 집중할 수 있습니다.

어떤 렌더러를 선택하든 명심해야 할 한 가지는 JavaScript 코드를 최적화해야 한다는 것입니다. 3D 렌더링은 브라우저에게 쉬운 작업이 아니므로(지금 할 수 있다면 좋을 것입니다) 렌더링이 너무 느리다면 코드의 병목 지점이 어디인지 파악하고 가능하다면 이를 개선해야 합니다.

그러고 보니 Three.js 소스 코드를 다운로드하여 HTML 문서에 도입하신 것 같습니다. 그렇다면 장면 만들기를 어떻게 시작합니까? 이렇게:

코드 복사 코드는 다음과 같습니다.

// 장면 크기 설정
var WIDTH = 400,
HEIGHT = 300;
// 일부 카메라 매개변수 설정
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// DOM 구조의 요소 가져오기
// - JQuery를 사용한다고 가정합니다.
var $container = $('#container')
// 렌더러, 카메라 및 Scene
var renderer = new THREE.WebGLRenderer();
var 카메라 =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR); 🎜>var scene = new THREE.Scene();
// 장면에 카메라 추가
scene.add(camera)
// 카메라의 초기 위치가 원점입니다
// 카메라를 당깁니다. 다시 돌아옵니다(번역자 주: 이 방법으로만 원점을 볼 수 있습니다)
camera.position.z = 300
// 렌더러 시작
renderer.setSize(WIDTH, HEIGHT);
// DOM 구조에 렌더러가 추가됩니다
$container.append(renderer.domElement);
보세요, 쉽습니다!
4. 메쉬 표면 만들기
이제 장면, 카메라, 렌더러(제 경우에는 WebGL 렌더러)가 있지만 실제로는 무엇을 그리지 않았습니까? 아직? 실제로 Three.js는 특정 표준 형식의 3D 파일 로드를 지원합니다. 이는 Blender, Maya, Cinema4D 또는 기타 도구에서 모델링하는 경우 유용합니다. 단순화를 위해(결국 우리는 이제 막 시작했습니다!) 먼저 기본 요소를 고려해 보겠습니다. 프리미티브는 가장 기본적인 구, 평면, 큐브 및 원통과 같은 기본적인 기하학적 표면입니다. 이러한 기본 요소는 Three.js를 사용하여 쉽게 만들 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//구 매개변수 설정(번역자 주: 구는 16×16 그리드로 나뉩니다. 마지막 두 매개변수가 4와 2이면 팔면체가 생성됩니다. 상상해 보세요.)
var radius = 50,
세그먼트 = 16,
링 = 16;
// 메시를 생성하기 위한 재료 커버 형상
varsphere = new THREE.Mesh(
new THREE.SphereGeometry(
반경,
segments,
rings),
sphereMaterial);
// 장면에 메시 추가
scene.add(sphere)

그렇습니다. 구체에 있는 물질은? 코드에서는sphereMaterial 변수를 사용하지만 아직 정의하지 않았습니다. 그럼 먼저 머티리얼을 만드는 방법을 살펴보겠습니다.
5. 자료
확실히 Three.js에서 가장 유용한 부분입니다. 이 부분에서는 매우 사용하기 쉬운 여러 가지 일반 재료 모델을 제공합니다.
1.기본 재료: 조명을 고려하지 않는 재료를 나타냅니다. 이는 현재로서는만 말할 수 있습니다.
2.램버트 재질: (번역자 주: 램버트 표면, 등방성 반사).
3.퐁 자료: (번역자 주: 퐁 표면, 반짝이는 표면, 정반사와 램버시안 반사 사이의 반사, 현실 세계의 반사를 설명).

이 외에도 다른 유형의 자료도 있으므로 간단하게 살펴보도록 하겠습니다. 실제로 WebGL형 렌더러를 사용하면 머티리얼을 사용하기가 정말 쉽습니다. 왜? 네이티브 WebGL에서는 렌더링할 때마다 셰이더를 직접 작성해야 하고 셰이더 자체가 거대한 프로젝트이기 때문입니다. 간단히 말해서 셰이더는 GLSL 언어(OpenGL 셰이더 언어)를 사용하여 작성되고 절차적으로 GPU를 작동하는 데 사용됩니다. 이는 조명, 반사 등을 수학적으로 시뮬레이션해야 한다는 것을 의미하며 이는 매우 복잡한 작업이 됩니다. Three.js 덕분에 셰이더를 직접 작성할 필요가 없습니다. 물론 직접 작성하고 싶다면 MeshShaderMaterial을 사용할 수 있는데 이는 매우 유연한 설정임을 보여줍니다.

이제 Lambertian 재료로 구를 덮겠습니다.

코드 복사 코드는 다음과 같습니다.

// 구 표면의 재질 생성
varsphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
})

머티리얼을 생성할 때 색상 외에도 매끄러움, 환경 맵 등 지정할 수 있는 다른 매개변수가 많다는 점을 지적할 가치가 있습니다. 재질 또는 Three.js 엔진에서 제공하는 객체에 설정할 수 있는 속성을 확인하려면 이 위키 페이지를 검색해야 할 수도 있습니다.
6. 빛
지금 장면을 렌더링하고 싶다면 빨간색 원이 보일 것입니다. 구를 Lambertian 재질로 덮었지만 장면에는 빛이 없습니다. 따라서 기본 설정에 따라 Three.js는 전체 주변 조명으로 돌아가고 개체의 겉보기 색상은 개체 표면의 색상입니다. 간단한 포인트 조명을 추가해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

/ / 점 광원 생성
var pointLight =
new THREE.PointLight(0xFFFFFF)
// 점 광원 위치 설정
pointLight.position.x = 10; pointLight.position.y = 50;
pointLight.position.z = 130;
//장면에 점광원 추가
scene.add(pointLight)

7. 렌더링 루프 분명히 렌더러에 관한 모든 것이 설정되어 있습니다. 모든 것이 준비되었습니다.

코드 복사 코드는 다음과 같습니다.

//
renderer.render(장면, 카메라)


한 번이 아니라 여러 번 렌더링할 가능성이 높으므로 루프를 수행하려면 requestAnimationFrame을 사용해야 합니다. 이는 현재 브라우저에서 애니메이션을 처리하는 가장 좋은 방법이며 아직 완전히 지원되지는 않지만 Paul Irish의 블로그를 확인해 보시기 바랍니다.
8. 공통 개체 속성
Three.js의 소스 코드를 잠시 살펴보면 많은 개체가 Object3D에서 상속된다는 것을 알 수 있습니다. 이 기본 클래스에는 위치, 회전, 배율 조정 정보와 같은 유용한 속성이 많이 포함되어 있습니다. 특히 구는 Mesh 개체이고 Mesh 개체는 Object3D 개체에서 상속되지만 형상 및 재질과 같은 자체 속성 중 일부를 추가합니다. 왜 이런 말을 하는가? 아무것도 하지 않는 화면의 공만으로는 만족할 수 없기 때문에 이러한(역자 주: 기본 클래스에 있음) 속성을 사용하면 메쉬 개체 및 다양한 재질의 하위 수준 세부 정보를 조작할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// 구는 메쉬 객체입니다
sphere.geometry
// 구에는 일부 점 및 표면 정보가 포함되어 있습니다.
sphere.geometry.vertices // 배열
sphere.geometry.faces // 또 다른 배열
// 메쉬 객체는 object3d에서 상속됩니다. 객체
sphere.position // x, y, z 포함
sphere.rotation // 위와 동일
sphere.scale // ... 위와 동일

9. 불쾌한 비밀
빨리 알아냈으면 좋겠습니다. 예를 들어 메쉬 개체의 정점 속성을 수정하면 렌더링 루프 중에 아무 것도 변경되지 않는다는 것을 알 수 있습니다. 왜? Three.js는 메쉬 객체의 정보를 특정 최적화된 구조로 캐시하기 때문입니다. 실제로 해야 할 일은 Three.js에 무언가 변경되면 캐시의 구조를 다시 계산해야 한다는 플래그를 지정하는 것입니다.

코드 복사 코드는 다음과 같습니다.

// 지오메트리를 동적으로 설정하여 정점을 변경할 수 있도록 합니다.
sphere.geometry.dynamic = true
// Three.js에 정점을 다시 계산해야 함
sphere.geometry.__dirtyVertices = true;
// Three.js에 정점을 다시 계산해야 함
sphere.geometry.__dirtyNormals = true ;

더 많은 로고가 있지만 이 두 가지가 가장 유용하다고 생각합니다. 불필요한 계산 오버헤드를 피하기 위해 실제로 실시간으로 계산해야 하는 속성만 식별해야 합니다.
10. 요약
이 간략한 소개가 도움이 되길 바랍니다. 소매를 걷어붙이고 손을 더럽히는 것만큼 좋은 일은 없습니다. 꼭 그렇게 하시길 권합니다. 브라우저에서 3D 프로그램을 실행하는 것은 재미있고 Three.js와 같은 엔진을 사용하면 많은 번거로움이 사라지고 처음부터 정말 멋진 것에 집중할 수 있습니다.

이 튜토리얼의 소스 코드를 패키징했습니다. 참고용으로 다운로드하실 수 있습니다.