머리말
Three.JS는 가장 우수한 WebGL 오픈 소스 프레임 워크 중 하나 인 3DJS 라이브러리입니다. WebGL 외에도 Three.JS는 캔버스 및 SVG 태그를 기반으로 렌더러를 제공합니다. 디버깅에 Chrome 또는 Firefox를 사용하는 것이 좋습니다.
1. 카메라
그래픽의 카메라는 3 차원 공간에서 2 차원 화면이 어떻게 투사되는지 정의합니다.
투영 방법의 경우 카메라는 직교 프로젝션 카메라 및 원근 투영 카메라로 나뉩니다.
2. 두 카메라의 적용의 차이와 범위
직교 투영 :
원근 투영 :
직교 투영은 수학 수업에서 묘사 된 것과 같습니다. 원근 투과는 기본 점, 즉 거리의 물체는 근처의 물체보다 작으며 가까운 곳에서는 더 크고 작습니다.
그리기 및 모델링 소프트웨어의 경우 직교 투영이 일반적으로 사용됩니다. 대부분의 다른 응용 분야에서는 일반적으로 관점 투영이 사용됩니다.
3. 직교 투영 카메라
직교 투영 카메라의 생성자 :
Three.othographiccamera (왼쪽, 오른쪽, 상단, 하단, 근처, 멀리)
6 개의 매개 변수는 직교 투영 카메라로 캡처 한 6면의 위치를 나타냅니다.
그중 근처는 근처 평면과 카메라의 중심 지점 사이의 수직 거리를 나타냅니다 . 먼 비행기와 카메라의 중심 지점 사이의 수직 거리를 멀리합니다 .
카메라의 수평 및 수직 비율을 유지하려면 (오른쪽 왼쪽) 과 (상단 바닥) 의 비율은 캔버스의 종횡비와 일치해야합니다.
그림에서 볼 수 있듯이, 가까운 값과 멀리 떨어진 값은 긍정적이어야하며 멀리야합니다 . 마지막 두 값이 (0, 0) 인 경우, 즉 가까운 값이 동일하고, 시야의 깊이가 사라지고 전체보기 본체가 평면으로 누르면 디스플레이가 올바르지 않습니다.
4. 직교 투영 카메라 예제
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> <script type = "text/javascript"src = "js/tinge/ty.min.Min.Min.Min.Min. type = "text/javaScript"> function init () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementByid ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라를 설정합니다 = 새로운 3.othographiccamera (-2, 2, 1.5, -1.5, 1, 10); Camera.Position.set (0, 0, 5); //camera.lookat(New Three.vector3 (0, 0, 0)); scene.add (카메라); // 큐브 var cube = new Three.Mesh (new Three.CubeGeometry (1, 1, 1), New Three.MeshbasicMaterial ({Color : 0xff0000, WireFrame : True}); scene.add (큐브); // 렌더 렌더러 렌더 (장면, 카메라); } </script> </body> </html> THREE.MeshBasicMaterial 의 와이어 프레임 속성이 참 이면, 재료는 와이어 프레임으로 렌더링됩니다.
현재 위치의 가장자리는 앞쪽의 위치와 완전히 일치한다는 것을 알 수 있습니다.
4.1 뷰의 길이와 너비 비율 변경
여기서, 캔버스의 종횡비는 4 : 3이고, 카메라의 수평 거리는 4이고, 수직 거리는 3이므로 길이와 너비 비율은 변경되지 않은 상태로 유지됩니다 (1 : 1).
카메라의 수평 거리가 2로 줄어든 경우
var camera = new Three.othographiccamera (-1,1,1.5, -1.5,1,10);
물체가 길어집니다.
카메라의 시야가 좁아서 시야 내에서 큐브의 측면 비율이 증가하여 큐브의 넓어지는 것으로 나타납니다.
4.2 카메라 위치를 변경하십시오
예제의 카메라 위치는 (0,0,5)입니다. 카메라는 기본적으로 z 축의 네거티브 방향으로 배치되므로 원점에서 큐브를 볼 수 있습니다.
카메라 위치를 오른쪽으로 1 단위로 이동하십시오.
var camera = new Three.othographiccamera (-2,2,1.5, -1.5,1,10); Camera.Position.set (1,0,5);
카메라가 물체를 향하여 카메라가 오른쪽으로 움직이고 켜지는 물체가 왼쪽으로 움직입니다.
4.3보기의 위치를 변경하십시오
보기를 오른쪽으로 설정하십시오.
var camera = new Three.othographiccamera (-1,3,1.5, -1.5,1,10); Camera.Position.set (1,0,5);
카메라를 올바르게 움직이는 것처럼.
4.4 카메라 각도를 변경하십시오
Camera.Position.set (4, -3,5); Camera.LOOKAT (New Three.Vector3 (0, 0, 0));
그러나 이제 카메라는 z 축의 부정적인 방향을 따라 관찰하고 있으므로 큐브를 관찰 할 수 없으며 검은 색 만 볼 수 있습니다. LookAt 함수를 통해 원점의 방향을 지정할 수 있습니다.
Camera.LOOKAT (New Three.Vector3 (0, 0, 0));
lookAt 함수는 THREE.Vector3 인스턴스를 허용합니다. camera.lookAt(0, 0, 0) 로 쓰지 마십시오.
좋아요, 위는 3.js 학습 직교 프로젝션 카메라의 전체 내용입니다. 모든 사람이 Three.js를 배우는 것이 도움이되기를 바랍니다. 편집자는 3.js에 대한 기사를 상대방으로 업데이트합니다. wulin.com에 계속주의를 기울이십시오.