Home>

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 thisSegmentation is to segment six facesInstead 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>
  • Previous Method for implementing txt popup on page using ajax technology
  • Next AngularJS basic ng-dblclick directive usage