【babylonjs】babylonjs实践（十三）--画线细节

背景

上一节遗留了一段代码，为了不引起跳节，这边补一补，展开讲讲。

代码

  const computeOffsetPoint = (targetPoint, referencePoint, changeSide = false) => {
    const offsetDirection = referencePoint.subtract(targetPoint).cross(new BABYLON.Vector3(0, 0, 1)).normalize()
    const offsetDimension = 0.3

    if (changeSide) {
      offsetDirection.scaleInPlace(-1.0)
    }

    const offsetPoint = targetPoint.add(offsetDirection.scale(offsetDimension))

    return offsetPoint
  }

计算出对称点。

• targetPoint, referencePoint 这两个都是new BABYLON.Vector3格式。一个点的坐标。

• referencePoint.subtract(targetPoint) 成为一个矢量。

Returns a new Vector3, result of the subtraction of the given vector from the current Vector3

Parameters otherVector: DeepImmutable defines the second operand

Returns Vector3 the resulting Vector3

• referencePoint.subtract(targetPoint).cross(new BABYLON.Vector3(0, 0, 1)) 和（0.0.1）的方向进行叉乘，得到另一个方向的一个向量。orthogonal，正交。通俗的说，就是和上面两个向量构成的平面正交。

Returns a new Vector3 as the cross product of the current vector and the "other" one The cross product is then orthogonal to both current and "other"

Parameters other: Vector3 defines the right operand

Returns Vector3 the cross product

• referencePoint.subtract(targetPoint).cross(new BABYLON.Vector3(0, 0, 1)).normalize() 这个英文文档里写的不明，字面意思好理解的，就是归一化。

Normalize the current Vector3. Please note that this is an in place operation.

Returns Vector3 the current updated Vector3

如果不理解，我再画个图。

第一步，取两个点，连线，构成一个向量。

第二步，和一个向量cross后得到一个正交向量。

第三步，把绿色的正交得到的向量归一化。

• offsetDirection 这个是上述操作之后得到的一个向量。

• offsetDimension 标量

• offsetDirection.scaleInPlace(-1.0) 乘以-1，反方向。 Multiplies the Vector3 coordinates by the float "scale"

Parameters scale: number defines the multiplier factor

Returns Vector3 the current updated Vector3

• targetPoint.add(offsetDirection.scale(offsetDimension))

scale，尺度变化 add，加减

这段话归一化后的1，乘以0.3，然后再targetPoint边上正负0.3. 就说前面画的双黄线。

---

具体查看api doc.babylonjs.com/typedoc/cla…