从给定的3d点阵列中抽出管子

Question

我想使用three.js在给定的点阵列之间绘制一些直管。我尝试使用threejs的paint示例在两点之间绘制管。到目前为止，我已经完成了this。但是正如您看到的那样，在我应用矩阵后，管会扭曲。

此外，在three.js的示例中，我看到他们正在使用TubeBufferGeomety，它使用诸如CatmullRomCurve3, SplineCurve之类的各种路径作为参数。这样会生成类似this的曲线型管几何。

我想在点之间绘制直线管，而不是绘制任何曲线。有人可以建议我在code中我做错了什么吗，还是有其他方法可以做到？

// Simple three.js example

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new THREE.OrbitControls(camera);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(20));

  generateTubes();

}

function animate() {

  requestAnimationFrame(animate);

  //controls.update();

  renderer.render(scene, camera);

}

function generateTubes() {

  var tubeSideNumber = 8;
  var fixedIndexArray = [];
  var indices = [];
  var vertices = [];
  var colors = [];
  var tubeRadius = 1;

  generateFixedIndexedArray();

  var points = [];
  for (let i = 1; i <= 5; i++) {
    let posX = getRandomInt(0, i);
    let posY = getRandomInt(0, i);
    let posZ = getRandomInt(0, i);
    points.push(new THREE.Vector3(posX, posY, posZ));
  }
  createTubeGeometry(points, tubeRadius);

  var geometry = new THREE.BufferGeometry();
  geometry.setIndex(new THREE.Uint8BufferAttribute(indices, 1));
  geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

  var material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    side: THREE.DoubleSide
  });
  var mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);



  function createTubeGeometry(positionArray, radius) {
    var shapes = getTubeShapes(radius);

    var len = positionArray.length;

    for (var i = 0; i < len - 1; i++) {
      insertVerticesForThisPoint(shapes, positionArray[i], positionArray[i + 1]);
    }

    insertVerticesForThisPoint(shapes, positionArray[len - 1], positionArray[len - 2]);

    var offset = 0;

    for (i = 0; i < len - 1; i++) {
      insertIndices(offset);
      offset += tubeSideNumber;
    }
  }

  function generateFixedIndexedArray() {
    for (var i = 0; i < tubeSideNumber; i++) {
      var a = i;
      var b = (i + 1) % tubeSideNumber;
      var c = tubeSideNumber + i;
      var d = tubeSideNumber + (i + 1) % tubeSideNumber;

      fixedIndexArray.push(c);
      fixedIndexArray.push(d);
      fixedIndexArray.push(b);

      fixedIndexArray.push(c);
      fixedIndexArray.push(b);
      fixedIndexArray.push(a);
    }
  }

  function getTubeShapes(radius) {
    var PI2 = Math.PI * 2;
    var shapes = [];
    for (var i = 0; i < tubeSideNumber; i++) {
      var angle = (i / tubeSideNumber) * PI2;
      shapes.push(new THREE.Vector3(Math.sin(angle) * radius, Math.cos(angle) * radius, 0));
    }
    return shapes;
  }


  function getApplyMatrix(point1, point2, translatePoint) {
    var rotationMat = new THREE.Matrix4();
    rotationMat.lookAt(point1, point2, new THREE.Vector3(0, 1, 0));
    var translateMat = new THREE.Matrix4();
    translateMat = translateMat.makeTranslation(translatePoint.x, translatePoint.y, translatePoint.z);
    return rotationMat.multiply(translateMat);
  }

  function insertVerticesForThisPoint(shapes, thisPoint, pointToLookAt) {
    for (var i = 0; i < shapes.length; i++) {
      var vertex = shapes[i];

      vertex.applyMatrix4(getApplyMatrix(thisPoint, pointToLookAt, thisPoint));

      vertices.push(vertex.x);
      vertices.push(vertex.y);
      vertices.push(vertex.z);

      colors.push(Math.random());
      colors.push(Math.random());
      colors.push(Math.random());
    }
  }

  function insertIndices(offset) {
    for (var i = 0; i < fixedIndexArray.length; i++)
      indices.push(fixedIndexArray[i] + offset);
  }

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>