three.js自定义BufferGeometry几何体绘制变径管道

three.js自定义BufferGeometry几何体绘制变径管道 改进

1.井轨迹 THREE.CatmullRomCurve3对象
如: new THREE.CatmullRomCurve3(
[
[0,0,0],
[0,-600,0],
[0,-1000,0]
].map(el => new THREE.Vector3(…el)))
2.井深-半径数组 ,二维数组
如: [
// [井深,半径],
[0,10],
[200,10],
[400,40],
[600,30],
[1000,30]
]
3.半径值域 如 [0,50]
4.线性映射值域 如 [20,200]

/**
 * @author icecream
 * @version 1.0.0
 * @description 绘制变径管道 
 * @param curve 井轨迹, Type -> THREE.CatmullRomCurve3 必需
 * @param aveRadius 半径数组, Type -> [[井侧深:Number,半径:Number],...] 必需
 * @param valuesArr 半径值域, Type -> [半径值域最小值:Number,半径值域最大值:Number] 必需
 * @param mapValuesArr 半径线性映射值域, Type -> [半径线性映射值域最小值:Number,半径线性映射值域最大值:Number] 必需
 * @param segments 管道截面分段, Type -> 分段数:Number default:10 非必须
 */

THREE.VolatilePipe = function (curve, aveRadius, valuesArr, mapValuesArr, segments) {

  var frames = compute(curve, aveRadius, valuesArr, mapValuesArr, segments)
  console.log(frames)
  var geo = new THREE.BufferGeometry();
  geo.setIndex(frames.indices);
  geo.addAttribute('position', new THREE.Float32BufferAttribute(frames.vertices, 3));
  geo.computeVertexNormals();
  return geo
}
THREE.VolatilePipe.prototype.constructor = THREE.VolatilePipe

function compute(curve, radiusArr, valuesArr, mapValuesArr, spl) {

  var Y = new THREE.Vector3(0, 1, 0);
  var spl = spl || 10;
  var angle = 2 * Math.PI / spl;
  var len = radiusArr.length; // 数组长度
  var wellLength = curve.getLength();
  var vertices = [];
  var indices = [];

  vertices = radiusArr.map(function (v, i) {

    var back = [];

    var point = curve.getPointAt(Math.abs(v[0] / wellLength));

    var _length = THREE.Math.mapLinear(v[1], valuesArr[0], valuesArr[1], mapValuesArr[0], mapValuesArr[1]); // 半径长度线性映射

    var tangent = curve.getTangentAt(Math.abs(v[0] / wellLength)); // 切线 即 截面法线

    var normal = new THREE.Vector3();

    const angle1 = tangent.angleTo(Y)

    if (angle1 < Math.PI / 36 || (Math.PI - angle1) < 36)

      normal.set(1, 0, 0).setLength(_length);

    else

      normal.crossVectors(tangent, Y).setLength(_length);

    back = back.concat(normal.clone().add(point).toArray());

    for (var j = 0; j < spl - 1; j++) { // last version : (...; j < spl; ...) 顶点复用

      normal.applyAxisAngle(tangent, angle);

      back = back.concat(normal.clone().add(point).toArray());
    }

    return back;

  }).reduce((pre, cur) => pre.concat(cur), []);


  // 计算faces
  for (var _i = 0; _i < len - 1; _i++) {

    var _t = _i * spl; // 0 4 8 

    for (var _j = 0; _j < spl; _j++) { // 0,1,2,3

      indices.push(_t + _j + spl, (_j === spl - 1) ? _t + _j + 1 : _t + _j + spl + 1, (_j === spl - 1) ? _t : _t + _j + 1);

      indices.push(_t + _j, _t + spl + _j, (_j === spl - 1) ? _t : _t + _j + 1);
    }
  }
  return {

    vertices,

    indices

  }
}

demo：

  var curve = new THREE.CatmullRomCurve3([[0,0,0],[0,-600,0],[0,-1000,0]].map(el=>new THREE.Vector3(...el))),    
      valuesArr = [0,50],//[200,500],
      mapValuesArr = [20,200];
  var _geo = new THREE.VolatilePipe(curve,[[0,10],[200,10],[400,40],[600,30],[1000,30]],valuesArr,mapValuesArr)
        _materialData = new THREE.MeshPhongMaterial({
            color:0xffff00,
            side:THREE.DoubleSide 
      });
      var _mesh = new THREE.Mesh(_geo, _materialData)
      scene.add(_mesh)

效果图:

ps：后来发现可以在threejs中tubegeomerty的源码基础上做修改也能画出变径管道，参考：变径管道的再次改进