Three. js source code annotation (October 13) extras/geometries/TorusKnotGeometry. js, three. jsgeometries

Three. js source code annotation (October 13) extras/geometries/TorusKnotGeometry. 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/TorusKnotGeometry. JS file in the THREE. js source code file.

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

/*** @ Author oosmoxiecode * based on http://code.google.com/p/away3d/source/browse/trunk/fp10/Away3D/src/away3d/primitives/TorusKnot.as? Spec = svn2473 & r = 2473 * // TorusKnotGeometryy is used to create a ring or ring knot object in a three-dimensional space. it is an extended 3D ry composed of rings knotted. It is often used for tubular and winding. the shape with a cyst. /// on the geometric characteristics of the ring knot, refer to: http://en.wikipedia.org/wiki/Torus_knot/// all kinds of beautiful demo: http://katlas.math.toronto.edu/wiki/36_torus_knots/////method: var geometry = new THREE. torusKnotGeometry (5, 32, 32); // var material = new THREE. meshBasicMaterial ({color: 0x00ff00}); // var sphere = new THREE. mesh (geometry, material); // scene. add (sphere ); * //// <summary> TorusKnotGeometry </summary> /// <param name = "radius" type = "float"> ring knot radius </param> /// <param name = "tube" type = "float"> radius of the annular bend </param> // <param name = "radialSegments" type = "int"> number of subdivided line segments </param> /// <param name = "tubularSegments" type = "int"> Number of subdivided line segments on the circumference of the annular bending pipe </param> // <param name = "p" type = "float"> p \ Q: it is effective for knot (knot) mode to control the number of circles wound in the curve path. P determines the vertical direction parameter. </param> /// <param name = "q" type = "float"> p \ Q: it is effective for knot (knot) mode and controls the number of circles wound in the curve path, q: The parameter that determines the horizontal direction. </param> /// <param name = "heightScale" type = "float"> scale the center and height of the ring. the default value is 1 </param> THREE. torusKnotGeometry = function (radius, tube, radialSegments, tubularSegments, p, q, heightScale) {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 TorusKnotGeometry for use. this. parameters = {radius: radius, // ring junction radius tube: tube, // ring junction bend radius radialSegments: radialSegments, // number of segments on the ring junction circumference tubularSegments: tubularSegments, // number of segments on the circumference of the annular bend p: p, // p \ Q: it is effective for knot (knot) mode and controls the number of loops wound in the curve path, P determines the vertical parameter. q: q, // p \ Q: This is effective for knot (knot) mode. It controls the number of circles wound in the curve path. Q determines the horizontal direction parameter. heightScale: heightScale // scale up and down the ring node. the default value is 1}; radius = radius | 100; // The ring radius. The default value is 100 tube = tube | 40; // the radius of the ring bend, the default value is 40 radialSegments = radialSegments | 64; // number of segments on the circular knot. The default value is 64 tubularSegments = tubularSegments. | 8; // number of segments on the circumference of the annular bend. The default value is 8 p = p | 2; // p \ Q: valid for knot (knot, controls the number of circles in the curve path. P determines the vertical direction parameter. the default value is 2q = q | 3; // p \ Q: this parameter is valid for knot (knot) mode. It controls the number of circles in the curve path and the Q parameter determines the horizontal direction. the default value is 3 heightScale = heightScale | 1; // The vertical scaling of the ring. the default value is 1var grid = new Array (radialSegments); var tang = new THREE. vector3 (); var n = new THREE. vector3 (); var bitan = new THREE. vector3 (); // calculate vertex data and press it into the vertices Array for (var I = 0; I <radialSegments; ++ I) {grid [I] = new Array (tubularSegments ); var u = I/radialSegments * 2 * p * Math. PI; var p1 = getPos (u, q, p, radius, heightScale); var p2 = getPos (u + 0.01, q, p, radius, heightScale); tang. subVectors (p2, p1); n. addVectors (p2, p1); bitan. crossVectors (tang, n); n. crossVectors (bitan, tang); bitan. normalize (); n. normalize (); for (var j = 0; j <tubularSegments; ++ j) {var v = j/tubularSegments * 2 * Math. PI; var cx =-tube * Math. cos (v); // TODO: Hack: Negating it so it faces outside. var cy = tube * Math. sin (v); var pos = new THREE. vector3 (); pos. x = p1.x + cx * n. x + cy * bitan. x; pos. y = p1.y + cx * n. y + cy * bitan. y; pos. z = p1.z + cx * n. z + cy * bitan. z; grid [I] [j] = this. vertices. push (pos)-1 ;}/// calculate the triangle surface and map uvfor (var I = 0; I <radialSegments; ++ I) {for (var j = 0; j <tubularSegments; ++ j) {var ip = (I + 1) % radialSegments; var jp = (j + 1) % tubularSegments; var a = grid [I] [j]; var B = grid [ip] [j]; var c = grid [ip] [jp]; var d = grid [I] [jp]; var Va = new THREE. vector2 (I/radialSegments, j/tubularSegments); var ultraviolet B = new THREE. vector2 (I + 1)/radialSegments, j/tubularSegments); var uvc = new THREE. vector2 (I + 1)/radialSegments, (j + 1)/tubularSegments); var uvd = new THREE. vector2 (I/radialSegments, (j + 1)/tubularSegments); this. faces. push (new THREE. face3 (a, B, d); this. faceVertexUvs [0]. push ([ultraviolet A, ultraviolet B, uvd]); this. faces. push (new THREE. face3 (B, c, d); this. faceVertexUvs [0]. push ([ultraviolet B. clone (), uvc, uvd. clone ()]) ;}} this. computeFaceNormals (); // calculate the surface normal this. computeVertexNormals (); // calculate the vertex normal. // The getPos method is used to obtain the specific implementation of vertex coordinates, including u, in_q, in_p, radius, and heightScale. * //// <summary> getPos </summary> /// <param name = "u" type = "float"> segments on the circumference, the distance from the total length of the current segment to the start point. </param> /// <param name = "in_p" type = "float"> p \ Q: it is effective for knot (knot) mode and controls the number of circles wound in the curve path, P determines the vertical parameter. </param> /// <param name = "in_q" type = "float"> p \ Q: it is effective for knot (knot) mode and controls the number of circles wound in the curve path, q: The parameter that determines the horizontal direction. </param> /// <param name = "radius" type = "float"> ring knot radius </param> /// <param name = "heightScale" type =" float "> the vertical scaling of the ring knot. </param> function getPos (u, in_q, in_p, radius, heightScale) {var cu = Math. cos (u); var su = Math. sin (u); var quOverP = in_q/in_p * u; var cs = Math. cos (quOverP); var tx = radius * (2 + cs) * 0.5 * cu; var ty = radius * (2 + cs) * su * 0.5; var tz = heightScale * radius * Math. sin (quOverP) * 0.5; return new THREE. vector3 (tx, ty, tz );}}; /*************************************** * ************ the method attribute definition of the TorusKnotGeometry object is as follows, it inherits from the Geometry object. **************************************** * *********/THREE. torusKnotGeometry. 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/TorusKnotGeometry. JS file in the THREE. js source code file.

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