ThreeJS:几何体相关(BufferGeometry)( 二 )

有了创建点几何体的知识, 就能创建线几何体
4. 创建由线到面的几何体// 点数var triangles = 160000;var geometry = new THREE.BufferGeometry();var positions = [];// 点的法向量var normals = [];var colors = [];var color = new THREE.Color();// 正方体, 长宽高都为800var n = 800, n2 = n / 2; // 三角形三个点点在正方体内, 这个正方体长宽高都为12var d = 12, d2 = d / 2; // abc, 三个顶点位置var pA = new THREE.Vector3();var pB = new THREE.Vector3();var pC = new THREE.Vector3();// c点到b点的方向向量var cb = new THREE.Vector3();// a点到b点的方向向量var ab = new THREE.Vector3();for ( var i = 0; i < triangles; i ++ ) { // positions var x = Math.random() * n - n2; var y = Math.random() * n - n2; var z = Math.random() * n - n2; var ax = x + Math.random() * d - d2; var ay = y + Math.random() * d - d2; var az = z + Math.random() * d - d2; var bx = x + Math.random() * d - d2; var by = y + Math.random() * d - d2; var bz = z + Math.random() * d - d2; var cx = x + Math.random() * d - d2; var cy = y + Math.random() * d - d2; var cz = z + Math.random() * d - d2; // 添加一个三角形的3个顶点, 每个顶点有xyz三个数据 positions.push( ax, ay, az ); positions.push( bx, by, bz ); positions.push( cx, cy, cz ); // 求法向量, 首先设置三角形的三个顶点 pA.set( ax, ay, az ); pB.set( bx, by, bz ); pC.set( cx, cy, cz ); // 求出两个方向向量 cb.subVectors( pC, pB ); ab.subVectors( pA, pB ); // 叉积, 求法向量 cb.cross( ab ); // 单位化这个法向量 cb.normalize(); var nx = cb.x; var ny = cb.y; var nz = cb.z; // 添加法向量到法向量数组中 // 三角形的三个顶点的法向量相同, 因此复制三份 normals.push( nx, ny, nz ); normals.push( nx, ny, nz ); normals.push( nx, ny, nz ); // colors var vx = ( x / n ) + 0.5; var vy = ( y / n ) + 0.5; var vz = ( z / n ) + 0.5; color.setRGB( vx, vy, vz ); colors.push( color.r, color.g, color.b ); colors.push( color.r, color.g, color.b ); colors.push( color.r, color.g, color.b );}// 加入位置信息geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );// 加入法向量信息geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );// 加入颜色信息geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );geometry.computeBoundingSphere();var material = new THREE.MeshPhongMaterial( { color: 0xaaaaaa, specular: 0xffffff, shininess: 250, side: THREE.DoubleSide, vertexColors: true} );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );效果图如下
文章插图
面几何体与前两种几何体很大的不同在于, 面几何体需要法向量信息
在代码中我也是添加了很多注释便于理解, 这里我再大致解释一下
已知三个点, 求出两条边的方向向量, 这两个方向向量做叉乘, 结果变为由三个点构成的三角形的法向量
5. 创建点云的源码由点到线, 由线到面, 希望读者自己可以模仿写出来
Titlebody{margin: 0;overflow: hidden;}作者:随遇丿而安
【ThreeJS:几何体相关(BufferGeometry)】出处: