1. 큐브
이 모양의 이름은 Cubegeometry이지만 실제로는 입방 계입니다. 즉, 길이, 너비 및 높이는 다른 값으로 설정할 수 있습니다. 생성자는 다음과 같습니다.
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
너비 : X 방향의 길이
높이 : Y 방향의 길이
깊이 : z 방향의 길이
widthsegments : X 방향의 세그먼트 수 (선택 사항, 기본값 1)
Heightsegments : y 방향의 세그먼트 수 (위와 동일)
Depthsegments : Z 방향의 세그먼트 수 (위와 동일)
분리되지 않은 :
var material = new Three.MeshbasicMaterial ({color : 0xffff00, WireFrame : True}); DrawCube (장면, 재료); 함수 DrawCube (장면, 재료) {var cube = new Three.Mesh (new Three.CubeGeometrety (1, 2, 3), 재료); scene.add (큐브);}객체의 기본 위치는 원점이며, 큐브의 경우 원점에서 기하학적 중심의 위치입니다.
분할:
var cube = new Three.Mesh (New Three.CubeGeometry (1, 2, 3, 2, 2, 3), 재료);
왜 그렇게 많은 사악한 선이 있습니까? 버전 문제. R73 버전 :
이 세분화는 큐브의 복셀이 아닌 6 개의면을 세분화하므로 큐브의 중간에 분할되지 않으며 6 면만 분할됩니다.
2. 비행기
여기의 평면 (평면 게오 릿트)은 실제로 수학적 의미에서 무한한 크기의 평면이 아닌 사각형입니다. 생성자는 다음과 같습니다.
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
너비 : X 방향의 길이
높이 : Y 방향의 길이
widthsegments : X 방향의 세그먼트 수 (선택 사항, 기본값 1)
Heightsegments : y 방향의 세그먼트 수 (위와 동일)
새로운 3. 평면 게오 모트 (2, 4); 생성 된 평면은 X 축 및 Y 축이있는 평면에 있으며 효과는 다음과 같습니다.
3. 구체
구체의 생성자 (spheregegeometry)는 다음과 같습니다.
3.spheregeometry (반경, 세그먼트 스 와이드, 세그먼트 셰이트, 피스타르트, 필연적, thetastart, thetalength) // 반경 : 반경 // 세그먼트 스위드 : 길이에 대한 세그먼트 수 : 세그먼트 시이트 : 위도의 세그먼트 수 : 길이의 시작 // 필기의 반경. 위도의 시작 // thetalength : 위도 시작의 반경
3.1 위도 및 경도 세그먼트 수
먼저 Segmentswidth와 Segmentsheight를 이해해 봅시다. var sphere = new Three.spheregeometry (3, 8, 6)를 사용하여 반경 3이있는 구체를 만들고, 경도는 8 부로 나누어지고 위도는 아래 그림과 같이 6 개의 부분으로 나뉩니다.
Segmentswidth는 여러 꽃잎으로 절단되는 경도와 동일하지만 Segmentshight는 위도가 여러 층으로 절단되는 것과 같습니다.
새로운 세 가지의 효과 Spheregeometry (3, 5, 4) :
새로운 세 가지의 효과 Spheregeometry (3, 8, 6) :
새로운 세 가지의 효과 Spheregeometry (3, 18, 12) :
그래프의 기본 층을 구현할 때 곡선의 개념이 없으며 곡선은 모두 다중 폴리 라인 근사로 구성됩니다. 구체의 경우,이 두 값이 클 때, 형성된 다면체는 대략 구로 간주 될 수있다.
3.2 경도 아크
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) 시작 경도가 Math.pi / 6이고 경도 범위는 math.pi / 3임을 의미합니다.
효과는 다음과 같습니다.
여기에서 segmentswidth는 경도 가이 경도 범위 내에서 부품을 판단하기 전에 전체 구의 경도 대신 Math.pi/6이 Math.pi/3을 가로 지르는 영역에서 8 개의 블록으로 나뉘어져 있음을 의미합니다.
3.3 위도 라디안
위도 라디안에도 동일하게 적용됩니다. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) 위도가 Math.pi / 6에서 Math.pi / 3에 걸쳐 있다는 것을 의미합니다.
효과는 다음과 같습니다.
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4. 소스 코드
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 4 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "JS/Three.min.js"> </script> <script type = "text/javaScript"> function () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementByid ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); // 재료 var 자료 = 새로운 3.meshbasicmaterial ({color : 0xffff00, Wireframe : true}); DrawCube (장면, 재료); // 큐브 // 드로우 플레인 (장면, 재료); // 평면 // DrawSphere (장면, 재료); // sphere // renderer renderer.render (장면, 카메라); } 함수 drawCube (장면, 재료) {var Cube = new Three.Mesh (New Three.CubeGeometry (1, 2, 3, 2, 2, 3), 재료); scene.add (큐브); } 함수 드로우 플레인 (장면, 재료) {var 평면 = 새로운 3.mesh (새로운 3. 평면 지오메트리 (2, 4), 재료); scene.add (평면); } 함수 드로우 스피어 (장면, 재료) {var sphere = new Three.Mesh (new Three.SphereGeometry (3, 18, 12), Material); // var sphere = new Three (new Three.SphereGeometry (3, 8, 6, Math.Pi/ 6, Math.Pi/ 3), 재료); New Three (New Three. 0, math.pi * 2, math.pi / 6, math.pi / 3), 자료); // var sphere = new Three.Mesh (새 3.SphereGeometry (3, 8, 6, math.pi / 2, math.pi, math.pi / 6, math.pi / 2), 자료); scene.add (구); } </script> </html>위는 3.js에 의해 배운 기하학적 형태의 전체 내용입니다. 편집자는 3.js에 대한 기사를 상대방으로 업데이트합니다. wulin.com에 계속주의를 기울이십시오.