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: length in x direction
height: length in the y direction
depth: length in z direction
widthSegments: Number of segments in the x direction (optional, default value 1)
heightSegments: Number of segments in the y direction (same as above)
depthSegments: Number of segments in the z direction (same as above)
Unpartitioned:
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, and for a cube, 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 lines? Version issue. R73 version:
Note that this segmentation is segmenting six faces , rather than voxels of the cube, so it is not segmented in the middle of the cube, and only six sides are segmented.
2. Plane
The plane here (PlaneGeometry) 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 the y direction
widthSegments: Number of segments in the x direction (optional, default value 1)
heightSegments: Number of segments in the y direction (same as above)
new THREE.PlaneGeometry(2, 4); The created plane is in the plane where the x-axis and y-axis are located, 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: Radius at the beginning of longitude// phiLength: Radius at the beginning of longitude// thetaStart: Radius at the beginning of latitude// thetaLength: Radius at the beginning of 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 a radius of 3, longitude divided into 8 parts and latitude divided into 6 parts, as shown in the figure below.
segmentsWidth is equivalent to the longitude being cut into several petals, while 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 layer of the graph, there is no concept of curves, and curves are all composed of multiple polyline approximations. For spheres, when these two values are large, the polyhedron formed can be approximately regarded as spheres.
3.2 Longitude arc
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 effects are as follows:
Note that the segmentsWidth here means that the longitude is divided into 8 blocks in the area where Math.PI/6 crosses Math.PI/3, instead of the longitude of the entire sphere divided into 8 blocks before judging the part within this longitude range.
3.3 Latitude radian
The same applies to latitude radians. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) means that the latitude spans from Math.PI / 6 over Math.PI / 3.
The effects are 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 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 init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.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(camera); // material var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); drawCube(scene, material); //cube// drawPlane(scene, material); //plane// drawSphere(scene, material); //sphere// renderer 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>The above is the entire content of the geometric shapes learned by Three.js. The editor will update articles about Three.js one after another. Please continue to pay attention to Wulin.com.