Three.js Source Note (68) Extras/geometries/boxgeometry.js

Source: Internet
Author: User

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.


I was just beginning to learn, a lot of things are definitely wrong and please forgive me.

The following code is a comment for the extras/geometries/boxgeometry.js file in the three.js source 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 within a three-dimensional space.//////usage: var geometry = new three. Boxgeometry (1,1,1);///var material = new three. Meshbasicmaterial ({color:0x00ff00});///var cube = new three. Mesh (geometry,material);///Scene.add (cube); *////<summary>boxgeometry</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 segment number </param>///<param name = "Heightsegments" type= "int" > Cube height subdivision segment number </param>///<param name = " Depthsegments "type=" int "> Cube depth Subdivision number of segments </param>three. Boxgeometry = function (width, height, depth, widthsegments, heightsegments, depthsegments) {three. Geometry.call (this);//Call method that invokes the Geometry object, which is originallyThe geometry method is given to the current object boxgeometry to 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 = Depthsegments | | 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", Represents the mapping of the U-coordinate to the XYZ coordinate from the build polygon </param>///<param name = "V" type= "String" > Value range "X, Y, z ", which represents the mapping of the v-coordinate from the build polygon to the xyz coordinate </param>///<param name =" Udir "type=" float "> is the direction of the vertex and origin in the calculation plane U direction </param >///<param name = "VDir" type= "float" > to 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" > half of the cube depth (why? should be the cube is the center point as the origin point!) </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;//The W coordinate is determined by the parameter UV to determine the direction of the face, imagine that the cube has six faces, Buildplane to construct triangular faces. 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 + +) {//Here it is important to build the geometry, with the parameters given by the user to calculate the vertices, the order of the vertices, to be used below.//If you want to define geometry objects yourself, compute vertices, and triangular faces are mandatory Less. This requires the user to set the order in which the vertices are stored, and to have a clear geometric image in the mind. Do more practice. 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) * V dir;vector[W] = Depth;scope.vertices.push (vector);//The coordinates of vertices are computed by length, width, direction, and number of segments.}} for (iy = 0; iy < GridY; iy + +) {//Here is a very important step in building geometry, a polygon for a face for (ix = 0; ix < GridX; IX + +) {//Calculate to make up a cube polygon  The four vertices of the rectangle, a,b,c,d, I often mistakenly understood as a,b,c,d,4, here should be learning the geometrical knowledge that affects me. 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 UVA = new THREe. Vector2 (Ix/gridx, 1-iy/gridy); var UVB = 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 Triangular polygon face.normal.copy (normal) composed of a,b,c3 vertices, face.vertexNormals.push (normal . Clone (), Normal.clone (), Normal.clone ());//calculate plane's normal vector face.materialindex = materialindex;//Assignment Polygon's material index Scope.faces.push ( Face): scope.facevertexuvs[0].push ([UVA, UVB, UVD]); face = new three. Face3 (b + offset, C + offset, D + offset);//The triangular surface composed of b,c,d,3 vertices, a plane with two triangular faces, have seen it. face.normal.copy (normal); face.vertexno Rmals.push (Normal.clone (), Normal.clone (), Normal.clone ());//calculation of the plane's normal vector face.materialindex = materialindex;// The material index of the assignment polygon Scope.faces.push (face); scope.facevertexuvs[0].push ([Uvb.clone (), UVC, Uvd.clone ()]);}} This.mergevertices (); The//mergevertices method is used to clean up duplicate vertices in the geometry};/**********************************The following is a method property definition for the Boxgeometry object, inherited from the Geometry object. **************************************************/ Three. Boxgeometry.prototype = Object.create (three. Geometry.prototype);


Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.


The following code is a comment for the extras/geometries/boxgeometry.js file in the three.js source file.

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

Three.js Source Note (68) Extras/geometries/boxgeometry.js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.