Three. js source code annotation (18th) extras/geometries/BoxGeometry. js, three. jsgeometries

Three. js source code annotation (18th) extras/geometries/BoxGeometry. js, three. jsgeometries

Wuji (http://blog.csdn.net/omni360)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Wuji-this blog focuses on Agile development and mobile and IOT device research: data visualization, GOLANG, Html5, WEBGL, THREE. JS. Otherwise, the post from this blog will not be reprinted or reprinted. Thank you for your cooperation.

I also just started learning. Sorry for the errors in many places.

The following code is a comment on the extras/geometries/BoxGeometry. JS file in the THREE. js source code file.

More updates in: https://github.com/omni360/three.js.sourcecode

/*** @ Author mrdoob/http://mrdoob.com/* based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Cube.as * // BoxGeometry is used to create a cube box object in 3D space. //// usage: var geometry = new THREE. boxGeometry (1, 1); // var material = new THREE. meshBasicMaterial ({color: 0x00ff00}); // var cube = new THREE. mesh (geometry, material); // scene. add (cube); * // <summary> Bo XGeometry </summary> /// <param name = "width" type = "float"> cube width </param> /// <param name = "height" type =" float "> cube height </param> /// <param name =" depth "type =" float "> cube depth </param> /// <param name =" widthSegments "type =" int "> cube width subdivision line segments </param> // <param name =" heightSegments "type =" int "> cube height subdivision line segments </param> /// <param name = "depthSegments" type = "int"> Number of cube depth segments </param> THREE. boxGeometry = function (width, height, Depth, widthSegments, heightSegments, depthSegments) {THREE. geometry. call (this); // call the call method of the Geometry object, and hand over the method originally belonging to the Geometry to the current object BoxGeometry for use. this. parameters = {width: width, height: height, depth: depth, widthSegments: widthSegments, heightSegments: heightSegments, depthSegments: depthSegments}; this. widthSegments = widthSegments | 1; this. heightSegments = heightSegments | 1; this. depthSegments = depth Segments | 1; var scope = this; var width_half = width/2; var height_half = height/2; var depth_half = depth/2; buildPlane ('Z ', 'y',-1,-1, depth, height, width_half, 0); // px buildPlane ('Z', 'y', 1,-1, depth, height,-width_half, 1); // nxbuildPlane ('x', 'z', 1, 1, width, depth, height_half, 2 ); // pybuildPlane ('x', 'z', 1,-1, width, depth,-height_half, 3); // nybuildPlane (' X', 'y', 1,-1, width, height, depth_half, 4); // pzbuildPlane ('x', 'y',-1,-1, width, height,-depth_half, 5 ); // nz // <summary> buildPlane </summary> // <param name = "u" type = "String"> value range: "x, y, z ", the ing between the u coordinate and xyz coordinate of the build plane </param> // <param name = "v" type = "String"> value range: "x, y, z ", the ing between the v coordinate and xyz coordinate of the build plane </param> // <param name = "udir" type = "float"> is the vertex and direction of the origin </param> /// <param name = "vdir" type = "float"> Calculate the direction of the vertex and origin in the v direction of the plane </param> // <param name = "width" type = "float"> cube width </param>/ // <param name = "height" type = "float"> cube height </param> /// <param name = "depth" type = "float"> cube depth half (why? The Cube is centered on the origin !) </Param> // <param name = "materialIndex" type = "int"> Material Index Number </param> function buildPlane (u, v, udir, vdir, width, height, depth, materialIndex) {var w, ix, iy, gridX = scope. widthSegments, gridY = scope. heightSegments, width_half = width/2, height_half = height/2, offset = scope. vertices. length; // determine the w coordinate through the uv parameter to determine the direction of the plane. Imagine that the cube has six planes and buildPlane is used to construct the Triangle Plane. if (u = 'X' & v = 'y') | (u = 'y' & v = 'X') {w = 'Z';} else if (u = 'X' & v = 'Z ') | (u = 'Z' & v = 'X') {w = 'y'; gridY = scope. depthSegments;} else if (u = 'Z' & v = 'y ') | (u = 'y' & v = 'Z') {w = 'X'; gridX = scope. depthSegments;} var gridX1 = gridX + 1, gridY1 = gridY + 1, segment_width = width/gridX, segment_height = height/gridY, normal = new THREE. vector3 (); normal [w] = depth> 0? 1:-1; for (iy = 0; iy <gridY1; iy ++, the order of these vertices should be used below. // If You Want To define a ry object, calculate vertices, and triangles, it is essential. here, you need to store the order of the vertex and the building order of the plane, and have a clear geometric image in your mind. do more exercises. for (ix = 0; ix <gridX1; ix ++) {var vector = new THREE. vector3 (); vector [u] = (ix * segment_width-width_half) * udir; vector [v] = (iy * segment_height-height_half) * vdir; vector [w] = depth; scope. vertices. push (vector); // calculates the coordinates of the vertex Based on the length, width, height, direction, and number of line segments .}} for (iy = 0; iy <gridY; iy ++) {// This is a very important step to build a ry, based on a triangle surface, splice the cube into a plane for (ix = 0; ix <gridX; ix ++) {// calculate the four vertices that constitute the rectangle of the cube surface, a, B, c, d, I often mistakenly think of it as a, B, c, d, and 4 sides. Here it should be the influence of the geometric knowledge I learned. var a = ix + gridX1 * iy; var B = ix + gridX1 * (iy + 1); var c = (ix + 1) + gridX1 * (iy + 1 ); var d = (ix + 1) + gridX1 * iy; var Va = new THREE. vector2 (ix/gridX, 1-iy/gridY); var ultraviolet B = new THREE. vector2 (ix/gridX, 1-(iy + 1)/gridY); var uvc = new THREE. vector2 (ix + 1)/gridX, 1-(iy + 1)/gridY); var uvd = new THREE. vector2 (ix + 1)/gridX, 1-iy/gridY); var face = new THREE. face3 (a + offset, B + offset, d + offset); // The triangle face composed of a, B, and c3 vertices. normal. copy (normal); face. vertexNormals. push (normal. clone (), normal. clone (), normal. clone (); // method vector of the calculated face. materialIndex = materialIndex; // scope of the Material Index assigned to the assignment plane. faces. push (face); scope. faceVertexUvs [0]. push ([ultraviolet A, ultraviolet B, uvd]); face = new THREE. face3 (B + offset, c + offset, d + offset); // a triangular surface composed of three vertices, namely, B, c, and d. A plane has two triangular surfaces, have you ever seen it. face. normal. copy (normal); face. vertexNormals. push (normal. clone (), normal. clone (), normal. clone (); // method vector of the calculated face. materialIndex = materialIndex; // scope of the Material Index assigned to the assignment plane. faces. push (face); scope. faceVertexUvs [0]. push ([ultraviolet B. clone (), uvc, uvd. clone ()]) ;}} this. mergeVertices (); // The mergeVertices method is used to clear duplicate vertices in the ry }; /*************************************** * ************ the method attribute definition of the BoxGeometry object is as follows, it inherits from the Geometry object. **************************************** * *********/THREE. boxGeometry. prototype = Object. create (THREE. geometry. prototype );

Wuji (http://blog.csdn.net/omni360)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Wuji-this blog focuses on Agile development and mobile and IOT device research: data visualization, GOLANG, Html5, WEBGL, THREE. JS. Otherwise, the post from this blog will not be reprinted or reprinted. Thank you for your cooperation.

The following code is a comment on the extras/geometries/BoxGeometry. JS file in the THREE. js source code file.

More updates in: https://github.com/omni360/three.js.sourcecode