소개
이 기사는 주로 3.js의 관련 개념을 설명하고 독자들이 3.js 및 관련 지식에 대한 상대적으로 완전한 이해를 개발하도록 도와줍니다.
웹은 최근 몇 년 동안 빠르게 발전했습니다. HTML5의 인기로 인해 웹 페이지의 성능 기능이 점점 더 강력 해지고 있습니다. 웹 페이지에는 이미 많은 복잡한 애니메이션과 절묘한 효과가 있습니다.
그러나 사람들은 항상 탐욕 스럽습니다. 그렇다면이 위에서 무엇을 할 수 있습니까? 그 중 하나는 WebGL을 통해 웹 페이지에 고성능 3D 그래픽을 그리는 것입니다.
Opengl, WebGL에서 3.js
많은 사람들이 아마도 가장 일반적으로 사용되는 크로스 플랫폼 그래픽 라이브러리 인 OpenGL 에 대해 들었을 것입니다.
WebGL 은 OpenGL에서 설계 한 웹 지향 그래픽 표준으로, 그래픽 렌더링이 활용하여 더 높은 성능을 달성 할 수있는 일련의 JavaScript API를 제공합니다.
Three.js는 WebGL 인터페이스를 캡슐화하고 단순화하여 형성된 사용하기 쉬운 그래픽 라이브러리입니다.
간단히 말해서 : WebGL은 브라우저에서 제공하는 인터페이스로 간주 될 수 있습니다. JavaScript 에서이 API는 직접 사용하여 3D 그래픽을 그릴 수 있습니다. 3.js는 이러한 인터페이스를 더 유용하게 캡슐화하는 데 도움이됩니다.
WebGL과 Three.js의 비교
WebGL이 있기 때문에 왜 여전히 3.js가 필요합니까?
이는 WebGL의 임계 값이 상대적으로 높고 상대적으로 더 많은 수학적 지식이 필요하기 때문입니다. WebGL은 프론트 엔드 API를 제공하지만 WebGL 및 프론트 엔드 개발은 본질적으로 두 가지 방향이며 지식의 겹치지 않습니다. 관련성은 모두 웹 플랫폼에 있으며 모두 JavaScript를 사용한다는 것입니다. 프론트 엔드 프로그래머는 분석 지오메트리에 익숙 할 수 있지만, 선형 대수에 익숙한 사람은 거의 없어야합니다 (예를 들어, 역전 전달 행렬을 찾으려고 시도해보십시오). 매트릭스 작업의 물리적 중요성이 사용 중에도 강조되는 것은 말할 것도 없습니다.
따라서 프론트 엔드 엔지니어가 짧은 시간에 WebGL을 시작하는 것은 매우 어렵습니다.
따라서 Three.JS는 WebGL에서 제공하는 인터페이스를 매우 잘 캡슐화하여 많은 세부 사항을 단순화하고 학습 비용을 크게 줄입니다. 그리고 WebGL에서 유연성 손실은 거의 없습니다.
따라서 Three.js로 시작하는 것은 권장 할 가치가 있으며,이를 통해 짧은 연구 후에는 대부분의 수요 시나리오에 직면 할 수 있습니다.
3.JS 학습 문제
Three.js로 시작하는 것은 비교적 간단하지만 실제로 배울 때 당황스러운 문제를 발견 할 것입니다. 관련 학습 자료는 거의 없습니다.
일반적 으로이 인기있는 도서관에는 매우 완전한 문서가 있으며 종종 공식 문서 나 공식 입문 자습서에서 배우는 가장 좋은 방법입니다. 그러나 세 가지는 초보자에게는 너무 간결합니다.
그러나 공무원은 매우 풍부한 다양한 사례를 제공하며 필요한 거의 모든 사용법은 특정 예에 반영됩니다. 그러나 이러한 예는 시작하기에 적합하지 않지만 시작 후 추가 학습에 적합합니다.
비교적 좋은 튜토리얼은 다음과 같습니다.
Three.js 시작 가이드
이것은 3.js를위한 좋은 가벼운 소개 자습서 입니다. 저자는 글쓰기 스타일이 매우 좋으며 기본 지식은 간결하고 쉽게 이해할 수 있습니다.
Three.JS 개발 가이드 (첫 번째 중국어 버전)
학습 3. JS- 두 번째 판
학습 3.js : WebGL의 JavaScript 3D 라이브러리는 3.js의 몇 안되는 소수의 소개 책으로, 3.js의 다양한 기능을보다 포괄적 인 방식으로 설명합니다.
능력이 있다면 2015 년에 출판 된 English 버전의 두 번째 판을 읽는 것이 좋습니다. 이는 현재 3.js와 매우 다른 작습니다.
중국어 버전은 2012 년에 출판 된 원래 책의 첫 번째 판에서 번역되었습니다. 대부분의 개념은 적용 가능하지만 많은 세부 사항이 변경되었습니다.
3.js 튜토리얼
이것은 총 6 개의 기사가 있는 외국 튜토리얼의 번역입니다. 많이 설명하지는 않지만 각 기본 기능을 사용하는 방법에 관한 것입니다. 일부 그래픽 재단을 가진 학생들에게 더 적합합니다.
물론, 이러한 자료는 실제 학습 과정에서 충분하지 않습니다. 문제가 발생할 때 여전히 자료를 직접 확인해야합니다. 그러나 Three.js가 상당히 자주 업데이트되었으며 이제 R80 버전입니다. R1이 2010 년 4 월에 출시 된 이후, 이것은 72 번째 버전입니다 (중간의 일부 버전 번호는 건너 뜁니다). 따라서 인터넷에서 발견 된 일부 정보는 현재 버전에 적합하지 않을 수 있으므로 식별에주의를 기울여야합니다 (이전에 권장되는 정보에는 어느 정도 문제가 있거나 적은 문제가 있습니다).
3.js의 일부 개념
화면에 3D 그래픽을 표시하려면 아이디어는 일반적으로 다음과 같습니다.
3 차원 공간 구축
셋째, 관찰 지점을 선택하고 관찰 방향/각도 등을 결정하는 것은 장면 (장면)이라고 불립니다.
세 개는 장면에 관찰하기 위해 객체를 추가하기 위해 카메라 (카메라)라고 부릅니다.
메쉬, 라인, 포인트 등을 포함하여 3 가지 유형의 객체가 많이 있습니다. 모두 Object3d 클래스에서 상속하면 관찰 된 장면을 화면의 지정된 영역으로 렌더링합니다.
렌더러를 세 개로 사용하여이를 수행하십시오
이러한 개념을 세 가지 자세히 살펴 보겠습니다.
장면
장면은 모든 물체의 컨테이너이며, 우리가 만든 3 차원 세계에도 해당합니다.
카메라 좌표계
카메라는 3 차원 세계의 관찰자입니다. 이 세상을 관찰하기 위해 먼저 우주의 위치를 설명해야합니다.
일반적인 오른쪽 좌표계는 3 개로 사용됩니다.
3 차원 투영
3 개의 카메라에는 3 가지 카메라, 즉 직교 프로젝션 카메라 3 개가 있습니다.
직교 투영과 관점 투영의 차이는 위 그림에 나와 있습니다. 왼쪽 그림은 직교 투영입니다. 물체에 의해 방출되는 빛은 화면과 평행하게 투영되며, 사각형은 크기가 같은 크기입니다. 올바른 그림은 원근감 투영으로, 가까운 곳에서 크고 작고 작으며 일반적인 사물을 바라 보는 느낌과 일치합니다.
Wikipedia : 3D 프로젝션
직교 투영 카메라
참고 : 그림의 "뷰 포인트"는 3 개의 카메라에 해당합니다.
여기에 우리는 시각적 신체의 개념을 추가합니다. 시각적 몸은 기하학적 몸체이며, 시각적 몸의 물체 만 우리가 볼 수 있으며 시각적 몸 외부의 물체는 잘릴 것입니다. 이것은 불필요한 작업을 제거하는 것입니다.
직교 프로젝션 카메라의 시야는 입방체입니다. orthographiccamera의 생성자는 다음과 같습니다. orthographiccamera (왼쪽, 오른쪽, 상단, 하단, 근처, 멀리)
카메라 자체는 점으로 간주 될 수 있지만 왼쪽은 왼쪽 평면과 카메라 사이의 거리를 왼쪽과 오른쪽 방향으로 나타냅니다. 다른 매개 변수에도 동일하게 적용됩니다. 따라서, 6 개의 파라미터는 각각보기 본문의 6면의 위치를 정의합니다.
시청 본체의 물체가 가까운 평면과 평행하게 투사 된 다음 근처 평면의 이미지가 화면에 렌더링된다고 가정 할 수 있습니다.
관점 프로젝션 카메라
Perspective Projection Camera의보기 본체는 4- 엣지 플랫폼이며 생성자는 다음과 같습니다. PerspectiveCamera (FOV, Aspect, Near, Far)
FOV는 그림의 관점에 해당하며, 이는 상단과 하단 사이의 각도입니다. 측면은 가까운 평면의 종횡비입니다. 멀리 떨어진 평면 거리와 원거리 거리에 가까운 거리를 추가하면 시각적 장면을 결정하는 유일한 방법입니다.
Perspective Projection 카메라는 일반적인 시청 느낌과 매우 일치하므로 대부분의 경우 관점 프로젝션 카메라를 사용하여 3D 효과를 표시합니다.
사물
카메라를 사용하면 무언가를 봐야합니까? 장면에 몇 가지 물체를 추가하십시오.
세 개로 표시 할 객체가 많이 있으며, 모두 Object3d 클래스에서 상속됩니다. 여기서 우리는 주로 메쉬와 포인트를 살펴 봅니다.
망사
우리는 컴퓨터 세계에서 아크가 유한 한 점으로 구성된 유한 라인 세그먼트로 연결되어 있음을 알고 있습니다. 선이 많으면 매끄러운 아크처럼 보입니다.
컴퓨터의 3 차원 모델은 비슷합니다. 일반적인 관행은 삼각형 그리드를 사용하여 설명하는 것입니다. 우리는이 모델을 메쉬 모델이라고합니다.
이것은 유명한 스탠포드 토끼입니다. 3D 그래픽에서의 위치는 잘 알려진 디지털 이미지 처리 분야 인 Lena의 위치와 유사합니다.
삼각형의 수가 증가함에 따라이 토끼를보십시오. 표면이 더 부드럽거나 정확 해집니다.
셋째, 메쉬의 생성자는 다음과 같습니다. 메쉬 (지오메트리, 재료)
형상은 모양이며 재료는 재료입니다.
메쉬뿐만 아니라이 두 속성은 많은 객체를 만드는 데 사용됩니다. 이 두 가지 중요한 속성을 살펴 보겠습니다.
기하학
형상, 모양은 매우 직관적입니다. Geometry는 모델을 사용하여 포인트 세트와 포인트 간의 관계 (삼각형을 형성)를 저장하여 물체의 모양을 설명하는 목적을 달성합니다.
세 가지는 큐브 (실제로 입방체), 평면 (실제로 직사각형), 구체, 원, 실린더 및 둥근 테이블과 같은 많은 기본 모양을 제공합니다.
각 지점의 위치를 직접 정의하여 모양을 구성 할 수도 있습니다.
보다 복잡한 모양의 경우 외부 모델 파일을 통해 가져올 수도 있습니다.
재료
재료, 재료, 이것은 모양만큼 직관적이지 않습니다.
재료는 실제로 색상, 질감, 부드러움, 투명성, 반사율, 굴절률 및 광도와 같은 물체 표면의 모양을 제외한 모든 시각적 속성의 모음입니다.
여기서 우리는 재료,지도 및 질감의 관계에 대해 이야기 할 것입니다.
자료는 위에서 언급되었으며지도 및 기타지도가 포함됩니다.
스티커는 실제로 '붙여 넣기'와 '붙여 넣기'이며 여기에는 그림과 그림을 게시해야합니다.
질감은 실제로 '그림'입니다.
Three는 선택할 수있는 다양한 재료를 제공하며 확산/반사 반사 및 기타 재료를 자유롭게 선택할 수 있습니다.
전철기
메쉬에 대해 이야기 한 후 다른 객체 인 포인트를 살펴 보겠습니다.
포인트는 실제로 많은 포인트 모음입니다. 그것은 오랫동안 입자 시스템이라고 불렀습니다. R68 버전의 PointCloud로 이름이 바뀌 었으며 R72 버전의 이름이 바뀌 었습니다. 이름 변경은 주로 입자 시스템이 입자 및 관련 물리적 특성의 처리를 포함하는 완전한 시스템이어야한다고 생각하기 때문에 주로 이름 변경은 3의 점수는 훨씬 간단합니다. 결국이 클래스의 이름은 포인트입니다.
점점을 달성하는 데 사용될 수있는 전형적인 효과는 다음과 같습니다. 공식적인 예
빛
하나님은 말씀하셨습니다. 빛이 있어야합니다!
빛과 그림자 효과는 그림을 풍부하게하는 중요한 요소입니다.
Three는 Ambient Light Ambientlight, Point Light Source Pointlight, Spotlight Spotlight, Directional Light Direction Agalight, Hemisphere Light Hemisphere Light 및 기타 빛을 포함한 다양한 광원을 제공합니다.
필요한 광원을 장면에 추가하십시오.
렌더러
다양한 객체가 장면, 빛 및 객체를 관찰하는 카메라에 내장되어 있으며, 화면에 보는 것을 렌더링 할 때입니다. 그것이 렌더하는 일입니다.
렌더러는 캔버스 객체를 바인딩하고 크기, 기본 배경색 등과 같은 속성을 설정할 수 있습니다.
렌더러의 렌더링 기능을 호출하고 장면과 카메라를 통과하면 이미지를 캔버스로 렌더링 할 수 있습니다.
사진을 움직입니다
이제 정적 사진을 얻을 수 있습니다. 어떻게 움직일 수 있습니까?
매우 간단한 아이디어는 장면에서 객체의 위치, 각도 및 다양한 속성을 변경 한 다음 렌더링 함수를 호출하여 렌더링하는 것입니다.
그렇다면 다시 렌더링의 타이밍을 어떻게 결정합니까?
html5는 우리에게 requestanimframe을 제공합니다.
우리가 이것을 처음에 렌더링한다면 :
함수 render () {renderer.render (장면, 카메라);}이것으로 변경하십시오.
함수 render () {requestAnimationFrame (render); object.position.x += 1; 렌더러 렌더 (장면, 카메라);}물체가 움직일 수 있습니다!
밤나무를 줘
간단한 예제를 사용 하여이 프로세스를 정리해 봅시다.
먼저 캔버스 요소가있는 페이지를 작성하십시오.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 큐브 </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"> <script> <style type = "text/css"> html, body {margin : 0; 패딩 : 0; } #three_canvas {위치 : 절대; 너비 : 100%; 높이 : 100%; }아래의 JavaScript 부분을하겠습니다
먼저 Renderer 초기화합니다
함수 initRenderer () {width = document.getElementById ( 'Three_Canvas'). clientWidth; height = document.getElementById ( 'Three_Canvas'). ClientHeight; renderer = new Three.WebGlrenderer ({// 캔버스 바인드 렌더 캔버스 : Document.GetElementById ( 'Three_Canvas')}; 렌더러 .SetSize (너비, 높이); // 렌더링 크기를 Canvas renderer와 동일하게 설정합니다. SETCLEARCOLOR (0xffffff, 1.0); // 기본 색상 및 투명성 설정}}초기화 시나리오 :
함수 initscene () {scene = new Three.Scene ();}카메라 초기화 :
함수 initcamera () {// 뷰포트의 중심을 향한 간단한 직교 프로젝션 카메라는 뷰포트 크기가 캔버스 크기와 동일합니다. 카메라 = 새로운 3.othographiccamera (너비 / -2, 너비 / 2, 높이 / 2, 높이 / -2, 1, 1000); // 카메라 위치를 설정합니다. camera.x = 0; Camera.Position.y = 0; Camera.Position.z = 200; // 카메라의 위쪽 방향 카메라를 설정합니다 .up.x = 0; 카메라 .up.y = 1; 카메라 .up.z = 0; // 카메라의 초점 위치 설정 (실제로 방향을 결정하기 위해) 카메라.카메라의 위치와 방향을 고유하게 결정하기 위해 위치의 세 가지 속성, UP 및 Lookat은 필수 불가결합니다.
여기서 우리는 직교 프로젝션 카메라를 만들었습니다. 여기서는 조회수의 단위 길이가 화면의 픽셀에 해당하도록 편의를 위해 화면 해상도와 일치하는 것을 유지합니다.
우리는 카메라를 z 축에 배치하고 좌표 원점을 향하고 카메라의 상위 방향은 y 축입니다. UP의 방향과 Lookat의 방향은 수직이어야합니다 (자신의 머리와 자신을 비교하는지 알 수 있습니다).
장면에 추가 된 큐브가 있습니다.
함수 initObject () {// 측면 길이가 100 var geometry = new 3.cubegeometry (100, 100, 100)의 큐브를 만듭니다. Object = New Three.Mesh (Geometry, New Three.MeshnormalMaterial ()); scene.add (Object);}큐브의 각면 의 색상은이면을 향한 방향과 관련이 있으므로 관찰/디버그를보다 쉽게 관찰 할 수 있습니다.
이 간단한 데모에서는 빛과 그림자 효과를 추가 할 계획이 없으며 정상적인 재료는 빛에 반응하지 않습니다.
마지막으로 애니메이션 루프를 만듭니다
함수 render () {requestAnimationFrame (render); Object.rotation.x += 0.05; Object.rotation.y += 0.05; 렌더러 렌더 (장면, 카메라);}각 페인트는 큐브가 약간 회전하게 만듭니다.
페이지가로드되면 이전 기능을 호출하십시오.
함수 threestart () {initrenderer (); initcamera (); initscene (); initObject (); render ();} window.onload = threestart ();완전한 데모는 다음과 같습니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 큐브 </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"> <script> <style type = "text/css"> html, body {margin : 0; 패딩 : 0; } #three_canvas {위치 : 절대; 너비 : 100%; 높이 : 100%; . var 너비, 높이; 함수 initRenderer () {width = document.getElementById ( 'Three_Canvas'). clientWidth; height = document.getElementById ( 'Three_Canvas'). ClientHeight; renderer = new Three.WebGlrenderer ({Canvas : Document.GetElementById ( 'Three_Canvas')); 렌더러 .SetSize (너비, 높이); renderer.setClearColor (0xfffff, 1.0); } function initCamera () {camera = new Three.othographiccamera (너비 / -2, 너비 / 2, 높이 / 2, 높이 / -2, 1, 1000); camera.position.x = 0; Camera.Position.y = 0; Camera.Position.z = 200; 카메라 .up.x = 0; 카메라 .up.y = 1; 카메라 .up.z = 0; camera.lookat ({x : 0, y : 0, z : 0}); } 함수 initScene () {scene = new Three.Scene (); } function initObject () {var geometry = new Three.CubeGeometry (100, 100, 100); Object = New Three.Mesh (Geometry, New Three.MeshnormalMaterial ()); scene.add (객체); } 함수 render () {requestAnimationFrame (render); Object.rotation.x += 0.05; Object.rotation.y += 0.05; 렌더러. 렌더 (장면, 카메라); } 함수 threestart () {initrenderer (); initcamera (); initscene (); initObject (); 세우다(); } window.onload = threestart (); </script> </body> </html>HTML로 저장 한 후 열면 화면 중앙에 회전 큐브가 표시됩니다.
요약
그게 전부 3.js를 소개하는 것입니다. 이 기사는 기본적으로 3 개의 중요한 구성 요소를 언급합니다. 사실, 요약하고 싶은 많은 것들이 있지만이 기사에 쓰는 것은 번거로운 것처럼 보일 수 있습니다. 이 기사의 원래 의도는 독자들이 읽은 후 3.js에 대한 직관적이고 일반적인 이해를 갖도록하는 것입니다. 너무 많은 세부 사항을 포함시키지 않습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.