This article uses example code to introduce in detail the implementation process of some geometric shapes in three.js.Including cubes, planes, and spheres

**Cube**

Although the shape is called cubeeometry, 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:**Length in the x direction

**height:**The length in the y direction

**depth:**Z-direction length

**widthsegments:**Number of segments in the x direction (optional, default 1)

**heightsegments:**Number of segments in the y direction (same as above)

**depthsegments:**Number of segments in z direction (same as above)

**Not segmented:**

```
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 the object is the origin,For cubes,Is the position of its geometric center at the origin.

**Segmentation:**

```
var cube=new three.mesh (new three.cubegeometry (1, 2, 3, 2, 2, 3), material);
```

Why are there so many evil threads?Version issues.r73 version:

Note this**Segmentation is to segment six faces**Instead of segmenting the voxels of the cube,So it is not segmented in the middle of the cube,Only six sides are segmented.

**Plane**

PlaneThe plane (planegeometry) here is actually a rectangle,Rather than a plane of infinite size in the mathematical sense.Its constructor is:

```
three.planegeometry (width, height, widthsegments, heightsegments)
```

**width:**Length in the x direction

**height:**The length in the y direction

**widthsegments:**Number of segments in the x direction (optional, default 1)

**heightsegments:**Number of segments in the y direction (same as above)

**new three.planegeometry (2, 4);**The plane created is in the plane where the x and y axes lie.The effect is as follows:

**3. sphere**

The constructor of a spheregeometry is:

```
three.spheregeometry (radius, segmentswidth, segmentsheight, phistart, philength, thetastart, thetalength)
//radius:radius
//segmentswidth:number of segments on longitude
//segmentsheight:number of segments in latitude
//phistart:radians at which longitude starts
//philength:radians crossed by longitude
//thetastart:the radian at which the latitude starts
//thetalength:radians crossed by latitude
```

**3.1 Number of longitude and latitude segments**

First, let's understand segmentswidth and segmentsheight. Use var sphere=new three.spheregeometry (3, 8, 6) to create a sphere with a radius of 3, longitude divided into 8 parts, and latitude divided into 6 parts.As shown below.

Segmentswidth is equivalent to longitude being cut into several petals,Segmentsheight is equivalent to the latitude being cut into several layers.

The effect of new three.spheregeometry (3, 5, 4):

The effect of threenew three.spheregeometry (3, 8, 6):

The effect of threenew three.spheregeometry (3, 18, 12):

In the implementation of the underlying graphics,There is no concept of a curve,The curve is approximately composed of multiple polylines.For a sphere,When these two values are larger,The formed polyhedron can be approximated as a sphere.

**3.2 Longitude radians**

```
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 a segment width of 8 means that for the longitude from math.pi/6 to math.pi/3, it is divided into 8 blocks, not the longitude of the entire sphere. section.

**3.3 Latitude radians**

Latitude radian is the same.```
new three.spheregeometry (3, 8, 6, 0, math.pi * 2, math.pi/6, math.pi/3)
```

means that latitude crosses math.pi/3 from math.pi/6.

The effect is as follows:

```
new three.spheregeometry (3, 8, 6, math.pi/2, math.pi, math.pi/6, math.pi/2)
```

's effect:

**4. Source code**

```
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.js test four</title>
</head>
<body onload="init ()">
<canvas 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);
//material
var material=new three.meshbasicmaterial ({
color:0xffff00, wireframe:true
});
drawcube (scene, material);//Cube
//drawplane (scene, material);//plane
//drawsphere (scene, material);//sphere
//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>
```

- python - you may need to restart the kernel to use updated packages error
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- javascript - how to check if an element exists in puppeteer
- python 3x - typeerror: 'method' object is not subscriptable
- i want to call a child component method from a parent in vuejs
- xcode - pod install [!] no `podfile 'found in the project directory
- dart - flutter: the instance member'stars' can't be accessed in an initializer error