1. Cube
Although the name of this shape is CubeGeometry, it is actually a cuboid, that is, the length, width and height can be set to different values. Its constructor is:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
width: the length in the x direction
height: the length in the y direction
depth: the length in the z direction
widthSegments: the number of segments in the x direction (optional, the default value is 1)
heightSegments: the number of segments in the y direction (same as above )
depthSegments: number of segments in z direction (same as above ) unsegmented
:
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true});drawCube(scene, material);function drawCube(scene, material) { var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material); scene.add(cube);}
The default position of an object is the origin, or in the case of a cube, its geometric center at the origin.
Segment:
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
Why are there so many evil lines? version problem. R73 version: 
Note that this segmentation is segmenting the six faces , not the voxels of the cube, so the middle of the cube is not segmented, only the six sides are segmented.
2. Plane
The plane (PlaneGeometry) here is actually a rectangle, not a plane of infinite size in the mathematical sense. Its constructor is:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
width: length in x direction
height: length in y direction
widthSegments: number of segments in x direction (optional, default value 1)
heightSegments: number of segments in y direction (same as above)
new THREE.PlaneGeometry(2 , 4); The created plane is in the plane of the x-axis and the y-axis, and the effect is as follows: 
3. Sphere
The constructor of the sphere (SphereGeometry) is:
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)// radius: radius // segmentsWidth: number of segments on longitude // segmentsHeight: number of segments on latitude // phiStart: starting from longitude radians // phiLength: radians spanned by longitude // thetaStart: radians where latitude starts // thetaLength: radians spanned by latitude
3.1 Number of latitude and longitude segments
First, let's understand segmentsWidth and segmentsHeight. Use var sphere = new THREE.SphereGeometry(3, 8, 6) to create a sphere with radius 3, longitude divided into 8 parts, and latitude divided into 6 parts, as shown in the following figure. 
segmentsWidth is equivalent to the longitude being cut into several pieces, and segmentsHeight is equivalent to the latitude being cut into several layers.
The effect of new THREE.SphereGeometry(3, 5, 4): The effect of 
new THREE.SphereGeometry(3, 8, 6): The effect of 
new THREE.SphereGeometry(3, 18, 12): 
In the implementation of the underlying graphics, and There is no concept of a curve, and a curve is approximately composed of multiple polylines. For a sphere, when these two values are large, the formed polyhedron can be approximately regarded as a sphere.
3.2 Longitude radian
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) means that the starting longitude is Math.PI / 6, and the longitude span is Math.PI / 3. The effect is as follows: 
Note that the segmentsWidth is 8 here, which means that the longitude spanning from Math.PI / 6 to Math.PI / 3 is divided into 8 blocks, not the longitude of the entire sphere is divided into 8 blocks and then judged in this longitude part of the range.
3.3 Latitude in radians
Latitude and radians are the same. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) means the latitude spans Math.PI / 3 from Math.PI / 6. The effect is as follows: The effect of 
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2): 
4. Source code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js测试四</title> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-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(camera); // 材质 var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); drawCube(scene, material);//立方体 // drawPlane(scene, material);//平面 // drawSphere(scene, material); //球体 // render renderer.render(scene, camera); }function drawCube(scene, material) { var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material); scene.add(cube); }function drawPlane(scene, material) { var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material); scene.add(plane); }function drawSphere(scene, material) { var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material); // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material); // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material); //var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material); scene.add(sphere); } </script> </html>