threejs创建折线偏移

时间:2018-08-24 11:56:38

标签: javascript three.js

我有一个带有折线的顶点几何。但是我创建的偏移量是不正确的。我目前正在做的是计算几何中心。并相对于中心偏移一个值。这不是正确的偏移量。

我当前的代码:

    var size = 10;
    var geo = this.mesh.geometry,
        center = new THREE.Vector3();

    geo.computeBoundingBox();
    geo.boundingBox.getCenter(center);

    geo.vertices.forEach(function(vertice){
        var C = new THREE.Vector3()
        C.subVectors( vertice, center ).multiplyScalar( 1 + ( size / C.length() ) ).add( center );
        vertice.copy(C);
    });

    geo.verticesNeedUpdate = true;

所以现在我想到了另一个解决方案,使用上一个和下一个顶点来计算更好的偏移基点。下图可能会阐明我要实现的目标。我知道顶点a,b和c。但是我不知道的是两条线成90度角碰撞时的顶点。

这样,我可以使用更好的间距选项计算每个顶点的更好偏移量。用什么方法可以计算出a和b之间的紫色点?

enter image description here

1 个答案:

答案 0 :(得分:0)

如果我正确理解了这种情况,则应该能够使用以下代码来计算“顶点”(即中心)。请注意,直接获取顶点A,B,C,但是您可能需要根据顶点的存储方式对其进行修改:

  var size = 10;
  var geo = this.mesh.geometry,
      center = new THREE.Vector3();

  geo.computeBoundingBox();
  geo.boundingBox.getCenter(center);

  // Aquire the vertices A, B, C between which the purpel vertex will "project
  // to"
  var A = geo.vertices[0]
  var B = geo.vertices[1]
  var C = geo.vertices[2]

  // Compute vectors between A, B, and C that will be needed to calculate 
  // purpel vertex. Note that "dirAB" is a unit vector (normalized) which 
  // means we use it to find "center"
  const dirAB = new THREE.Vector3().subVectors(B, A).normalize()
  const vecAC = new THREE.Vector3().subVectors(C, A)

  // This is the distance along AB that the purpel vertex sits at
  const proj = dirAB.dot(vecAC)

  // Compute the position of "center" (the purpel vertex) based on "proj" 
  // distance along the "dirAB" unit vector
  center = new THREE.Vector3()
    .copy(A)
    .addScaledVector(dirAB, proj)

  // geo.vertices.forEach(function(vertice){
  //     var C = new THREE.Vector3()
  //     C.subVectors( vertice, center )
  //     .multiplyScalar( 1 + ( size / C.length() ) ).add( center );
  //     vertice.copy(C);
  // });

  geo.verticesNeedUpdate = true;